An explanation of the PageSpeed Insights tool
The Google PageSpeed Insights website is a popular tool that website owners use to measure the 'speed' of a website.
It can be found at https://developers.google.com/speed/pagespeed/
Despite it's name, the tools is not actually a speed test. It doesn't measure how quickly a website takes to download to a computer, instead it gives a score for the website which it determines by looking at different aspects of the website which might have an impact on download speeds.
It's possible for a site with a score of 100/100 to load significantly slower than a site with a score of 1/100. If you're interested in the actual speed of your website then you should use a tool like https://tools.pingdom.com instead.
Often, the PageSpeed Insights tool will give various warnings about your website's speed and tell you to take action.
In this help guide, we'll describe each of the main aspects of the speed test that can display errors, and what you can do about them.
User experience and the importance of results
It should be noted that the Insights tool is only provided to point out potential issues relating to speed only.
Taking action on the test will not necessarily leave the website with a better user-experience than it started with. For example, fixing a 'render blocking resources' error (as described below) can lead to a 'flash' of unstyled content being present before the CSS files load fully.
You should take this into account when deciding whether to take action on the speed test.
Whilst Google looks at page speed when determining rankings of a website in search engine results and also determining a page's 'quality score' (an arbitrary score that Google calculate to decide how well a PPC ad does) for pay per click advertisements you should take note that:
• The most important ranking factors for a website from an SEO perspective are website content and the number of incoming links to the website from other sites
• The most important ranking factors for PPC ads are ad relevance to the keyword searched for and the content and quality of the landing page and previous visitor's experiences
It's very easy to get caught in a trap of looking at speed scores and giving them a lot more attention than they deserve. Certainly, our advice if you are just starting out in the online marketing of your website, is to pay much more attention to the ranking factors mentioned above.
Website owners can spend a considerable amount of money and time/effort in order to remove the 'flags' that Google displays for a website, without any noticeable benefit in either user experience, ppc ad performance, or the website's position in search engine results.
Optimise images
Image optimisation warnings can account for a very large portion of the site's speed score, so this aspect of the test should be attended to first.
If your website is getting warnings to optimise images there are 2 factors to consider:
i) Whether the size of the image being served is around the same size of the image container. For example, you shouldn't serve an image file of 1000px x 1000px in an image container that is 200px x 200px.
ii) Whether the image has been 'compressed'. Compressing an image means reducing the file size without losing quality in the image.
To solve problem 1, you can make edits to the theme files to change the image that is being served in the image container.
When an image is uploaded to our platform, we'll create 4 versions of the file. First, we'll create the image file in it's original, uploaded, size. We'll also create 3 other versions of different sizes as described here.
You can reference these versions in the website twig files in order to try and eliminate the warning described in (i) above.
e.g. on the products.twig file
{{ product.photo_url }}
becomes
{{ product.photo_url('small') }}
You should apply filters to the category and product images displayed on the home page. You should also consider applying the large filter to the home page banner images.
Be aware that serving image files that are smaller than the image container will lead to a degradation in image quality and a different (larger) filter might need to be applied.
To solve problem 2, you should upload your images to a service like https://tinypng.com before uploading the image into your account. Our platform does have a compression system built in but it is not as sophisticated as the tools like tinyPNG.
Eliminate render-blocking JavaScript and CSS in above-the-fold content
Render blocking resources are those files that need to load on a website before the HTML page can be displayed in the user's browser. For example, a reference to a CSS file will be contained in the <head> section of the website. A browser won't load the content beneath until it has loaded this CSS file.
It is possible to change the coding of the website to eliminate this warning but it is a complex process that we have to charge for.
Please contact us for a quote. Please be aware that the cost for this work can be high because there is no set formula to follow and a lot of work is involved in the process.
You should also be aware that working on the site to remove this flag will not result in the best user experience. Google admit this themselves on their support page about the tool, located here.
For example, the coding changes that eliminate this error can lead to a short (less than a second) flash of unstyled content appearing before the CSS/JS loads.
Minify Javascript/CSS
Javascript and CSS files can be 'minified' (i.e. the white spaced removed) to reduce the file size. This is a reasonably simple process (the contents of the file just have to be put into a minification tool and uploaded back to your account).
However, a copy of each of the minified files should be retained (ideally on the theme files with a file name as, for example, plugins_unminified.js) so that if any changes to the theme are required, the unminified file is easily referenced (as changing minified files is difficult).
Again, this is something that we can assist you with but please be aware that there is a cost for this service. Please contact us for a quote.
Leverage browser caching
Every resource (image file, CSS file, JS file) that a computer loads when viewing a website does not need to be loaded each time it views a new page. Instead, a visitor's browser can store the file in it's own memory, known as 'cache'.
Every resource on a website should have a cache expiry time set, i.e. a notice to the browser to tell it when it will need to download a fresh copy of the file. Google recommends a cache expiry time of at least 7 days.
Unfortunately, many third party Javascript files have a shorter cache expiry time than 7 days. For example the Google Analytics file has a cache expiry time of 2 hours. This is because if they want to push an update to the Javascript file they'll want to get the update out there quickly and not after 7 days.
The only way to remove this error is to place a copy of the Javascript file on another server, set the cache expiry time of that file to at least 7 days, and then setup an automatic system to download the file from Google Analytics frequently and update it on the new server automatically.
Unfortunately this is not a simple process and if you require our assistance we will need to charge you for the time involved in performing the work. Please contact us for a quote.
Reduce server response time
Google measures the amount of time it takes our servers to respond when a user visits the website and to tell their browser exactly what resources (files) it needs to download to fully download the whole website.
The more files a website page uses, the longer our servers will take to respond. For example, if a user has 100 featured products on their home page, the server has got to find out from the database what those 100 products are and then tell the browser what the URLs for each of the 100 featured products are.
If your website references a large number of third party resources (like Google Analytics) you may also find that the server response time is increased.
A quick way to reduce the server response time is to reduce the number of image files present on the website, for example by reducing the number of featured products or banner images on your website's home page.
Another method that can reduce the number of image files on your website is to create what is known as a Sprite that contains all of your website's images like card logos and social media icons, in just one file.
If you would like a sprite to be created for your image files please contact us for a quote.