- Apr 25, 2011
- 19,364
- 26,712
I had the opportunity of speaking with Google site speed optimization team recently in order to optimize one of my websites in terms of load time and I wanted to share some tips that I picked up from them, as well as some tips that I was already using.
Why website speed is important
Everyone here knows that site speed is very important - for one thing its known to be a ranking factor and for another, it has a massive effect on the user experience - slow site equals a bad user experience.
Some quick stats that came directly from my conversation with the Google web speed team:
I normally use this site to test the speed of my websites:
https://gtmetrix.com/
I also use this tool for getting some detailed information on what is being loaded and when:
http://www.websiteoptimization.com/services/analyze/
However, Google advised me to use one of their tools, which I have also used previously:
https://developers.google.com/speed/pagespeed/insights/
When you run this tool from Google, you get two results - one for desktop performance and one for mobile performance. You get a rating out of 100 and then you get suggestions about how you can improve performance - these suggestions are actionable tips tailored specifically to your website. For example it will show CSS files that are loading before the page can be displayed, java-script files, the presence, or omission or site compression and other key speed indicators.
Top tips for improving page load time
Here are some of the most important things that I will normally implement for improvement site load time, as well as some of the tips that I received from my conversation with Google today:
Enabling a performance plugin
If you want a free plugin, W3 Total Cache is great - its easy to install and set up, and it will take care of most of the common things to improve performance such as browser caching, file compression, CSS and javascript minification and some other stuff. If you want a premium plugin then go for WP Rocket - from experience this is the best plugin you can get anywhere for wordpress speed optimization. It is well worth the money and it generally improves performance far more than other similar plugins. If you don't have wordpress you need to get the equivilant plugins for whatever platform you are using, and you can also enable features such as file compression from your web server (Apache / IIS etc) - you can Google how to do that.
Optimize your images
This is another really important step. Optimizing the size of your images will drastically improve the speed with which your site loads. You can get a plugin to do this for you as well - if you use wordpress I recommend EWWW image optimizer - it will automatically optimize all of the images on your wordpress site - both new and existing - for a small fee (At the time of writing its around $9 per 3000 images). With the default settings it will reduce the size of your images without compromising at all on quality.
Remove render blocking CSS
The way this works is as follows - ordinarily a website will typically load lots of CSS and JS files first, before it even produces the above the fold part of the website. This means that the site loads slower even when sometimes those files are not even needed until the user scrolls down. If you change this so that only the important files are loaded first and then the rest is loaded when it is needed, or at the last point, then the speed of the site is faster and the user experience is better - they see everything above the folder much quicker and are not waiting for unnecessary scripts to load. This can be done in wordpress as follows: First of all, look in the results of the page-speed insights tool and look for this heading - Eliminate render-blocking CSS in above-the-fold content. Expand this section and you will see all of the CSS files on your site that are being loaded before the page can be fully displayed. Copy the full path to each CSS file and then open it in a new window. One by one carry out this procedure with each CSS file - copy the data, paste it into this tool - https://jonassebastianohlsson.com/criticalpathcssgenerator/, add the URL of your website to the tool, then generate the critical CSS code. Once you have the critical code for all of your CSS files, combine it together and then go back to your wordpress dashboard. Install a plugin called - autoptimize. Go to the settings of this plugin, first of all tick the boxes next to optimise HTML, optimise JS and optimise CSS. Then click the option to display advanced settings and then tick "Inline and Defer CSS". Then paste the critical CSS content into the text box below this setting. Then save the plugin. What this does is it loads only the critical parts of each CSS file that allow the above the fold page to display correctly, then it defers the remainder of the original CSS files until the end of the page load thus making the page appear to load much faster and improving the user experience.
Combine Google fonts
If you are using Google fonts you will probably see those listed in the render blocking section of the insights tool as well. Its worth checking to see whether you actually need or use the fonts that are loaded. If not you can remove them. If you do need them and you have multiple fonts being called, you can combine these for quicker loading / less calls. You can do this with the same plugin used above - autoptimize - go back into the settings for that plugin, then go to the extras tab. In the Google fonts section tick the box that is labelled "Combine and link in head". Then save the plugin.
Look for a decent hosting provider
Hosting provider is also important. You want a host that has fast servers - and preferably one that is using SSD drives for faster performance. If you have an important website or websites then its important to look for a good provider - don't try to save money and go for the cheaper shared hosting providers otherwise you will suffer when it comes to performance. I am not going to recommend providers here, but there are some great hosting services listed in the BHW marketplace many of which will give you great performance for your website in terms of load times.
Implement a CDN network
I would recommend cloudflare as a decent (and easy to configure) CDN (content delivery network). Basically it caches and then delivers your sites content to visitors using servers geographically as close to them as possible in order to a) reduce load on your web server and b) save time based on smaller hop count and so on. To be honest its not something I have a great deal of experience with, but its still an important factor when it comes to speed optimization and user experience. Also it has lots of other advantages including the provision of basic DDOS protection.
Implement image sprites
This is pretty advanced and not something I have used for a long time. Its not something I would personally attempt to set up on an existing site either, but if you have the benefit of building a site from the ground up, image sprites are a great way to reduce server calls and greatly improve overall performance. Basically this involves combining small images into a single file and then calling the relevant parts of that single file when displaying the various individual images. Although you end up with one large image file it could mean one server call instead of 30 or 40 and this creates a massive performance benefit. Its a complex topic though and not one I am going in to in this guide because I dont think its practical to implement for most existing websites.
After you have made all of these changes, run the page speed insights tool again and see how much improvement you have
I personally followed all of the above tips for one of my websites today and I took it from a score of 35 on the Google page speed insights tool, to 88. And in GTMetrix its showing as 93%.
Why website speed is important
Everyone here knows that site speed is very important - for one thing its known to be a ranking factor and for another, it has a massive effect on the user experience - slow site equals a bad user experience.
Some quick stats that came directly from my conversation with the Google web speed team:
- 53% of visitors abandon a site that takes more than 3 seconds to load
- Google advertise load time as being one of their most important factors as far as user experience is concerned, and this is even more important when it comes to mobile device use.
- 1 second delay in load time can result in an 8% increase in bounce rate
- 1 second delay in load time can result in a 7% decrease in conversions
- 1 second delay in load time can result in a 2.1% decrease in cart size
I normally use this site to test the speed of my websites:
https://gtmetrix.com/
I also use this tool for getting some detailed information on what is being loaded and when:
http://www.websiteoptimization.com/services/analyze/
However, Google advised me to use one of their tools, which I have also used previously:
https://developers.google.com/speed/pagespeed/insights/
When you run this tool from Google, you get two results - one for desktop performance and one for mobile performance. You get a rating out of 100 and then you get suggestions about how you can improve performance - these suggestions are actionable tips tailored specifically to your website. For example it will show CSS files that are loading before the page can be displayed, java-script files, the presence, or omission or site compression and other key speed indicators.
Top tips for improving page load time
Here are some of the most important things that I will normally implement for improvement site load time, as well as some of the tips that I received from my conversation with Google today:
Enabling a performance plugin
If you want a free plugin, W3 Total Cache is great - its easy to install and set up, and it will take care of most of the common things to improve performance such as browser caching, file compression, CSS and javascript minification and some other stuff. If you want a premium plugin then go for WP Rocket - from experience this is the best plugin you can get anywhere for wordpress speed optimization. It is well worth the money and it generally improves performance far more than other similar plugins. If you don't have wordpress you need to get the equivilant plugins for whatever platform you are using, and you can also enable features such as file compression from your web server (Apache / IIS etc) - you can Google how to do that.
Optimize your images
This is another really important step. Optimizing the size of your images will drastically improve the speed with which your site loads. You can get a plugin to do this for you as well - if you use wordpress I recommend EWWW image optimizer - it will automatically optimize all of the images on your wordpress site - both new and existing - for a small fee (At the time of writing its around $9 per 3000 images). With the default settings it will reduce the size of your images without compromising at all on quality.
Remove render blocking CSS
The way this works is as follows - ordinarily a website will typically load lots of CSS and JS files first, before it even produces the above the fold part of the website. This means that the site loads slower even when sometimes those files are not even needed until the user scrolls down. If you change this so that only the important files are loaded first and then the rest is loaded when it is needed, or at the last point, then the speed of the site is faster and the user experience is better - they see everything above the folder much quicker and are not waiting for unnecessary scripts to load. This can be done in wordpress as follows: First of all, look in the results of the page-speed insights tool and look for this heading - Eliminate render-blocking CSS in above-the-fold content. Expand this section and you will see all of the CSS files on your site that are being loaded before the page can be fully displayed. Copy the full path to each CSS file and then open it in a new window. One by one carry out this procedure with each CSS file - copy the data, paste it into this tool - https://jonassebastianohlsson.com/criticalpathcssgenerator/, add the URL of your website to the tool, then generate the critical CSS code. Once you have the critical code for all of your CSS files, combine it together and then go back to your wordpress dashboard. Install a plugin called - autoptimize. Go to the settings of this plugin, first of all tick the boxes next to optimise HTML, optimise JS and optimise CSS. Then click the option to display advanced settings and then tick "Inline and Defer CSS". Then paste the critical CSS content into the text box below this setting. Then save the plugin. What this does is it loads only the critical parts of each CSS file that allow the above the fold page to display correctly, then it defers the remainder of the original CSS files until the end of the page load thus making the page appear to load much faster and improving the user experience.
Combine Google fonts
If you are using Google fonts you will probably see those listed in the render blocking section of the insights tool as well. Its worth checking to see whether you actually need or use the fonts that are loaded. If not you can remove them. If you do need them and you have multiple fonts being called, you can combine these for quicker loading / less calls. You can do this with the same plugin used above - autoptimize - go back into the settings for that plugin, then go to the extras tab. In the Google fonts section tick the box that is labelled "Combine and link in head". Then save the plugin.
Look for a decent hosting provider
Hosting provider is also important. You want a host that has fast servers - and preferably one that is using SSD drives for faster performance. If you have an important website or websites then its important to look for a good provider - don't try to save money and go for the cheaper shared hosting providers otherwise you will suffer when it comes to performance. I am not going to recommend providers here, but there are some great hosting services listed in the BHW marketplace many of which will give you great performance for your website in terms of load times.
Implement a CDN network
I would recommend cloudflare as a decent (and easy to configure) CDN (content delivery network). Basically it caches and then delivers your sites content to visitors using servers geographically as close to them as possible in order to a) reduce load on your web server and b) save time based on smaller hop count and so on. To be honest its not something I have a great deal of experience with, but its still an important factor when it comes to speed optimization and user experience. Also it has lots of other advantages including the provision of basic DDOS protection.
Implement image sprites
This is pretty advanced and not something I have used for a long time. Its not something I would personally attempt to set up on an existing site either, but if you have the benefit of building a site from the ground up, image sprites are a great way to reduce server calls and greatly improve overall performance. Basically this involves combining small images into a single file and then calling the relevant parts of that single file when displaying the various individual images. Although you end up with one large image file it could mean one server call instead of 30 or 40 and this creates a massive performance benefit. Its a complex topic though and not one I am going in to in this guide because I dont think its practical to implement for most existing websites.
After you have made all of these changes, run the page speed insights tool again and see how much improvement you have
I personally followed all of the above tips for one of my websites today and I took it from a score of 35 on the Google page speed insights tool, to 88. And in GTMetrix its showing as 93%.
Last edited:
