#1
  1. Administrator
    SEO Chat Hero (2000 - 2499 posts)

    Join Date
    Jan 2015
    Posts
    2,124
    Rep Power
    1920

    A Meaty Guide to Page Speed Optimization for WordPress


    Here's a hearty little guide to optimize the page speed of your WordPress site!

    It covers why page speed is important and dissects a case study of a digital search group in the UK. Give it a read to discover some handy tools and tips!
  2. #2
  3. Super Moderator
    SEO Chat Good Citizen (1000 - 1499 posts)

    Join Date
    May 2015
    Location
    United Kingdom
    Posts
    1,307
    Rep Power
    2010
    Whilst it is a "meaty guide" there is actually a lot that is being missed out from it.


    Had a quick look at their site. Straight away found something that could be done to improve it.


    Why not combine these into one individual image. Looking at their page load time in gtmetrix, their server is taking ~100ms to communicate with any file on their website. So potentially that's 300ms of just loading these three images.


    Now, they're missing a few major tricks.


    1. Defer parsing of javascript.

    Don't take my word for the impact it has on a site, here's a test i've done on my personal site.

    With (https://gtmetrix.com/reports/www.tho....me/OZcoGijY):


    Without (https://gtmetrix.com/reports/www.tho....me/7wD7jrsF):


    That's a decrease of .2 seconds on my homepage (for clarity it changes every time I do, but there is a benefit, even from just a user point of view as the css is loading before any js). Just for doing something as simple as changing the ordering of javascript.


    Combining js/css:

    I will keep deferring of javascript off, I have disabled combining of js/css and this is the difference. Specifically, look at the number of requests on the webpage (I've got a very small website so there shouldn't be a massive amount of requests). Now, that's an increase of 6 files with some very small css files.

    With larger sites files this has a much bigger impact. So using their homepage as an example. They have 17 js files and 14 css files. Chrome can load 8 files at one time. They have load times of 300-600ms for their documents (some more) that can be seen here: https://gtmetrix.com/reports/www.dig...co.uk/2FjUxGsQ under "Waterfall". So let's have a look at worst case scenario savings. They have 31 js/css files. Which combining would make into 2 files. That leaves 29 files that would've needed to have been loaded with various connections. So 29/8 (being connections at once) is 3.625. So lets say that if we take a very generous load time of 300ms per file. We would then have a saving, just from this option, of 1.0875 seconds.


    The point to remember, is that whilst it's great to look good on paper, there's various things (lazy loading images for example) that sometimes can make a website look unprofessional and slow. For example, look at: digitalsearchgroup.co.uk/seo-services-company/ the rest of the page loads, then the image loads a lot later. I would personally remove the lazy load and bear the extra .1-.3 seconds for the page to load fully.


    Just a note, this hasn't been a proper in-depth look at their site, just a small post with some very rough calculations. There is more they can do than the above (digitalsearchgroup.co.uk/seo-services-company/ removing the extra space in the padding on the images and doing that with css)

    If someone wants to get me a copy of this theme, I will more than happily put these into practice to show the benefits.

    Comments on this post

    • Ann Smarty agrees : Great additions!
    Always happy to help in private message. | Learn about my latest project Can You Get Automated Pages To Rank In Google?
    Useful Links: Useful SEO Tools | GTmetrix | FileOptimizer | Cloudflare
  4. #3
  5. No Profile Picture
    Newbie

    Join Date
    Sep 2015
    Posts
    1
    Rep Power
    0
    Hi Thomas,


    Thank you for your thorough insight.


    The images below used to have links which explains why they are separated. We had to remove them temporarily but we are planning to put them back soon so that they are linked back to those specific sites.


    As for the JS and CSS, we very much appreciate your advice on this. Right now, we are basing our practice on the easiest way to reduce load time and not so in technical implementation to help the site speed in terms of CSS and JS.


    As for the lazy load, we allow the use of it because our site readers typically read the pages slowly which means there is no need to scroll fast. One of the important factors we are aiming for is the speed that will help Google bot easily crawl the site.Google bot to easily crawl the site.


    Thank you for taking the time to read this article and visit our website. We are always open to feedback.
  6. #4
  7. Super Moderator
    SEO Chat Good Citizen (1000 - 1499 posts)

    Join Date
    May 2015
    Location
    United Kingdom
    Posts
    1,307
    Rep Power
    2010
    Originally Posted by joedsg
    Hi Thomas,

    Thank you for your thorough insight.

    The images below used to have links which explains why they are separated. We had to remove them temporarily but we are planning to put them back soon so that they are linked back to those specific sites.
    Ah great, was just analysing it as what was on the page at that moment in time.

    Originally Posted by joedsg
    As for the JS and CSS, we very much appreciate your advice on this. Right now, we are basing our practice on the easiest way to reduce load time and not so in technical implementation to help the site speed in terms of CSS and JS.
    Well, as for it being technical, it's pretty simple to be honest within wordpress. Using a plugin called JCH Optimize. (https://www.jch-optimize.net/documentation.html) This does have the following features:

    • Combine javascript/css files into one
    • Combine background images into a sprite
    • Minify aggregated files
    • Gzip combined javascript or css file
    • Exclude certain files from the aggregating process if these cause problems
    • Exclude all files from selelcted components if plugin doesn't work well with them
    • Can produce an aesthetic 'flat link' url for aggregated file with the use of htaccess to promote proxy caching

    That is all available in the pro version of the plugin. Which I personally believe it's really easy to use (literally press a button and it's done)

    There is a pro version (for a full $10) that has the following features:

    • Includes PHP files and files from external servers using an available http adapter
    • Includes CSS styles and javascript from inline declaration blocks
    • Resolves and combines @imports from CSS files
    • Loads javascript asynchronously
    • Optimize CSS Delivery to prevent CSS render-blocking
    • CDN/ Cookie-free domain support
    • Optimize Images
    • Premium ticket support available with subscription.


    So for free I believe you can already create a decent base to start on (further optimised from an onpage content point of view excluding images) than within your guide. Then for $10 with no technical knowledge can also defer js easily and various other options.


    Originally Posted by joedsg
    As for the lazy load, we allow the use of it because our site readers typically read the pages slowly which means there is no need to scroll fast. One of the important factors we are aiming for is the speed that will help Google bot easily crawl the site.Google bot to easily crawl the site.
    That's completely justified, I don't have access to your analytics so don't know how your user is interacting with the page.


    Just some extra thoughts for potentially adding/expanding the site?
    Have you thought about including a section on using a content delivery network? (and have you thought about using one yourself?)
    Cloudflare does offer a free plan, looking at your sites load times from around the world:
    UK 3.3s (https://gtmetrix.com/reports/www.dig...co.uk/I9zaSfIG)
    Canada 7.5s (https://gtmetrix.com/reports/www.dig...co.uk/qk62lDtE)
    USA 2.4s (https://gtmetrix.com/reports/www.dig...co.uk/nmyygCC6)
    India 6.9s (https://gtmetrix.com/reports/www.dig...co.uk/2IBEbezk)

    Just out of curiosity, it looks like you've gone with a US based host (looking at the above), any reason for this? As it looks like you're focusing on London surely you'd want to promote the best user experience for the UK?

    Have you thought upon expanding the minifying section? It explains why you need to do it, however I can't see a way of actually executing this?


    Apologies if any of this post or the previous one sounds aggressive, I'm just trying to provide some constructive criticism of your site/practices.



    Of course, forgot to add the most important part. Great guide, really detailed I'm just posting all of this to potentially help you expand upon the article. I love that more and more people are focusing on site speed, so giving the best possible experience will push everyone to be better.
    Last edited by ThomasHarvey; Sep 25th, 2015 at 03:45 AM.
  8. #5
  9. No Profile Picture
    Contributing User

    Join Date
    Sep 2016
    Location
    Raleigh Durham, North Carolina
    Posts
    9
    Rep Power
    0
    While Google claims that page speeds are important, and they got a great tool to test out your speeds: https://developers.google.com/speed/pagespeed/insights/ I'm not convinced that page speeds matter all that much for ranking. As long as your page speeds aren't tragically slow, you should be ok.

    It's not often I disregard what Google recommends, but through extensive testing, I've not found page speeds to affect ranking as much as Google says it does.
  10. #6
  11. No Profile Picture
    Contributing User
    SEO Chat Explorer (0 - 99 posts)

    Join Date
    Sep 2016
    Posts
    32
    Rep Power
    1
    OK, so what would be the speed that we should consider good enough? Is there some range? thanks
  12. #7
  13. Administrator
    SEO Chat Hero (2000 - 2499 posts)

    Join Date
    Jan 2015
    Posts
    2,124
    Rep Power
    1920
    When using Google's Page Speed Insights tool, they say that "...a score of 85 or above indicates that the page is performing well."

    https://developers.google.com/speed/docs/insights/about

    Higher is always better, of course.

Similar Threads

  1. How to gain page speed of wordpress website?
    By quicksamedayloa in forum New User SEO Questions and Answers
    Replies: 1
    Last Post: Feb 19th, 2015, 09:28 AM
  2. Large Images Vs Page Speed - Wordpress
    By owenprescott in forum Search Engine Optimization
    Replies: 7
    Last Post: Jan 8th, 2014, 06:54 AM
  3. Landing Page Optimization - A Starter Guide
    By jsteele823 in forum Google Optimization
    Replies: 2
    Last Post: Feb 18th, 2011, 03:45 AM
  4. Landing Page Optimization Guide
    By Aignam in forum Search Engine Optimization
    Replies: 0
    Last Post: Aug 17th, 2009, 02:17 PM

IMN logo majestic logo threadwatch logo seochat tools logo