The Ultimate Google PageSpeed Insights Guide

How to Use Google PageSpead Insights to Optimize Your Website

When users experience more than a few seconds delay in load time on a website they are 113% more likely to bounce than when experiencing a load time of 3 seconds or less. Think about that for a moment… then note that every second counts when it comes to designing and maintaining an online experience.

What Is Google PageSpeed Insights?

Google PageSpeed Insights (PSI) measures and reports on the performance of a web page on both desktop and mobile devices using a combination of optimization metrics that make up the four Core Web Vitals, which include:

How to Use Google PageSpeed Insights

Testing webpages is quite simple and straight-forward with the Google PageSpeed tool. All you have to do is copy the URL of any page or blog post on your website and paste it into the Google PageSpeed Insights tool. After pasting the website URL, click the analyze button and after a few moments, Google will provide your PageSpeed Insights score including a detailed breakdown of how each Core Web Vital metric measures up.

Why Does Speed Matter?

When it comes to the web there’s an expectation for the entire web to be fast. Google even considers PageSpeed Insights to affect ranking factors on other search engines. If you have a slow site you can bet you will not be showing up on the first few pages of search results any time soon.

How Do I Get 100/100 on Google PageSpeed Insights?

There are many web developers and site owners that quickly become obsessed with trying to achieve a perfect 100 out of 100 on Google PageSpeed Insights, which in all honesty is near impossible — and not all that important either. Trying to achieve a perfect score blinds many website owners to various other optimization aspects that will help improve their user experience and search engine ranking more than paring down their website to achieve a 100/100.

How Does Google Use PageSpeed Insights?

On top of user experience (UX), your site speed also plays an important factor in your website’s search engine ranking. The PageSpeed Insights platform is developed by the world’s largest search engine so it’s fair to conclude that your PageSpeed Insights score will affect your position in Google’s SERP’s to some degree.

Understanding Google PageSpeed Insights Recommendations

Google PageSpeed Insights will provide specific optimization recommendations to help you improve the page speed and performance score of your site. The website speed recommendations are the most valuable information Google provides within this tool — more meaningful than the load time score.

Field Data

When analyzing your website with this tool you will receive a field data report. This report will show how your webpage has performed in the last 30 days compared to other websites in the Chrome User Experience Report. This report is a large pool of performance metrics that are gathered from Google’s Chrome web browser.

Lab Data

In comparison to field data, lab data is based on performance analysis from Lighthouse. Lighthouse will evaluate the page, emulated device, and connection. This data does not show real-world data, but it can be useful for seeing where performance optimizations may be added or refined.

1. Avoid Changing Critical Requests

The idea behind changing critical requests comes from the critical rendering path (CRP) and how browsers load your site. Specific elements such as CSS and Javascript must be loaded entirely before your webpage is visible to the user.

2. Eliminate Render-Blocking Resources

This is one of the most common recommendations that Google will give you. This recommendation refers to Javascript and CSS scripts that may be hampering the speed of your site. Since the user’s browser has to download all these processes before displaying your page, having a too many of them can hinder page load time.

3. Reduce Request Counts and Limit Transfer Sizes

The more requests that a user’s browser has to make when it comes to loading your site pages, the larger the resources your server returns. This then leads to a more drawn out website load time.

4. Minify CSS and Javascript

CSS files and Javascript files are usually bigger than they need to be. Minifying your CSS will help your page to load faster instantly. Minify them by removing unnecessary characters, duplications, and spaces.

5. Remove Unused CSS

Any code that is included in your stylesheet must be loaded for your page to become visible to users. If you have CSS that isn’t useful then it can bog down your site and cause load time issues. To do this you can inline or defer styles that make the most sense for your pages.

6. Minimize the Main Thread Work

The main thread is the primary element of a browser. This element is responsible for turning code into a webpage that users can interact with.

7. Reduce Javascript Execution Time

One of the most prominent contributors to main thread work is Javascript execution. Your insights will have a separate recommendation to let you know if this task is having a high impact on your website’s performance. The methods above for minimizing thread work should also be used to resolve this issue.

8. Reduce Server Response Times

Time to First Byte (TTFB) measures how long it takes for a browser to receive the first byte of data from your server after making a request. TTFB should not be confused with overall site speed as it simply measures how quickly the loading process begins, but having a low TTFB is important for your site’s performance.

9. Size Images Appropriately

Any media files, especially images, should be sized for their intended use. If they are too big they can really slow on your site’s performance.

10. Defer Offscreen Images

Deferring offscreen images is also known as lazy loading. This means that instead of having the browser load every image on the page initially, it will only load the ones that are immediately visible to the user. This leads to fewer initial tasks assigned to the browser when the page first loads and leads to improved page performance.

11. Encode Images Efficiently

Another way to optimize the images on your site is to consider image compression. This can help to reduce file sizes so images will load faster. The rule of thumb here is to have the lowest possible file size without sacrificing the quality of the image. There are many WordPress plugins designed to automate this task for website owners, including Smush and Imagify.

12. Serve Images in Next-Gen Formats

Some image file formats load faster than others but they are not as common as JPEG or PNG formats. Many WordPress optimization plugins now include the option to serve images in Google’s new WebP format which further reduces file size and increases initial load time. The WebP file format is quickly becoming the new web standard and the Google report will recommend utilizing these new features if it will help your site’s performance and load time.

13. Use Videos for Animated Content

Using GIFs can be an engaging way to display animated content, but using too many GIFs will cost you some performance points.

14. Make Text Visible During Webfont Load

Fonts are larger files that can negatively affect the loading time of your page. Sometimes browsers will hide your text until the font loads completely, resulting in a performance flag and a recommendation to address the issue from Google to improve your score.

15. Enable Text Compression

When this recommendation appears it’s referring to the use of GZIP compression. In some cases text compression will be enabled on the server you’re using automatically. If this isn’t the case your first option is to install a plug-in that offers a GZIP compression feature. You can also decide to compress your text manually which involves editing your .htaccess file.

Google’s 2021 Algorithm Update

In 2021 Google will be updating and implementing a new algorithm focused on performance and user experience. The update is aptly named Page Experience.

A Final Look at Google PageSpeed Insights

Within this ultimate guide to using Google PageSpeed Insights, we have discussed what PageSpeed Insights is and how Google uses this platform to inform search engine rankings. From there we looked at the two types of data Google uses to score your sites and the recommendations Google may offer to make your site faster.

Parachute Design Group Inc. is a boutique Toronto web design agency specializing in beautiful hand-made website design, custom logo design and branding.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store