The Expert-Approved Method of Optimizing Your Page Speeds

1. Enable compression (via Gzip)

When a browser loads your website, it actually downloads resources from the server first. If you have files larger than 150 bytes, the browser takes longer download time which makes your page load slower. With this, it is highly recommended that you compress the size of your files larger than 150 bytes. Apache developers can easily do this by putting the following code in your .htaccessfile:

For Nginx servers, edit the main configuration of your Nginx server by placing the following code and reload Nginx for any changes to take effect:

Enabling compression of huge files enables your site to load resources faster. However, compression should only be used for files other than images as it affects the quality of your visuals.

2. Image optimizations

Using image optimization on your website will increase the page speed time. Doing image optimizations will also increase ranking in search engines.

There are three recommendations when optimizing the images on your website to quicken the page load speed.

1. Using progressive images. A progressive JPEG encodes the image into several scans. The first scan renders the full image in low quality and for each successive render, the quality of the image is improved.

2. Serve images based on the media. For instance, you may have three different images meant for the desktop, tablet, and mobile. To implement this correctly, you need to use the picture tag of HTML5 and define the sources. Refer to this code for the example:

3. Optimize Javascript and CSS delivery

Optimizing the JavaScript and CSS delivery is important because it also optimizes the critical render path. Critical render path is the series of events that happen in the background before your web page content is actually displayed.

It determines the necessary events that make the above-the-fold region of your web page appear in your browser. Optimizing the critical render path can actually take off some very important seconds out of your page load time.

How to do Javascript Optimization

To do this, you need to reduce the number of JavaScript assets being downloaded by the browser and minimize the size of the JavaScript being downloaded. Just combine all important JavaScript library files (ex. jQuery.js, zepto.js) into one single JavaScript file. You may minify this file to reduce the size of the downloaded file.

For all the other JavaScripts that are not required to be loaded during the critical render path, place all of them at the bottom of the HTML structure, just before the closing </body> tag, then add an “async” tag to their <script> markup.

You may also opt to inline small JavaScript codes. This is particularly helpful in optimizing for First Paint, First Meaningful Paint, and Time To Interact. Inline scripts are executed immediately. This is particularly helpful for instances where JavaScript is needed to display the first elements in your above-the-fold region, like sliders and the menu.

How to do CSS Optimization

To optimize CSS or the web style, you would want to separate the critical CSS first. This means that you take out what CSS rules style your above-the-fold region and place them all in line with your HTML markup. To detect which CSS files actually style your above-the-fold region, you can use Google developer tools:

• Open your developer tools
• Cmd + Shift + P (for Mac); Ctrl + Shift + P (for Windows)
• And search for “Coverage”

Naturally, responsive websites have many lines of CSS codes that are actually not necessary for some other media or viewing devices. For example, there is a specific code dedicated to both desktop and mobile only. You need to optimize by separating these rules and putting them in different files and define media tag when calling each style.

4. Icons and font usage optimizations

Another thing that could be clogging your page load speed is the fonts and icons you use on your website. There are two ways to optimize your website icons:

1. Use a single image sprite and just control the display of icons via CSS. Rather than include each small icon as a separate image file in your website, just having one image file to load is more efficient in memory and in bandwidth since you are only requesting only one file.

2. Converting all your icons into .svg and use them as fonts. You can use IcoMoon app to convert the icons to .svg. 

To optimize font usage, one must audit and monitor your font use on your web pages so you don’t have to include different font files. You want to be consistent with your typography since this is also important for your branding. This provides a faster experience for your users.

It is crucial to deliver optimized font formats to each browser. Provide each font in WOFF2, WOFF, EOT, TTF formats. Make sure to apply Gzip compression to the EOT and TTF formats since they are not compressed by default.

You must also give precedence to local() in your src list. List local( ‘Font Name’) first in your src list to ensure that HTTP requests aren’t made for fonts that are already installed. Here’s an example:

Lastly, you may want to prioritize fonts that are already pre-installed in your website rather than calling fonts from external repository such as Google Fonts. This reduces calls from external websites and thus, quickens your loading time.

5. Minify CSS, JavaScript, and HTML resources

Minifying your CSS, JavaScript and HTML will reduce the file sizes which minimizes the amount of data being requested from the web server. Using this technique properly will dramatically fasten your page speed.

