Loading...

Our website uses cookies. By continuing to use our website you are agreeing to our use of cookies.X

How to Improve Web Page Load Speed

As well as why "page load speed matters", on this page you can read about:

  • How to measure page load speed:
    Google provides a measurement tool, so they must think it important;
  • Introduction to how BlueTree optimised page load for their new website design;
  • Step-by-step optimisation process:
    A table showing what we did at each step and what Google thought of it;
  • Notes enhancing information in the table;
  • Postscript: this isn't the full story - there's more to follow.

Page Load Speed Matters

Whilst it’s not the most important factor in calculating page rank, Google started including page load speed into its algorithms as long ago as 2010. See the evidence here.

However, mobile web access is growing, especially for local searches, and it is currently slower than home broadband, so speed matters. It’s said that sites lose 7% of e-commerce conversions – and that’s a lot of viewers - for every one second of delay. And users start to abandon a site and return to the search results if it takes more than 3 seconds to load.

Since we support clients in and around Portishead, local search is important to us. So, we thought it would be a good idea to develop some guidelines to help our clients improve their page load speed. Contribute users can keep these in mind when updating their web sites.

How to Measure Load Speed

Google supplies tools for checking page load speed. There’s an online tool and plug-ins for Google Chrome and Mozilla Firefox. They wouldn’t do this if they didn’t think it important.

Check your home page using Google’s on-line tool here.

Download web browser plug-ins here.

How We Optimised Page Load Speed

After the initial design, our new home page scored 78 out of 100. Now it’s 98. The page looks exactly the same. We know how to make it 100, but we decided not to do so. All explained below.

First, we started with an empty page, with no CSS and no content: just bare HTML. Then we re-built it, one step at a time, testing it at each stage using Google’s Firefox plug-in. Each time, the tool suggests improvements. We applied the recommendations carefully and tested again. Just occasionally we didn’t following the tool’s suggestions. Other times we played around with several different solutions before adopting the best.

Page Speed Optimisation Step-by-Step

We’ve listed what happened in the table below.  Note numbers refer to notes below table.

Step Page re-build actions Speed checker recommends Note Score
1 Empty page don’t specify character set in meta tag 3 99
2 Empty: no character set, no meta tags   1 100
3 Added title tag     100
4 Added copy, text only, from home page enable compression, specify character set   98
5 Specify character set on the server .htaccess character set for all PHP files: UTF-8   98
6 Enable compression, PHP method     100
7 Add keyword and description tags     100
8 Add navigation HTML     100
9 Add logo image leverage browser caching   92
10 Leverage browser caching Set expiry for images, CSS & JS resources.   100
11 Add div, id and class tags in htaccess.     100
12 Add links to stylesheets Enable compression, specify a Vary: Accept-Encoding header   96
13 Enable compression Added mod_deflate by updating PHP on the server. This seems to fix the Vary: Accept-Encoding header notice as well.   100
14 Add Google font Low priority: Specify a cache validator   99
15 Specify a cache validator Can’t be done as Google webfont is an external resource. Removed Google font.   100
16 Add if statement to add PNG fix script for IE6 and earlier versions     100
17 Add Javascript for homepage slider Experimental rules: Eliminate unnecessary reflows   99
18 Eliminate unnecessary reflows We'd need to remove homepage slider, one point to gain the slider deemed ok. May change to tabbed format in a later design.   99
19 Add Google analytics code Low priority:
Leverage browser caching
  98
20 Experimental rules:
Reduce request serialisation
21 Leverage browser caching This would be set by Google so not able to adjust. We like using analytics; overall performance OK so keep.   98
22 Reduce request serialisation We’re using current best practice for adding Google analytics code, so won’t make any changes here.   98
23 Add HTML comment tags Test with basic tags, to see if Adobe Contribute tags will cause a problem   98
24 Apply changes to home page and see if Contribute tags cause any problems Minify HTML   98
25 Minify HTML Chrome’s tool provides optimised code. It removed all Contribute tags, and surplus white space. 2 98
  We just removed all white space (including space in JavaScript files) and Minify HTML notice fixed. Contribute tags remain OK. That's all folks. We decided 98/100 is fine   98

Notes:

  1. If a character type is specified via header (e.g. using htaccess) then Google doesn’t mind if you specify a character type in a metatag.
  2. Be careful when adding content using Contribute (or other HTML editors) that they don’t introduce whitespace or this will flag up again. It’s easy to get extra spaces at the end of a paragraph with Contribute, especially if you copy/paste from another program, so always check for it and delete it.
  3. After updating the page, we tested it using the W3C validator.  It suggested we should specify the character set in a meta tag, as users may save the page and view offline.  So we added it back in.  As we also specify the character set in the headers, this didn’t affect our page load speed score or report.

Postscript

Google changes its rules and recommendations frequently. Last time we checked, our static computer score was 96/100. This is the score when using a computer connected via broadband. We check again from time to time but haven't seen anything we feel we need to address ... so far!

speedometer shows 97 mph

Google measures page load speed in points to 100. This page's load speed is 97/100, according to Firefox loaded with the Firebug/Pagespeed plug-in.
This licenced image came from iStock Photo.

Finding Page Load Speed too Techie?

We explain how a anyone can check their website's load speed in our blog. And do something about it! See our Web Page Load Speed post.

Like Some Help?

Here at BlueTree we love this techie stuff. If you'd like some help speeding up your website, just give us a call! Bristol 0117 339 0095, or contact BlueTree.


 

Share on...

Copyright ©1998-2018 BlueTree Website Design
Site Map | Privacy Policy | T&Cs | Sign-In

BlueTree on... Google+ | Twitter | Facebook

X

Want to be notified about other useful website related stuff?

We won't email often, send you any junk, or share your details with anyone else.