davids355

Super Moderator
Staff member
Moderator
Jr. VIP
Joined
Apr 25, 2011
Messages
17,542
Reaction score
21,684
Website
9amcrypto.com
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:

  • 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
Testing your site speed

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:

KraftyKyle

Jr. VIP
Jr. VIP
Joined
Aug 13, 2008
Messages
3,709
Reaction score
6,919
Making my sites faster...
success_baby.jpg
 

blogzandstuff

Elite Member
Joined
Jan 1, 2015
Messages
10,762
Reaction score
6,872
I use EWWW image optimize, one of the better plugins.
This is a handy tool if you need to optimize a JPEG.
" JPEG-Optimizer is a free online tool for resizing and compressing your digital photos and images for displaying on the web in forums or blogs, or for sending by email. Completely Free. No software to download. "
http://jpeg-optimizer.com/
 

A legend

Power Member
Joined
Sep 8, 2017
Messages
535
Reaction score
180
Website
bit.ly
Good information he will always gives helpful tips it will be benefit for newbies!

Cheers:)
 

Aty

Elite Member
Joined
Jan 27, 2011
Messages
7,633
Reaction score
5,282
Nice guide mate, much appreciated.
 

davids355

Super Moderator
Staff member
Moderator
Jr. VIP
Joined
Apr 25, 2011
Messages
17,542
Reaction score
21,684
Website
9amcrypto.com
Thanks all for the positive comments. It’s a short guide but all these things are actionable, it doesn’t take long to implement either, and you can make big improvements.

I followed these steps on one of my sites just prior to writing this article and it took me less than an hour (not including the wait whilst EWWW optimised 3000+ images lol).
 

terrycody

Jr. VIP
Jr. VIP
Joined
Sep 29, 2012
Messages
4,042
Reaction score
1,673
W3 total cache right? Not wp, or WP super cache ......ummmm
 

umerjutt00

Elite Member
Joined
Oct 28, 2011
Messages
4,356
Reaction score
2,472
Thanks for the guide. There are few things that I didn't knew before.
 

malina1

Regular Member
Joined
Mar 29, 2012
Messages
244
Reaction score
54
Website
goo.gl
Good guide for start. But later plugins make not so much.
The best method is to update data on hosting.
Need to use Nginx+php-fpm. Then when WP will be connected to MySql setup config file exactly on settings of hardware of server and of course make gzip at nginx.
Here example - https://stackoverflow.com/questions...figuration-for-1-gb-ram-with-100-users-online

I have i7-920;2x hdd 2.0 tb, 6x ram 8192 ddr3 at hetzner and IspManager Lite 5 for 40 wordpress sites with around 10 million pages. But at one time I order special setup from a sysadmin and he makes it better. Google PageSpeed Insights show for PC 86/100.
 
Last edited by a moderator:
Top