Google PageSpeed Insights measures website loading speed and web page performance. The position of the site in the search results, as well as the depth of views and conversion, depend on these indicators. Slow page loading annoys users, and they leave the web resource without waiting for the information to be fully displayed.

What is Google PageSpeed Insights

Google PageSpeed Insights is a tool for evaluating the quality of site optimization on the Internet. The primary indicator it operates on is page loading speed, which is one of the critical behavioral site ranking factors that we have an excellent informative article about.

From the user's point of view, the site must work quickly: this saves time and brings a positive experience. The Google Insights tool helps not only to evaluate the loading speed of a place but also to find ways to improve this metric.

How does it work

To get the information you need to optimize your site, open PageSpeed Insights and enter the URL. After that, the algorithm will start, analyze the data and issue many indicators:

• time of demonstration of the first part of the page;
• loading delays;
• the end of the central processing unit (CPU);
• download speed;
• loading period before interaction.

The maximum score that can be scored for one indicator is 100, and a good result is considered to be 80 points.

PageSpeed Insights helps you calculate the time it takes for a site to prepare for user interaction fully. However, it should be understood that this tool is not wholly about speed:

1. It does not measure the page loading speed, and its indicators do not affect the ranking.
2. The difference in performance between the two sites is different from their quality relative to each other.
3. There are many examples where sites occupy the top results with a blatantly low page load speed, and spots on only HTML without any amenities and features get almost 100 points in PageSpeed Insights.

Google PageSpeed Insights Algorithm Update

In the summer of 2020, Google launched a new Speed Update algorithm, according to which the search engine considers the speed of loading a site when ranking. The changes continued in November - the service began to work based on Lighthouse. It is an open-source auditing tool that helps developers improve the performance of web pages. Previously, the service evaluated sites under certain conditions and the fulfillment of tasks. Now a high score is awarded only for download speed.

A storyboard feature has also appeared - the slides show in what order the content on the site is loaded. Google Page Speed analyzes images on pages and recommends lighter file formats.

How to make your website load faster on any device

Google PageSpeed Insights helps you optimize page loading by showing you what flaws slow down your site and how to fix them.

Image optimization

Page Speed Insights provides recommendations for optimizing images. To prevent images from slowing down the site, you can take the following measures:

Pre-optimization

When uploading images to the site, ensure their size is as small as possible. It's not about weight in kilobytes but about pixels.

Use a graphic editor: ideally Photoshop, in extreme cases, Paint. The first one has options for saving images in WebP format, improving optimization quality.

In the functionality of some CMS, there is image cropping - use it if you cannot process the image in the editor. Make sure there are no margins or unnecessary elements on the print - this can slow down the download. When creating collages, leaving little free space between individual pictures.

Format selection

For special websites, Google advises changing the format of many images. It says that JPEG 2000, JPEG XR, and WebP are more optimized for the web than the PNGs we use.

It is difficult to say whether the authors are right here since PNG is included in the list of the most optimized formats for the web. Unlike JPEG, it allows you to upload irregularly shaped images without having to draw them to a rectangle. By uploading a PNG, you keep only the graphics you want, and the rest of the space between your image and the rectangular container remains transparent.

Use JPEG to post photos. Save illustrations and technical graphics as PNG. SVG is perfect for vector images.

Using attributes with the correct size

If a developer uploads a large image and resizes it using the width and height attributes, they have optimized the page load time. But he took away the time of the user, who will download the entire file and see it in a reduced size.

For batch compression, Google offers to upload images compressed during diagnostics in the archive. You can unpack them directly into the corresponding page directory and update the old photos.

JavaScript and CSS optimization

Google PageSpeed Insights generally recommends shortening JavaScript and CSS. It is a suggestion to move scripts and styles to the footer. But take your time following these recommendations.

Of course, JavaScript loaded at the bottom of the page or asynchronously sped up loading. But developers rarely resort to this action since moving scripts to the footer systematically disrupts the site's functioning. Moreover, this applies to ready-made templates for CMS, in which pages are edited through the interface.

Likewise with styles. When a user loads a page with the CSS at the bottom, they are very likely to load the wireframe of the page without the types. It looks like a mistake, and the visitor will likely leave the site.

