Google Page Speed Insights

Google PageSpeed for Noobs and the clueless Part 2

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:

http://www.frazoo.net/speed2/

Now I’ll run that web address through Google Insights:

https://developers.google.com/speed/pagespeed/insights/

 

And our initial results are what I expected to see:

36/100 Mobile

insights-mobile-before

41/100 Desktop

insights-desktop-before

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:

Should Fix:

Optimize images:

This means the images in the template should be run through an image optimizer such as www.tinypng.com or you can use the built in image optimizer in Dreamweaver.

Enable compression:

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.

Eliminate render-blocking JavaScript and CSS in above-the-fold content:

This means move any JavaScript or CSS that is loaded at the top of the page, to the bottom of the page so the content of the page can load first, basically. This sound easy to do, and can be, but it also means that the content of your website is loaded before any styles can be applied, and anything requiring JavaScript to display or work won’t be loaded until after the content, which could result in the content of your page loading erratically.

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!

insights-desktop-after-image-optimization

You can see the results of optimizing images only at

http://www.frazoo.net/speed3/

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.