Google PageSpeed Insights : How to Score 100% of the Points

In May of this year, the Google Chrome team announced Core Web Vitals, which are a set of metrics that measure user experience. Some of the critical metrics include loading speed, interactivity, and visual stability. Consider this as the 2020 SEO trend that influences your Google web score. Read more in our article Core Web Vitals: Google’s New Ranking Factor.

Indeed, slow sites are annoying. Therefore, Google has never concealed the fact that page loading speed is one of the ranking factors. It is not about whether your site loads faster than a competitor’s resource; it is about total loading speed. In particular, pages should display content in less than three seconds, and the TTFB value, that is the time until the first byte of received information, should not exceed 1.3 seconds. Otherwise, the user will get tired of waiting, and the site will drop significantly in the search results.

Back in 2011, Google PageSpeed Insights appeared among the must-have tools for SEO masters. Previously, it provided recommendations on how to optimize a site, and since 2018, it has begun to measure the speed of its loading. Unfortunately, sometimes its recommendations lead to the detriment of the functionality of a resource. We are going to tell you how to use Google PageSpeed Insights, and if it is so good.

How to Use Google PageSpeed Insights

Google PageSpeed Insights is simple to use. You just need to type or paste the site URL in the search bar and click the Analyze button.

Developers Google

Moreover, you can analyze both the desktop and mobile versions of the site. As you can see, the mobile version of the coursera.org resource, which we took as an example, has unsatisfactory results, at least, according to the service.

Developers Google

What is a good page speed score in PageSpeed Insights? If you are interested in the answer, here is what the service developers state: 

• A score of 90 or more points: This is a good result;
• A score from 50 to 90 points: This is an average speed, it is best to optimize the site;
• A score of up to 50 points: The site needs to be urgently improved.

After all the critical indicators, the tool shows recommendations for site optimization.

Developers Google

By the way, pay attention to the following:

Developers Google

Key metrics that Google PageSpeed Insights compute: 

• First Contentful Paint: This is the time it takes to load the text or picture on the page, at least some content that will help a user understand what the site is about.
• Largest Contentful Paint: The time for displaying the most massive site element on the visible part of the screen. This metric helps convince the user that the page is useful.
• First input delay: It is one of the most critical performance indicators. It shows the time from the moment the user started interacting with the page (for example, clicking a button) until the moment the web browser responded to that action.
• Cumulative Layout Shift: This is a metric that measures content instability. Meaning, how much the elements of the site shift during the loading process, regardless of the user’s actions.
• Time to Interactive: The time of page loading until the moment that users can interact with it. 
• Speed Index: The loading speed index of the web page.
• Total Blocking Time: The input blocking time in milliseconds when the user cannot do anything on the site because it is loading. 

Google PageSpeed Insights API helps webmasters understand three essential actions to take:  

1. To measure the speed of a web page loading on different devices.
2. To get recommendations on how to improve the page loading speed and its search engine optimization.
3. Improve pages and progressive web apps. 

We are going to omit the last point and consider the first two in detail. In particular, we are going to tell you how to improve page speed by up to 100%.

Step-by-step Guide on How to Get 100/100 in Google PageSpeed Insights

It is possible to increase speed by 100% in Google PageSpeed Insights, but this might require a technical background. The further steps work regardless of the chosen CMS.

Step #1: Optimize Images

After PageSpeed Insights checks the site, it will provide recommendations on how to speed it up. And, as a rule, among the points, there will be a recommendation to optimize images. On the right side, the service will indicate the estimated time that can be saved.

Developers Google

Recommendations vary. In our case, it is better to postpone the loading of hidden images and display images in more relevant formats. But most often, the service checks how large the pictures are. If their loading speed turns out to be too slow, PageSpeed Insights suggests optimizing them, that is, reducing their weight and size. To do this, follow these two simple steps:

1. Compress all the images. You can use such free tools like Compressor.io and TinyPNG. They allow you to compress images up to 80% without losing quality. 
2. Reduce the image size to the actual parameters. If the image on the site is going to be displayed as 200×200, then it should be this exact size. Do not use CSS or HTML to change the length and width of the sides; it is better to unload all the images, bring them to a working view, and re-upload them.

It is a useful step to take before uploading a new image. Read more in the article SEO Images: 11 Perfect Tips to Optimize your Site.

Step #2: Decrease CSS and JavaScript

Developers Google

What does it mean to shorten CSS and JavaScript code? First of all, the tool recommends to remove the unused parts of the code, remove extra spaces, empty lines, and unnecessary comments since all these fragments can double the size of the code. Naturally, this will affect the page loading speed.

Gulp.js is a useful tool that can be used at this stage. Install it to your server, and it will automatically create a new file with an optimized CSS code.

You can clear the code on your own by using the effective guides from the developers of PageSpeed Insights.

Step #3: Use Caching

Developers Google

The service recommends saving copies of site pages in the browser cache. And, in the subsequent visits, the page will load much faster for users since the browser will display the copy from the cache memory.