To minify JavaScript, CSS, and HTML files, comments and extra spaces need to be removed. One must also crunch variable names so as to minimize code and reduce file size. The minified file version provides the same functionality while reducing the bandwidth of network requests. You may use these tools to minify:

6. Reduce redirects

Each time a page redirects to another page, your visitor faces additional waiting time for the page to load. Make sure that your main pages don’t have unnecessary redirects. As much as possible, all your external and internal links should not redirect.

Some websites do this because there has been a major re-layout or major restructuring of information. So if your website is undergoing one, remember to reduce or minimize redirects.

7. Use a Content Distribution Network (CDN)

Content Distribution/Delivery Network or CDN is used to distribute the content across different geographic locations. Before, data centers used to be in one location only. So if your data center is in the US and someone from Singapore is accessing your website, the data will have to travel between both countries. This takes up too much time which affects your website speed. This is also known as Fibre Optic Latency.

With a CDN, you will be able to serve your website from the nearest data center to the person browsing your website.

Using CDN is helpful to improve user experience in terms of page load speed, which as we know, also matters in google page ranking. Aside from this, it also helps to prevent site crashes in the event of traffic surges. It distributes bandwidth across multiple servers, instead of using only one server to handle all traffic.

8. Implement caching techniques

Lastly, you must be using a reliable caching technique. There are three different kinds: browser’s cache, HTTP caching, and page caching.

When you leverage on your browser’s cache, you instruct the browsers to “remember” the resources of the website that it has previously loaded so that when a user goes to other pages of your site or returns to your website on another time, it doesn’t load all the assets all over again.

The following code is an example of how to instruct browsers to cache website assets such as images, CSS, JavaScript, and HTML via .htaccess:

HTTP caching occurs when the browser stores local copies of web resources for faster retrieval the next time the resource is required. As your website serves resources such as CSS, JavaScript, and images, it can attach cache headers to the response specifying the desired cache behavior. There are two primary HTTP cache headers: Cache-Control and Expires.

The last one, page caching, is storing your webpages in your server as an HTML file—usually within a server’s RAM which is extremely fast. If this is enabled, the server simply accesses the stored HTML file of the page and serves it directly to users. This speeds up the processing time by about 300%.

To use page caching, you may choose from these three:

• Alternative Php Cache (APC)—is an open-source framework that caches data using intermediate PHP code. Most web programmers who are familiar with the PHP programming language can easily set up Alternative PHP Cache for your site.
• Quickcache—is a lightweight page caching solution which was formerly known as jpcache. Quickcache caches the page output rather than compiling the PHP page, making it a superior version of page caching to the Alternative PHP caching.
• Varnish Cache—acts primarily as an accelerator in delivering HTTP requests. It serves cached pages from an in-memory cache which means no slow code executions and database queries.

When using cache techniques, it is important for you to remember to purge previously cached resources when making changes in your website.

Last but definitely not the least, the final step is to check how all of our efforts translated to our page load speed. Checking the effectiveness of the techniques you implemented is as important as implementing them. Aside from determining whether you succeeded, it also shows you if there are other opportunities for optimization.

After implementing all these steps to our website, our page load speed went from 18 seconds to 2 seconds.

Ever since our website speed went to two seconds, the number of our visitors, their time on our page, and bounce rates became more positive.

All in all, it’s not the end of the world if your website loads like it’s from the 2000’s. There’s hope and our website is proof. Don’t believe us? Head to our home page. Clear your cache if you want to really see how it loads from scratch.

See? You can achieve this type of website performance as well. Just hit up trusted digital marketing experts and they’ll know what to do. If not, just give them this step-by-step guide.

Key takeaways

• Strive to keep things simple and effective. A website doesn’t have to be filled with too many fancy elements. It just needs to be relevant and efficient to your brand’s vision and to your customers. You can achieve that by just focusing on necessary web features.
• Use the Core Web Vitals as your guide. The Core Web Vitals provide clear guidelines for digital marketers like you to best achieve a worthwhile experience for your customers. Use it as your guide to optimize your website as time goes by.

• Explore optimization strategies for different web elements. Different web elements will need different optimization strategies. Ensure that you incorporate these changes in all elements, so that your website features work efficiently. 

Overwhelmed with the amount of things you need for optimizing page load time? You don’t have to carry the burden all on your own. Our team is very much willing to help! Just leave us a message on Facebook, LinkedIn, and  X. 

Make sure to subscribe to our newsletter and stay updated on the latest digital marketing trends and tips.