However, there are several ways to lighten the code and speed up page loading.

Shortening CSS

To avoid manual editing, use online style file compression tools such as CSS compressor. It has three compression levels: Light, Normal, and Super Compact, and three options for reducing comments: do not delete, delete all, and delete comments of a certain length. Advanced Mode is available for professional settings.

The last compression option - Super Compact - turns the code into a string. Use it only if you are sure that the style file contains the final data.

If you are the only developer and are good at coding, you can remove the comments altogether - this can significantly lighten the file.

JavaScript shorthand

The Online YUI Compressor tool is suitable for this task and can also be used to lighten CSS.

Just paste the code into the window and start compressing. After the procedure, replace the code in the files on the site and check its performance.

Loading content from Google CDN

The Internet is a single space without distances, but it is not. The remoteness of the servers plays a significant role. CDN delivers the content of a web resource - scripts, styles, and images - to a particular network.

Page loading could take a long time if your site were opened by a user several thousand kilometers from your server. CDN starts downloading content from the server closest to the site visitor.

Cache usage

To implement caching, the server must be running Apache. Otherwise, you will have to contact the hosting administration.

The essence of caching lies in the fact that the files due to which the site works are not loaded from the server, they are stored on the user's computer, due to which the page loading speed is significantly increased.

To implement the caching functionality, you again have to work with .htaccess. Find this file in the root and open it for editing. If it is not displayed, use the show hidden content options in the FTP client settings. Add directives to .htaccess to cache static elements in the user's browser.

The Last-Modified and ETag headers ensure that cached files are updated. When the site is loaded, the browser sends a GET request and receives a 304 response - which means no changes and permission to use the content from the device. Image, style, and script files are often stored on the user's computer.

Reduce server response time

To reduce response time, you can install a plugin for caching and compressing styles and scripts on your site. It must distinguish between the mobile and desktop versions of the site; otherwise, users will have a problem displaying pages. The best option is the Hyper Cache plugin, which has a separation between mobile and regular cache.

What parameters are important when measuring site speed

There are several main parameters by which the site loading speed is evaluated. Let's talk about the main ones.

Largest Contentful Paint (LCP)

The parameter shows the display time of the most significant element on the page. The metric algorithm tracks images, video with a poster image, and text in block elements. The formula determines the size: width times height. If some detail on the page is partially hidden behind the visible area, it is not considered in the calculations.

Server response time

Server response time is the time it takes from a browser request to the first byte of a website page being loaded. Google PageSpeed Insights does not report on this metric, so use additional services such as Loading Express. To get the result, enter the site address in the search box and select the region in which the user is located.

First content load time

It is the time from when the page is opened until the first element is loaded - a text block or an image. The optimal indicator is 2-3 seconds, and the ideal is 0.5 seconds. If the user sees a white screen, they may think the site is down or don't want to wait and close the page.

Download Speed Index

The metric shows the loading speed of the site's content until the moment when visual changes stop on the page. It is the time from the beginning of loading visible elements of the page to the full display of the site with the correct arrangement of content. The Speed Index is one of the critical metrics PageSpeed Insights uses to rate a site's loading speed.

Loading time for interaction

It is the most crucial speed score in Page Speed Insights. The indicator displays the required amount of time to load, after which the site visitor can click on page elements, choosing content to explore. If the metric's value is more than 20 seconds, this indicates a potential problem with clicks and scrolls.

Loading time for sufficient content

The metric is based on the time it takes for most content to load on a page. This metric shows the speed required for user interaction.

In some cases, the download time for a sufficient portion of the content is the same or longer than the first content uploaded. In the first case, the user immediately sees a part of the text, and in the second, the background or frame of the image.

CPU End Time

The metric captures when the processor responsible for loading the site is sufficiently loaded when the user navigates. It shows the time it takes for the processor to respond to the visitor's actions. According to the standard, the duration of the response should not exceed 50 milliseconds.

Estimated Input Delay Time

This metric shows the average page response time to visitor actions in the first 5 seconds of loading. The user thinks the site is slow if the page takes longer than 50 milliseconds to respond to a request. It is the least significant characteristic in assessing the speed of the site's pages.