Building a Website with 100 Google Pagespeed Score

In recent months, page speed is something that I have become rather interested in. Not only because of the effect it has on your website's SEO ranking on Google, but also because it has a direct effect on how long users will spend on your website. A recent study found that a website will lose more than 50% of its users after a waiting time of 4 seconds. Now if that doesn't make you concerned about your page loading times, I don't know what will!

Over the past week or so, a good friend of mine and fellow colleague at work Ben Joy and I have been working on a side project of our own called 'RealTimeGames`. This side project was created at HackSoton, you can view the project by clicking on this link. The concept of the website is rather simple, you navigate to the website in your browser, once the website is loaded, a counter is begun that increases in a different increment per section. Each increment is based on a statistic value, e.g. how many games have been sold per second. The website aims to show how many sales/revenue/etc. has been generated since you last loaded up the website.

The alpha stage of the website included a small collection of .png icon images. Even though these images were of small file size, I knew that we could reduce the file size even further by using vector graphics to replace the existing raster graphics. I and Ben sourced our icons from https://www.iconfinder.com/ and https://simpleicons.org/.

Now that we had replaced all of the existing raster graphic icons with SVG files, we had a reduction where 5 SVGs totalled the same size as 1 PNG icon. We went a step further and compressed our SVG icons using SVGOMG. SVGOMG is a powerful SVG compressor tool which minified the file size of our SVGs and resulted in our final compression ratio to be 8 SVGs totalling the same size as 1 PNG icon.

Since version 4.4 of WordPress, Emoji support has been enabled by default. This requires your WordPress build to load a 'wp-emoji script'and CSS file on your website, not only is it pointless to include on a website with no need for emoji support, it also slows down your website's performance speed and damages your SEO ranking.

Now that the excess JavaScript and CSS has been removed from the overall build of the website, it was time to minify the existing CSS and JavaScript. Minifying the code will remove any whitespace and change properties/names used to reduce the number of characters used in the code. Concatenating the CSS and JavaScript allows for fewer requests to be made on the web page and reduces the overall file size of the requests made on the page. This was done using NPM packages via Grunt during development.

It is important that when loading a web page that the content shown above the fold is rendered with priority as this is what the user of the website will see before scrolling. To eliminate loading non-priority resources above the fold we used a powerful plugin. W3 Total Cache was installed and modified to force any non-priority resources to be loaded after the web page "above the fold" content had loaded required for the user of the website.

Enabling browser caching was the final step in finishing the front end optimisation for the page speed score. Browser caching will store files that have already been accessed by the user so that when the website accessed at a later date, the files will not have to be transferred again to the device.

To test the page speed of our website, we ran it through Google's page speed tester, the results were as follows. As well as running the website through the speed tester, to generate a page speed score. We also ran it through some developer tools that available in Google Chrome. Through the tools, we emulated the loading time for someone on an average 3G mobile connection, and those who were on an average Wi-Fi connection to analyse the predicted load times, as well as to have an insight into what files were loading quickest and slowest.

The practices carried out on the Realtime Games website should be followed for the majority of websites, although settings may vary depending on the tools and software being used to develop the website. Not all websites can use SVGs to replace images, especially those that include photographs. It is always recommended to look into what minification tools are available you as a developer, being able to harness these as part of your workflow will result in less storage space needed, less bandwidth usage and a better experience for both yourself and your website's users.