Improving Page Speed – A Case Study 2


Site PerformanceI was about to write that speed is everything, but it’s not, traffic is. Or at least it’s a huge part of being able to do well online. However, what is the use of getting lots of people to come to your site if half of them give up on waiting for slow loading pages. According to Neil Patel, as many as 40% of site visitors will give up if they have to wait longer than 3 seconds.

Site Performance Tools

I use a number of different tools to get a reading on a site’s performance and then to get suggestions for improvement.

Markup Validation Service

This W3C Validator  tool is very handy and will help you identify coding errors, many of which can affect your site’s performance.

Validating Code

You simply enter your URL and receive a red bar listing errors found on your site. Of course, if you get a green bar with “SUCCESS” on it, that is fantastic because it will mean that no errors were found.

Page Speed Insights

This is an online tool from Google and it gives you a score along with suggestions on how to improve your site.

Pingdom

Again you simply enter your URL online and Pingdom will analyze your site and come back with a comprehensive list of improvements.

Pingdom URL

GTMetrix

I particularly like GTMetrix. You simply enter a URL and the tool will run its test and come back with a huge list of metrics under the headings of Page Speed and YSlow.

GTMetrix URL

It also keeps track of the history of your performance tests so that you can see how your site has improved over time.

In fact you are presented with a number of tabs that you click on to get more detailed information under each section:

Stie recommendations 

Site Performance Case Study

Here is a case study with the initial GTMetrix reading done on the site, followed by the steps taken to improve its performance, followed by its subsequent readings.

Initial GTMetrix Reading

page-speed-pre-cache

Steps Taken to Improve Site Performance

My initial attempts to improve on this reading led to a lot of experimentation and consequent fluctuation in the readings. In fact, at one stage I improved YSlow to B (86) but Page Speed dropped to a dismal E (54).

So, the following lists how I turned it around more methodically for better results.

Page Speed & YSlow Recommendations from GTMetrix

I started with clicking on each of these tabs in turn:  the Page Speed  tab and the YSlow tab. I then followed the steps outlined below:

  1. Searched for any recommendation that had a grade of D or below and then clicked on each of the “below-grade” recommendations.
  2. GTMetrix lists the files or images that need to be improved and usually includes suggestions.
  3. Installed and activated the W3 Total Cache plugin.
    • Used advice on the GTMdetrix site and other sites to configure the settings for this plugin.
    • Minified CSS
    • Minified HTML
    • Enabled GZip Compression
    • Deferred parsing of JavaScript by setting Minify to Manual in the General Settings.
  4. Optimized theme images listed by GTMetrix
    • Clicked on Optimize Images
    • Clicked on the 1st listed image. Saved it, just in case there was any need to restore this image. (There wasn’t.)
      You can see the advised improvement that can be gained if you use the optimized image.
      For example, at the end of the image link, GTMetrix lists the follwoing:
      …….. could save 715B (86% reduction).
    • Clicked on the link beside the listed image: See optimized version.
      This loads the improved version of the image.
      Saved the optimized image and then uploaded it to the folder on server, as displayed in the file name.
    • Repeated these steps for each image that was within my control. You don’t have the same flexibility with 3rd party images unless it is an image that can be saved to your site’s image folder.

Optimizing images, even the theme images, was really easy as was  activating W3 Total Cache. Finding the best settings for W3 Total Cache however, was a more difficult task and required a lot of research. This is worthy of a dedicated post in the future.

Improving GTMetrix score

5. Keep-Alive persisted as a low grade recommendation,  so eventually, after extensive research, I inserted code to enable this capability. I found considerable debate as to whether this could be done via code in the htaccess file. However, by adding 3 lines of code the Page Speed score jumped dramatically as can be seen in the following screenshot.

Getting an A on YSlow

Removed Coding Errors

Using the W3C tool described above, I analysed the coding errors.

For example, if you scroll down the page once you get your errors score on the Code Validator Service, you will see a listing of the errors with information about how to fix them. Here is one, for example:

code-error

Suggested Improvements to Tackle Next

Page Speed

As can be see in the following screenshot there are still 2 recommendations with low grades, F and D to be precise. Oh, how I hate to see an F anywhere. This site improvement journey actually becomes quite addictive, with the pressing need to find that little extra tweak that can see your site fly and get an A score. Jumping to A for YSlow was thrilling, but I want to see an A for each category.

speed-improvements

  1. CSS Sprites
    Combine Images Using CSS Sprites

    I have worked on creating CSS sprites before and at first they seem a little daunting. But with the right step-by-step guide, they can be much easier to implement. It is simply taking a number of images that are constant to your site, usually theme background images, and combining them into 1 image and then uploading this replacement. The only problem with this site is that, when I ran the sprites test, there weren’t many images that could be combined into sprites so I will have to see what is possible here.

  2. Query Strings
    Remove query strings from static resources

    A query string can be easily spotted by a ? in the URL path.

    An example can be seen here:
    http://forms.aweber.com/form/displays.htm?id=jMzz8Gys7MwsTA=

    Most of the query strings listed, when clicking on the link in GTMetrix are URLs that I don’t have a lot of control over so again, I will have to see what is possible here.

YSlow

YSlow also lists 2 recommendations that still have a low grade:

YSlow Recommendations

  1. HTTP Requests
    Make fewer HTTP requests.

    The recommendation here is to combine 9 external JavaScript scripts into one.

  2. CDN
    Use a Content Delivery Network (CDN).

    This can be done and should make a significant difference to the site’s performance. Again I will list the steps involved in setting up a CDN so that you can follow on.

Site Performance Summary

In the meantime, the site has moved through the following grades for Page Speed and for YSlow respectively:

  • C and C (76 and 77)
  • E and B (58 and 86)
  • C and B (70 and 86)
  • B and A (89 and 91)

 The current score, via Pingdom is as follows:

pingdom

At this point, according to Pingdom, 38% of sites are faster than the case study site so there is still considerable work to be done but there has been a significant improvement.

 


Leave a comment

Your email address will not be published. Required fields are marked *

CommentLuv badge

2 thoughts on “Improving Page Speed – A Case Study