What I’m going to do, in Part 2 of this series, is take a website template that was created ‘before’ Google PageSpeed Insights was launched, or at least it was created before we as designers and developers were aware of it and run a before and after.
Now we dive into the guts of our article. If you haven’t read Part 1, you may want to check that our first.
I’ll upload an un-edited website and run the Insights speed test, we’ll examine the results then go through updating our website step by step and see how much we can improve the Insights rankings by.
I’ll start by uploading the website to a test server located at:
Now I’ll run that web address through Google Insights:
And our initial results are what I expected to see:
Now let’s take a look at the suggestions, starting with Desktop. I’ll leave the ‘before‘ speed2 test site on the server so you can run your own test just for fun, and see for yourself.
Google Insights suggests the following:
This ones a bit more difficult as this is something your web host will need to do, compression is a server side function, you will need to contact your web host and ask them to ‘Enable gzip compression’ for your web hosting account. Most if not all web hosts will have this turned off by default.
Leverage browser caching:
Also, a web host thing. This is not a browser cache your visitors would clear, this is a server side setting, so again, contact your web host and ask them to enable browser caching for your hosted account or accounts.
Let’s take a look at the initial testing of our site with a video run through.
Video 1: The Setup
Video 2: Optimizing Images
An improvement of 13 points!
You can see the results of optimizing images only at
Video 3: Render Blocking Scripts
In Part 3 we’ll run through from start to finish covering each step. I’ll also provide some scripts you can use in your own site, to help the loading of CSS and JS files.