Engineering

How we reached 100 out of 100 on Google PageSpeed Insights

website speed

Recently, our team has raised a goal regarding our website’s user experience. We have aimed to reach a score of 100 out of 100 using Google PageSpeed Insights tool and we have done it. Before we get into details as to how exactly we reached 100/100 on Google PageSpeed, let’s talk about a few of other important points.

While it is very important to have a speedy website, a full user experience of the website is more important. Therefore, you shouldn’t obsess over 100/100 as a lower score might still get you the kind of performance you want. Optimizing your website’s speed is about finding the right balance between high performance and the user experience you want your visitors to have.

What is Google PageSpeed Insights tool?

Google PageSpeed Insights is a tool created to enhance your website’s performance. It can easily help you improve speed and mobile-friendliness of your website by offering you recommendations on what exactly needs to be changed. It measures the performance of both: mobile and desktop interfaces of the website. When performing the check, the URL of a website is fetched twice, once with a mobile user-agent and once with a desktop user-agent. This way suggesting improvements for both user interfaces. Applying the suggestions made by Google will improve the overall performance of your website, however, it will still be dependable on your network connection.

Time to above-the-fold load and time to full page load is what Google PageSpeed Insights tool measures before suggesting any changes to be implemented. Time to above-the-fold load is how fast the content above the page fold is loaded by the browser and time to full page load is how long it takes for the browser to load the content of the full page.

Is it worth optimizing your website with PageSpeed Insights?

According to the research Google has conducted, any delay that is longer than a second interrupts natural flow of thoughts which then causes poor user experience. Nowadays, slow loading website can easily cause you a big chunk of your revenue. While there is a countless number of speed optimization methods, we used PageSpeed Insights tool to optimize our website.

Not only is it good for user retention but also it’s good for SEO. It’s no secret that search engines love speedy websites, therefore rank them higher than those with a low loading speed.

It’s also very easy to use. Once website URL is analyzed, Google then presents you with steps to follow for your website’s speed to be optimized. Some of these steps are more technically challenging, but most of them are easy to perform using almost any content management system (CMS) out there.

In short, optimizing your website’s speed with PageSpeed Insights tool can turn out to be greatly beneficial and easy to achieve, however, before applying any changes suggested, make sure that your overall user experience will not suffer.

Google PageSpeed Insights

 

A step-by-step guide to optimizing your site’s speed

Here’s a step-by-step guide as to what our team has done to achieve a score of 100 out of 100 with Google PageSpeed Insights tool. Our starting point was 75 out of 100 for mobile interface and 87 out of 100 for desktop interface. Keep in mind that this is personalized. Every website is built differently and might need different alterations.

The first thing we did was:

  • Minify HTML, CSS and JS;

Minifying any of the computer programming languages means getting rid of any unnecessary code, blank spaces, and characters without changing the functionality of the code. This happens because it is easier to understand and program in readable, self-explanatory code, which might include long variable names, formatting (e.g. empty spaces, extra lines), etc. We used various Gulp plugins to achieve this. To clean CSS a speedy and accurate clean-css optimizer was used and to clean JavaScript we used UglifyJS3. This process gives a significant boost and yet, is easy to implement.

  • Optimize images;

There are a few ways to optimize images used on your website. Various online services might help you to quickly and effortlessly compress images. To achieve an optimum size of a picture, you might also need to reduce dimensions of the images. We once again used a Gulp toolkit imagmin to automate this process.

  • Reduce server response time;

This is usually triggered by Google PageSpeed Insights when your server response time is higher than 200 ms. While there is a number of reasons why your server response time might be slow, web hosting provider is usually the most common of them all. Before buying into any web hosting provider, it is important to check what server response time is promised. Since our website is hosted with hostinger.com, the only thing for us left to be done here was to perform server-side caching.

  • Eliminate render-blocking CSS in above-the-fold content;

Though this step is very useful it is rather difficult to perform, especially on a website with multiple pages. It requires you to load critical CSS inline, whereas the full CSS is loaded asynchronously with JavaScript. This is only performed for above-the-fold part of the page. To generate critical CSS we used critical Gulp plugin and for loading full CSS we used loadCSS.

  • Leverage browser caching;

This is quite an easy step to follow. Through your .htaccess file, you can instruct your server on how to cache the files by adding “Cache-Control” or “ETag” headers. This is though, only for the files you host yourself. It is recommended to cache them for at least a week. As for the files that are hosted by the third parties (e.g. Google Analytics, social plugins), there is no easy solution. You simply can’t control them. Here, we have started by dropping unnecessary scripts. Social share button libraries were removed and redesigned by our team and instead of JavaScript for Facebook like/share buttons, we used iframe tags.

If you have completed most of the steps above, your website’s speed should be good enough to provide a good user experience. As mentioned above, don’t obsess over a score of 100, as trying to reach it might hurt your overall website design and interface. As important as it is to have a speedy website it is much more important to keep your clients interested with your unique content. Having said that though, Hostinger is proud to have reached 100/100 with Google PageSpeed Insights tool without losing advantages of user experience.

Google PageSpeed Insights