[Guide] How to improve the speed of your wordpress website

Discussion in 'White Hat SEO' started by davids355, Jun 27, 2018.

  1. davids355

    davids355 Moderator Staff Member Moderator Jr. VIP

    Joined:
    Apr 25, 2011
    Messages:
    12,876
    Likes Received:
    10,915
    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%.
     
    • Thanks Thanks x 39
    Last edited: Jun 28, 2018
  2. Array Experts

    Array Experts Jr. VIP Jr. VIP

    Joined:
    Sep 26, 2015
    Messages:
    1,398
    Likes Received:
    544
    Occupation:
    I Don't Know
    Location:
    Space Ship
    Home Page:
    Nice Guide Many People Ask For This
     
  3. KraftyKyle

    KraftyKyle Jr. Executive VIP Jr. VIP

    Joined:
    Aug 13, 2008
    Messages:
    2,370
    Likes Received:
    5,352
    Gender:
    Male
    Location:
    Scraping Instagram
    Home Page:
    Making my sites faster...
    [​IMG]
     
  4. Android Tipster

    Android Tipster Jr. VIP Jr. VIP

    Joined:
    Sep 7, 2015
    Messages:
    609
    Likes Received:
    209
    Home Page:
  5. CertificationsXpert

    CertificationsXpert Jr. VIP Jr. VIP Marketplace seller

    Joined:
    Jun 5, 2018
    Messages:
    174
    Likes Received:
    173
    Gender:
    Male
    Occupation:
    Internet Marketer
    Home Page:
    Thank you :)

    This GUIDE just came in at the right time. I am currently optimizing speed on my few wordpress based websites.

    I will install above mentioned plugins and currently in a process to move all my sites to Digital Ocean + Cloud flare to increase some speed.
     
  6. blogzandstuff

    blogzandstuff Elite Member

    Joined:
    Jan 1, 2015
    Messages:
    8,953
    Likes Received:
    4,801
    Occupation:
    blog creator
    Location:
    UK
    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/
     
    • Thanks Thanks x 1
  7. blackbrut

    blackbrut Jr. VIP Jr. VIP

    Joined:
    Mar 21, 2016
    Messages:
    221
    Likes Received:
    70
    Home Page:
    Thank you!!
     
  8. cosmo89

    cosmo89 Junior Member

    Joined:
    Oct 25, 2014
    Messages:
    188
    Likes Received:
    36
    Good tips! Thanks
     
  9. TheVigilante

    TheVigilante Jr. VIP Jr. VIP

    Joined:
    Aug 31, 2010
    Messages:
    6,723
    Likes Received:
    4,447
    Location:
    Theatre of dreams :)
    Short and sweet David :)
     
  10. A legend

    A legend Jr. VIP Jr. VIP

    Joined:
    Sep 8, 2017
    Messages:
    392
    Likes Received:
    137
    Gender:
    Male
    Occupation:
    GHOST_OF_SEO
    Location:
    Heaven
    Home Page:
    Good information he will always gives helpful tips it will be benefit for newbies!

    Cheers:)
     
  11. seogirl19

    seogirl19 Newbie

    Joined:
    Jan 31, 2016
    Messages:
    30
    Likes Received:
    8
    Gender:
    Female
    Location:
    On my feet
    thanks David
     
  12. vishy

    vishy Regular Member

    Joined:
    Apr 25, 2017
    Messages:
    251
    Likes Received:
    50
    Thanks mate. This guide works!!
     
  13. Aty

    Aty Jr. VIP Jr. VIP

    Joined:
    Jan 27, 2011
    Messages:
    6,460
    Likes Received:
    4,375
    Home Page:
    Nice guide mate, much appreciated.
     
  14. davids355

    davids355 Moderator Staff Member Moderator Jr. VIP

    Joined:
    Apr 25, 2011
    Messages:
    12,876
    Likes Received:
    10,915
    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).
     
  15. terrycody

    terrycody Elite Member

    Joined:
    Sep 29, 2012
    Messages:
    2,071
    Likes Received:
    571
    Occupation:
    marketer
    Location:
    Hell
    W3 total cache right? Not wp, or WP super cache ......ummmm
     
  16. umerjutt00

    umerjutt00 Jr. VIP Jr. VIP

    Joined:
    Oct 28, 2011
    Messages:
    3,987
    Likes Received:
    2,223
    Occupation:
    Ninja
  17. malina1

    malina1 Jr. VIP Jr. VIP

    Joined:
    Mar 29, 2012
    Messages:
    186
    Likes Received:
    37
    Gender:
    Male
    Occupation:
    SEO Expert
    Home Page:
    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: Jun 28, 2018
  18. davids355

    davids355 Moderator Staff Member Moderator Jr. VIP

    Joined:
    Apr 25, 2011
    Messages:
    12,876
    Likes Received:
    10,915
    Ah well spotted - yes, I meant w3 total cache - post updated :)
     
    • Thanks Thanks x 1
  19. mpikxfx

    mpikxfx Registered Member

    Joined:
    Dec 20, 2013
    Messages:
    80
    Likes Received:
    9
    Following. Nice thread
     
  20. therealsearone

    therealsearone Junior Member

    Joined:
    Mar 28, 2018
    Messages:
    133
    Likes Received:
    34
    Gender:
    Male
    Occupation:
    Ex bar manager
    Location:
    Right now i'm in Poland
    Home Page:
    Wicked thread man. Gonna try this out today. Awesome job