How to Optimize Page Speed: 18 Secs to 2 Secs Loading Time
- 23 Feb 2019
Before we start the discussion, let’s have a little experiment. Go to your brand/company’s page and have a website speed test.
Was it almost instant? Just a few seconds? Or was it, God forbid, more than six seconds?
If you got less than four seconds, here’s a cyber high five for you. But if your page load speed is way more than that, read on to learn more about page speed optimization.
In this impatient, fast-paced world, letting your audience wait for your website to load is a crime. 40% of people leave a website if it takes more than 3 seconds to load while every one-second delay in your page performance may result in 7% loss in conversion. This doesn’t only have an instantaneous effect such as lost sales opportunity from those who chose to abandon the site, but the high bounce rates would push the site’s ranking downwards, hurting future conversion.
The nightmare doesn’t end there because Google bots also hate waiting. Since April 2010, your website speed is a ranking factor for Google. It is also a crucial factor when it comes to ranking in mobile searches. Because of the increasing number of active mobile users, making sure that your website is optimized for mobile screens and searches is important. It’s an understatement to say that page load speed should be a part of your SEO audit checklist.
Now, you may be asking yourself questions like "How to improve my website speed?" It can be overwhelming at first but worry not, we’ve been in the same situation.
A year ago, our website had a complete renovation. We focused on giving our audience the best user experience and attractive visuals. When we finally launched it, we took a Google website speed test and saw that it takes 18 seconds for users to see our website. Heartbreaking.
Of course, we didn’t want to settle with this turtle-like page load speed. What’s the use of awesome visual assets, eye-catching copies, and all our efforts on this website if everyone is already frustrated while waiting for everything to load. Not on our watch.
Here's how we checked and optimized Propelrr's page speed:
Where We Started And The Tools We Used
Upon learning that our website has a low page speed, we decided to start the page speed optimization project. We gathered the teams involved and came up with a strategy on how we’re going to tackle the issue.
We started by reviewing our performance based on the right metrics:
- Time to first byte – the amount of time it takes for the browser to receive the first byte of information from the site server;
- First paint – how long it takes before the user sees anything other than a blank page, such as a background color element;
- First meaningful paint – how long it takes before the user sees something relevant to them, like a banner image or headline text;
- Time to interact – how long before a user browsing the site is able to interact with the website elements; and
- Resource loading waterfall – a measure of the time needed to get all the webpage resources from the server to the web browser.
This enabled us to identify the opportunities for improvement and know the techniques we need to implement. To know how to test the website loading speed and check these key metrics, these tools will help you:
How We Did It
To optimize the page load speed of a website, we planned and executed the following methodology:
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
There are three recommendations when optimizing the images in your website to quicken the page load speed. First is 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.
The next technique is to serve images based on the media where it will be used. For instance, you may have three different images meant for desktop, tablet, and mobile. To implement this correctly, you need to used the picture tag of HTML5 and define the sources. Refer to this code for the example:
Lastly, you may use the Lazysizes plugin to defer loading of huge images. It is a technique that prioritizes important images first before the less important ones. Remember that it’s important to keep the quality of your images but without sacrificing the performance of your web page.
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 for desktop only while there is another code which is implemented for mobile only. You need to optimize by separating these rules and put 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 in your website.
For icons, it is recommended that you 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.
Another technique is converting all your icons into .svg and use them as fonts.
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.
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 these because there has been major relayout 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 the two countries. This takes up too much time which affects your website speed. This is also known as the 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.
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 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 which 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 effectivity 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.
So that wraps up another Propelrr TakeOff session. Do you have any questions? Comments? Experience with page loading issues that you’d like to share? Suggestions for future sessions?