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!