To do this, you can use a CDN network. It allows you to cache and save various elements of the site, which can be images or JavaScript files. Copies of the web resource content will be stored on servers around the world. When the user opens the site, the network will download data from the closest server, which will save time significantly.

Although, even using the CDN network does not guarantee that you will reach 100% of the speed in PageSpeed Insights. The service takes into account all external scripts linked to the site, for example, counters of visitors or subscribers from social networks. It is better to collect and store this data by yourself than to increase the site loading speed.

Step #4: Place the JavaScript code at the end of the file and load CSS asynchronously

This step requires a more thorough understanding of technical knowledge. Initially, the service recommends removing JavaScript code and CSS that blocks the displaying of the top part of the page. If you see this advice, then the content of the first screen of your page is only shown after the JavaScript and CSS elements have loaded. And there are three actions you can take: 

1. Postpone the loading of these resources.
2. Load the elements asynchronously. First, the text should be loaded, then the CSS styles. 
3. Add the most essential components to the HTML code.

However, you only need to place the JavaScript code at the end of the file.

By the way, if you have a WordPress site, Autoptimize is a useful plugin that will help you solve this problem. To make everything work correctly, open the settings and select the Inline all CSS item, and uncheck the Force JavaScript in Head item if it is checked.

Step #5: Use GZIP compression

With the help of static compression, you can reduce the volume of data transferred and significantly reduce the load on the server. Compression can be enabled using the GZIP or Deflate functions. It is usually done in the server settings.

The essence of compression is quite simple – zipped files are uploaded to the server; when requested by the browser, the server will distribute data directly from the archive.

Step #6: Fulfil all the recommendations for the page optimization for mobile devices

The Google page speed tool measures the loading speed for both desktop and mobile versions. The recommendations for optimization may vary. So, do not forget to check if you have considered all the tips provided by the service.

Crucial Things to Know About PageSpeed Insights

Google PageSpeed Insights is a convenient Google page speed tool that provides useful recommendations. However, it is essential to understand that these recommendations must be followed with caution since thoughtlessly embedding updates can harm the usability and main functionality of the site.

And it is no secret that PageSpeed Insights metrics are not an all-encompassing solution. Moreover, the figures provided by the service are based on its internal metric; it is not the real page loading speed. None of the similar tools can give indicators that are 100% objective since the download speed depends on many factors, including the speed of the Internet and the user’s residence. Besides, every site has peak loading times when server responsiveness drops significantly.

And if you have thought that PageSpeed Insights is directly related to Google, and its recommendations will help to raise the page to the top of SERP, we have to disappoint you. This tool is developed and maintained by an independent webmaster community, which is associated with the search engine, but not directly. Therefore, optimization tips are not directly provided by Google and should not be followed blindly.

In the case PageSpeed Insights shows low speed, there are two steps you can take:

1. View the recommendations of the service and take into account those that you consider justified and critical. 
2. Check the website loading speed with other services to compare the indicators. Then, use standard methods to improve the site speed. Quite often, they are more or less the same as PageSpeed Insights recommendations.

Other Useful Tools for Testing Website Speed

In addition to PageSpeed Insights, webmasters often use these three popular speed testing tools.

1. GTmetrix

GTmetrix

GTmetrix helps you get a detailed report on the performance of your WordPress site. The service is entirely free. At the same time, it shows the errors in the site operation and provides valuable recommendations for its optimization.

In essence, GTmetrix is a plugin, but you can use its web version without any problems.

Let’s check the site indices we have earlier used as an example:

GTmetrix

The average value of the GTX website speed is 74%. We got 51%, which is quite low. PageSpeed Insights displayed more or less the same result.

2. Pingdom

Pingdom

It is a free online service that can be an alternative to PageSpeed Insights. It also calculates the page loading speed and shows a lot of useful data to optimize the site and increase its ranking in Google.

Here is the result for Pingdom using coursera.org:

Pingdom

69 is not that great of a score considering that the performance rating here should be above 70. Although it is significantly better than the previous two tools showed.

And here are the service tips to make our sample site faster and more user-friendly:

Pingdom

Below, there are many metrics that webmasters should consider. The developers tried to make Pingdom as useful as possible.

3. Uptrends

Uptrends

The Uptrends tool is designed to control the performance, operating time, and functionality of sites, servers, and APIs. It automatically detects problems related to the normal operation of web resources. And it is useful if you want to increase your website loading speed.

Let’s check its results using coursera.org

Uptrends

Yes, the 4.6-seconds loading rate indicates a poor performance for a resource. Maybe, the point is that the check was for Amsterdam servers. To improve website speed, Uptrends strongly recommends cleaning up the JavaScript code. Well, this is just what PageSpeed Insights recommended.

Next, there is a more interesting report on the loading of all the pages of the website:

Uptrends

All in all, Google PageSpeed Insights is not the only tool that checks website performance. And you certainly cannot rely solely on its accuracy. While it is important to note that most of its recommendations are reasonable, it is not always easy to incorporate them.