5 Tips to Pass the Google Website Speed Test

Intro. Does website speed matter? 

Have you ever tested your website speed? If you’re one of those marketers obsessing about every possible SEO aspect, you’ve probably heard of Google Page Insights. 

A 2013 article written by Moz states that

“There is no correlation between “page load time” (either document complete or fully rendered) and ranking on Google’s search results page. ”

However, the same article suggests that the back-end performance of a website WILL impact the search engine ranking, therefore aspects such as how fast the web servers are, their network connections, the use of CDNs, and the back-end application stand a chance of influencing the way Google perceives your website.

“At Google, we’re striving to make the whole web fast. As part of that effort, we’re launching a new web-based tool in Google Labs, Page Speed Online, which analyses the performance of web pages and gives specific suggestions for making them faster” (Google article published in 2001 on their official blog).

What does speed entail and how can you pass the Google website speed test?

If you run a test in Google Page Speed Insights, you will notice that the problems

Google suggests for fixing mostly relate to:

• Eliminating render-blocking JavaScript and CSS in above-the-fold content and leveraging browser caching respectively;
• Optimising images;
• Compressing scripts;
• Minifying JavaScript, CSS and HTML.

Tip no 1. Eliminating render-blocking JavaScript and CSS

Our website is hosted on WordPress. This means that for it to load a certain area of the page, WordPress will prepare to load the rest of the page as well, even before starting to scroll down.

Therefore, in order to eliminate the render-blocking, we discovered we could load the focused part of the page and only when scrolling down the rest of it.

Technically, this is done by working on your code. But, since we are on a WordPress website, we used a plugin.

Speed Booster Pack

The Speed Booster Pack can prove useful during the process. Tips on installing it and additional resources here.

How to use it: simply select “Move scripts to the footer” and “defer parsing of javascript files”. This should solve the problem.

Certain external resources can not be optimised (ex: fonts.google.com, cdn.optimizely.com, separate scripts sent by FB or Twitter, LinkedIn or Google fonts), but most of them will be.

Tip no 2 . Leveraging browser caching

What exactly is browser caching?

Every time a webpage is loaded, in order for it to be displayed properly, all the web files have to be downloaded at once (HTML, CSS, javascript and images). Some pages can be simple and others need to charge a bulk of photos, e-books and such – case in which a page can end up being several megabytes large.

This can constitute a problem on a slower internet connection or on a mobile connection. Each file (or resource) will make a separate request to the server. The more requests the server gets simultaneously, the slower the speed of your webpage.

How does it work?

Browser caching “remembers” certain pages or parts of pages, so that a company logo or a background image (that won’t change on a daily basis) can be displayed more easily. By browser caching these images, we basically tell the server to only download them once every week. This is why sometimes, on some of the pages you visit, you will see some of the components displayed nicely and others still charging.

Looking into your website’s browser caching specificities will help reduce load on your server, which will ultimately translate on a better website experience for your visitors.

What we did to fix leverage browser caching at Beaglecat

To enable browser caching, you need to edit all of your HTTP headers. For example, setting expiry dates on certain types of files can help reduce load speed. The files that are updated more frequently would need shorter expiry dates.  Below, an example of website setting an expiry date to approximately 3 weeks (604800 seconds) for some of its images .

Depending on each case, the code needs to be placed in a .htaccess file, where the image folder is located.

<IfModule mod_headers.c>

<FilesMatch “.(jpg|jpeg|png|gif|swf)$”>

Header set Cache-Control “max-age=604800, public“

</FilesMatch>

</IfModule>

This can be done easily by installing an extension or a plugin to your CMS. At Beaglecat, we use WordPress and installed W3 Total Cache, which we will showcase in more detail during the following section of this article. 

When enabling browser caching, you need to be careful not to set the caching at a too long interval, otherwise users may not get the newest version of your website.

Tip no 3 . Image optimisation

Basically, any tool that can resize the images you use throughout the website should do. Blog articles, white paper covers, team member photos – all of them can be reduced to an image that Google deems appropriate. Photoshop will do the trick.

In case you don’t have Photoshop and you don’t work with a designer either, you can use some alternative solutions. Two additional free tools we looked into are TinyPng and Optimizilla. The former reduces the file size of PNG and JPG files, whereas the latter functions as an online optimiser that can shrink images to the minimum possible size, while maintaining an adequate quality level. Both of them use lossy compression algorithms.

Tip no 4. Enabling compression

W3 Total Cache

Basically, the main scripts your website runs on need to be compressed as much as possible, for the page to be displayed rapidly.

For this we used W3 Total Cache, the same plugin that helps with leveraging browser caching.

Tip no 5 .Minifying Java Script, CSS and HTML

What is minifying?

Code minification is the removal of unnecessary characters from source code, with the goal of making source code “smaller” and improve performance (Techtarget).

Speed Booster Pack

Since Google suggests we should work on removing unnecessary code whenever possible, we looked at using the Speed Booster Plugin again.  None of its settings are turned on by default, so we only activated those that would increase our speed in Google as quickly as possible.

The screenshots below will showcase which of the features we activated and how.

Activating the plugin is doable via the General Options section.

Preventing some of the scripts from being sent to footer will help boost your speed. Many of the scripts we use (and any company would) for A/B testing or analysing website activity need to be excluded from being sent to footer, because otherwise they would not be able to fulfil their purpose.

To that end, you would need to find the handle for the script you wish to exclude from being moved to the website’s footer. Here is how you can do this.

a. To identify the handle for a particular script, you should do a simple search for wp_enqueue_script throughout your plugin files.

For example, in the following snippet, the handle is contact-form-7:

wp_enqueue_script( ‘contact-form-7’,…

b. Enter this script handle in the first text field on the left ( Script Handle ).

c. Once you identify the script handle, take a look at the page source of your site and copy the HTML code of the script you want to execute – all of these instructions are thoroughly described in the plugin.

 Take for instance, the following line:

<script src=”http://3.70.155.9/wp-content/plugins/contact-form-7/includes/js/scripts.js” type=“text/javascript”>

d. Now enter this code in the text field on the right.

For this step you can just add the name of the js file that you want excluded from defer parsing. Example: jquery.min.js

e. You will now be required to modify the image compression level. The default image compression setting in WordPress is 90%. If you want a lower level of compression you need to install and run the Regenerate Thumbnails plugin. We recommend you choose a level between 50 and 75.

Clicking on Still need more speed will reveal the CSS settings. If you check all options now, the CSS would load asynchronously, would be minified, inserted into the footer and only inserted for view on desktop devices.

Why speed matters with Google. Conclusions

It’s common knowledge that people don’t like standing in lines. Regardless of how much they like or want a product, the thought of having to wait for it is a major factor that deters them from taking another step further.

Well, waiting for a website to load is actually very similar to waiting in line for an ice cream. If it takes too long, you’ll just go round the corner and find another ice cream shop. The same is true when surfing online. If a site takes too long to load, visitors are outta there in no time.

[cta_btn_google_speed]