Improve your Google Page Speed Score

28 January 2016

What is Google Page Insights?

Google Page Insights is a useful set of tools that analyses a web page of your choice and suggests improvements to help it load faster. It won’t give you information about why your server-side code is slow, but will provide insightful information about the size of your file, minification of javascript and CSS, the number of requests, and so on.

The SEO wizards say that page speed score one of the indicators used by Google’s “magic algorithm” to determine rankings. It’s obviously also important for our users, especially given the large amount of mobile visitors on carwow.co.uk

Main problem: render-blocking CSS and Javascript

Google Page Insights ranks the problems it finds, so I spent the past couple of days trying to solve our ‘Critical’ problem first.

The first one was a simple case of unoptimised images that we’ve mistakenly added to our new main navigation menu. Google Page Insights will help you with that by providing a zip file with an optimised version of all the resources required by your page.

The second one was the dreaded “render-block CSS and JavaScript”

Asynchronous JavaScript in Rails 4

In order to render a page, browsers need to build the DOM Tree by parsing your page HTML. If the browser encounters any script (inline or external) it will run it there and then (and download it first if external). This delays the time the first render of the page can occur.

If you want to know more, read what Google’s article on removing render-blocking JavaScript

In Rails, changing your JavaScript to asynchronous is normally easy. The default approach is to have a unique application.js file that the asset pipeline compiles for you from all your required files. The only thing that got in my way was random chunks of JavaScript that lived in page templates and partial.

We used those scripts to set up specific functionalities that lived on a particular page. For example in our haml files you might find:

:javascript 
  Carwow.intialiseCarChooser();

I picked an easy way to remove these type of snippets from our pages — I created the following JavaScript function:

function initializePage(id, initializationFunction) { if($('#'+id).length) { initializationFunction(); } }

And for the example above I’ve added a div in the page with id: #car-chooser-page

And in application.js (or any required file):

initializePage('car-chooser-page', function() { Carwow.initializeCarChooser(); });

It’s not the most elegant solution, but it allowed me to add async: true to our javascript_include_tag function.

Above-the-fold CSS and asynchronous CSS

Google wants you to require your main bulky CSS file asynchronously and to in-line a basic set of CSS styles that make your page look decent until the main CSS has loaded.

Because our theme is split in in separate sass files it has been relatively easy to include some core components, such as the hero-images on landing pages and the header in an abovethefold.scss file.

I then included that file using a normal link tag and included the main application.scss using Filament Groups’s loadCSS function.

After that I manually fixed a few styles so that the jump between partially styled page was minimal.

I made sure that the gzipped version of the abovethefold stylesheet was under 10kb.

What next?

After deploying these changes I’ve seen a large increase in Page Insight Score, although somehow on some of the pages on the site Google Page Insights still complains about application.css blocking rendering.

I’ll update this post as soon as we find a solution to that problem.

Originally published at underthehood.carwow.co.uk on January 28, 2016.

Interested in making an Impact? Join the carwow-team!
Feeling social? Connect with us on Twitter and LinkedIn :-)