The Ultimate Guide to Google PageSpeed Insights

How To Make Your Webpage Faster with Google Pagespeed Insights Recommendations

There are many factors that could result in visitors leaving your site prematurely; how fast your web page loads is arguably the most crucial. No one likes waiting for a website to load, and search engines know this. In fact, their complex algorithms are built on this concept.

The number one reason users leave a website and increase its bounce rate is page speed. An inflated bounce rate also helps to lower a site’s ranking as well.

The good news is that Google PageSpeed Insights can help you diagnose performance issues in your website and provide some suggestions to help improve site speed and enhance your overall search engine optimization.

What Is Page Speed?

Before we get into the Pagespeed Insights tool, let’s start with what page speed is.

Page speed has two components:

1. How quickly your above-the-fold content displays on the user’s screen
2. How quickly do internet browsers like Chrome, Safari, or Firefox load (or render) the page.

Not everything about page load speed is within your control as the site owner. Elements that are not in your control are the user’s internet speed and connection, the visitor’s browser — not all browsers are created equal, unfortunately — the hosting service of your domain, and cache features.

However, the aspects of your website you can control optimization of include JavaScript, images, video content, and more.

Why Does Web Page Speed Matter?

There are many reasons page speed and the overall performance of your website matter. These range from improving your search engine optimization to establishing a positive experience with your brand.

1. Visitors Hate Slow-Loading Sites

Every internet user wants the information they are looking for as quickly as possible.

If your site doesn’t load fast, your website visitor gets frustrated. If your web page loads slowly, your business will lose out on leads, and the perception of your brand is less than ideal.

With mobile searches overtaking the number of desktop searches (recent stats: 54.86% for mobile vs 42.65% for desktop), it’s even more vital that your page loads fast.

Mobile users want answers even faster than desktop users, so keeping the visitor on your site to learn more about your business is essential. After all, people use mobile search to help them:

• Decide when they are ready to buy
• With immediate needs, like looking up a business address, buying something online, or booking a service
• Address something they want to have done in the future

2. Visitors Will Leave A Slow-Loading Web Page

Your site’s loading time is important to user experience (UX). Your visitor will leave your website if it doesn’t load fast enough, and they’ll go find the information they are looking for elsewhere rather than wait for your site to render.

As more users leave your site without navigating past the first entry page, your bounce rate rises sending negative signals to Google. This is bad news for your site’s ranking on the search engine result pages (SERPs), as your competitors will leapfrog you.

3. Slow Site Speed Creates A Bad First Impression

We all know that first impressions count. The first impression of your company happens as soon as your visitors click on your site’s URL in the SERP and see how fast the page renders.

A quick-loading page leaves a great first impression. It helps build confidence in your business and makes your company appear professional and trustworthy.

4. Slow Load Time Negatively Impacts Your SEO

Speed is one ranking factor out of 200 that Google looks at in its algorithm to determine your site’s position in the search results.

Since 2018, Google has stressed the importance of page speed as a measuring stick for a website’s SEO. Google has since actually made speed a landing page factor for Google ads and Google search, as well as for mobile searches.

Your page will not rank high in the search results if it loads slowly, meaning you lose out on leads and profits.

5. Slow Page Speed Negatively Impacts Your Conversion Rate

If your website visitors stay on your site and engage with your content, it’s likely that your conversion rate will increase.

A higher conversion rate equals a rise in profits (as the visitors become leads who then become paying customers). More conversions also mean you gain a better understanding of your customers, a maximized marketing spend, and more.

According to HubSpot, the biggest impact on your conversion rate is the first five seconds of your page load time. With every extra second of load time, a website’s conversion rate can drop by 4.42%.

6. Slow Speed Negatively Affects Your Quality Score

If you are running a pay-per-click (PPC) campaign, how fast your website loads affects the quality score of your ads.

When you set up a PPC campaign, your ad placement is determined by your quality score and max bid. So if your quality score dips, so will your ad’s position. And your costs per click (CPC) can potentially increase.

To ensure your PPC campaigns run smoothly, your site needs to handle user requests quickly.

What Is Google PageSpeed Insights?

Google PageSpeed Insights is a free tool from Google to test your site speed and web performance from a desktop and mobile perspective. The tool then gives you PageSpeed Insights scores with recommendations on what you can improve to speed up your page performance.

By using PageSpeed Insights, website owners see how Google interprets their website’s technical performance in terms of SEO. The score you get is a good indication of whether your site performance meets Google’s web performance and speed standards by comparing lab data and real-world data, known as field data.

How Does Google Use PageSpeed Insights?

Page speed and user experience are important ranking factors for your website.

Google developed PageSpeed Insights, so it’s safe to assume the world’s largest search engine will be using its PageSpeed score when it determines your ranking on the search results pages.

Information that was released about the 2021 updates to the Google PageSpeed Insights tool revealed that more emphasis will be placed on Core Web Vitals and site speed.

How Does Google’s PageSpeed Insights Work?

When you go to the Google PageSpeed Insights tool, simply enter the URL of the site, and click “Analyze.”

The tool retrieves the field data of the page, which is a historical report of the user performance data stored in the Chrome User Experience Report (CrUX). The CrUX provides metrics about how real-world users experience popular websites.

The tool then also uses the Lighthouse API to measure how well your page performs. This is called the “lab data,” when PageSpeed Insights fetches the page URL twice, testing the loading time in a controlled environment for mobile and mid-tier devices like desktop devices.

Getting the field data and the lab data helps the PageSpeed Insights tool get rid of some variables that impact site speed and performance.

You can also see your Core Web Vitals, which is a subpart of Web Vitals. These vitals aim to provide quality signals that help deliver a great user experience. The Core Web Vitals measures various facets of each user’s experience using field data and reflecting real-world experience.

Currently, the metrics for the Core Web Vitals look at three user experience facets (and there may be more metrics in the future):

1. Loading, measured by the Largest Contentful Paint (ideal score is 2.5 seconds)
2. Interactivity, measured by the First Input Delay (ideal score is 100 milliseconds or less)
3. Visual stability, measured by Cumulative Layout Shift (ideal score is 0.1 or less)

Based on these report details, a score is then calculated for your page’s performance and Google recommends how you can fix your site speed issues. Below the score, you also see the metrics and what each means.

Google PageSpeed Insights Metrics

Google gives you seven metrics (data collected from field data and lab data). There’s a score for each metric too.

Toggle between “mobile” and “desktop” to see the scores for each device type.

First Contentful Paint (FCP): the moment your visitor first sees something on your site. This is the time the first image or text is painted or visible

First Input Delay (FID): a user-centric metric; that measures the time when the user can first interact with the page (e.g., click on a button) until the browser processes that action (the delay in processing that event)

Speed Index: measures how fast elements appear on your page

Largest Contentful Paint (LCP): the moment when the biggest image or text on your page shows up

Time to Interactive: looks at when your page is fully interactive; that is, all the elements have been rendered, and the visitor can use your page as intended

Total Blocking Time: the time between the first contentful paint and time to interactive, so the time from when the user sees the first text or image until the page is usable

Cumulative Layout Shift (CLS): measures the biggest “unexpected movement” of content on the page that causes the visitor to lose their place on the page because the content has shifted. CLS can occur because of a third-party code or widget, an image with unknown dimensions, etc.

Google’s PageSpeed Insights Diagnostics, Opportunities, & Passed Audits

Next, you can see opportunities, diagnostics, and passed audits.

Opportunities are suggestions that Google recommends for speed optimization. These opportunities also come with the estimated savings in terms of page load speed if you implement the recommendations with the help of your web developers to modify your site’s code.

The diagnostics give you more information about your site’s performance. The diagnostics lets you know how well your pages are created with regard to the best practices of web development.

The passed audits are a list of items your site is doing well in terms of page speed.

Google PageSpeed Score & Meaning

Each metric on the PageSpeed platform gets a score that’s divided into three categories:

• Good (green) : 90–100
• Needs improvement (orange): 50–89
• Poor (red): 1–49

For the final speed score of your site, all the metrics scores are averaged.

Your page speed is also rated to be fast, average, or slow.

Is a 100/100 Google PageSpeed Score Possible?

A perfect PageSpeed Insights Score of 100/100 is possible, but not every time. Even just achieving a perfect score once is challenging; nevertheless, achieving it on a consistent basis.

If you get a good score, it’s recommended to spend your web development efforts elsewhere. Chasing after that perfect score won’t guarantee that your site will rank in the #1 spot of the SERPs, but will certainly help improve your keyword rankings.

It is important not to become obsessed with achieving a perfect 100/100 PageSpeed Insights score. You do not need a perfect score to see improvements in your SEO performance and focusing too much on a perfect Google PageSpeed Insights score will blind you from other opportunities to improve your site’s user experience.

It’s also important to keep your audience in mind. You must remember that Google PageSpeed Insights are based on complex calculations and algorithms and don’t necessarily take into account human interaction with your website. Don’t fixate on a perfect PageSpeed score and compromise on your page’s user experience. Page speed is just as important as the overall user experience, so it’s best for site owners and web designers to find a balance between the design, performance, and function of your site.

We also recommend using other page speed optimization platforms to get a broader picture of your site’s performance. With more diverse feedback, you can make more educated decisions about your page’s speed and how best to optimize it.

How Should You Use Google PageSpeed Insights?

You should use Google PageSpeed Insights to help you optimize the speed of your web pages, but don’t chase the perfect score and get lost in the importance of speed while neglecting the user experience and other ranking factors that Google looks at.

Run your website URL through other speed testing platforms too, and use all the advanced data visualization and recommendations to create a complete picture of your site load times.

Understanding the Google PageSpeed Insights Scores & Interpreting the Data

The Google PageSpeed Insights report can be quite overwhelming, especially with all the technical terms and data presented if you’re not a web designer or developer.

The 2021 update to Google’s PageSpeed Insights platform has made the data presentation much more user-friendly.

If you are still unsure what everything means, then you can focus on the Opportunities section in the report. There are even drop-down arrows so you can gain more insight on how to fix the issue. Plus, you’ll see how much faster your page can potentially load if you implement the Google PageSpeed Insights recommendations for your web pages.

18 Recommendations to Improve Your Page Speed Score

To make things even easier for you, we’ve compiled a list of the common issues that affect page speed, including recommendations and best practices for website speed optimization.

1. Optimize Your Site’s Images

Large images and videos are most likely to slow down the page’s load time. Your page will load even more slowly if your site is image- and/or video-heavy.

Basic optimization of the images will help avoid CLS problems, as well as decrease LCP and FCP times. To fix this issue and increase your page’s loading time, compress images, use a content delivery network (CDN), and set widths and heights for the images.

It is also important to use correct image file formats throughout the website to ensure the payload is reasonable.

A WordPress plugin you can use is WP Smush. This plugin scans your media library and compresses images that need to be optimized.

Alternatively, because having too many plugins also slows down your website, use an image compressor tool like JPEG Optimizer or Optimizilla. Or create differently sized images for each type of device — desktop and mobile. To do this, use the srcset attribute that you can find in the <img> tags.

2. Don’t Upload Video Content

Uploading videos to your site takes up lots of space. The videos then also slow down your web server response times if there are a large number of website visitors playing the videos simultaneously.

Improve your page speed by uploading your videos to a streaming service like Wistia or YouTube. Then you can simply embed the video link on your page and avoid the payload strain on the server. This is especially effective for mobile networks and aggregated data.

3. Choose A Faster Theme

For your WordPress sites, there are themes that are slow-loading and then there are themes that are fast-loading (i.e., they are optimized to help increase your site’s speed).

The fast-loading WordPress themes are lightweight, feature a responsive design, and use GZIP compression. These themes will improve your Google PageSpeed Insights report score and your SEO.

Or, hire a professional WordPress designer to craft a custom theme for your business.

4. Avoid Chaining Critical Requests

If you have a lot of redirects on your WordPress site, the Time-to-First Byte (FTTB) or server response times increase. The FTTB measures how long it takes to send a request to the server and when the data is sent back.

So if you avoid excessive redirect links and streamline the critical rendering path that halt page rendering, your page load time will improve.

5. Enable Asynchronous Loading

When you enable asynchronous loading, your browser becomes better at multitasking. However, if your JavaScript is set to load synchronously, then the JavaScript files load while all other actions are paused.

With asynchronous loading, your JavaScript and CSS scripts can load while the web browser also loads the HTML structure that formats the page’s layout.

Your web developer may need to help you set up asynchronous JavaScript loading as this speed optimization technique is relatively advanced.

6. Decrease The Size Of Big Files

Just like large images and video content slow down your page speed, so too do big files on your website. The large files you have can be in the form of ebooks, detailed how-to guides, lead magnets, and other informational content.

While this type of content is valuable and meant for your website visitors, it can seriously hamper your site speed and SEO.

You can either decrease the size of the files by reducing the resolution or making them available to download as a zip file. Another option is to store the files elsewhere and simply embed the URL onto your page.

For example, you can have your ebook as a Google Doc (and set the share settings to view only, and remove the “download” capability). Then use the Google Doc link on your website with the name of the ebook as your anchor text.

Alternatively, you can keep some large files — the most important ones — on your WordPress site and remove the others. This will also speed up your page’s load time.

7. Minify The Code

To minify means to remove any unnecessary data and unused code that can improve page speed and how your browser uses resources.

Remove any characters, duplicates, and spaces to increase loading speed. Your web developer can also help you minify the CSS files, unused JavaScript, and/or HTML code on the backend.

Alternatively, you can also look at free tools like HTML Compressor and CSS Minifier to minify the code and JavaScript Minifier to reduce unused Javascript.

8. Set Up Browser Caching

When you enable browser caching, images, videos and media files on your page will be stored on your website visitor’s device. When a user opens your particular URL next time, the images and video content load from their device. This increases your page load time.

To enable browser caching, you need to create or edit an .htaccess file. Again, your web developer or designer may be the best person to help you set this up. Or if you have a WordPress site, download a WordPress plugin like WP Super Cacheor W3 Total Cache to set up browser caching.

9. Implement Accelerated Mobile Pages (AMP)

AMP is an open-source platform that helps you optimize your page speed on a mobile device. The tool removes unnecessary content, which ensures your site loads fast.

When the user is browsing, they get a simplified version of your site. So they can scroll from one page to another without leaving the page they are on.

For your WordPress site, you can use AMP for WP. For non-WordPress sites, ask your web designer to help you AMP your site.

10. Enable GZIP Compression

There are some internet browsers like Firefox and Chrome that can serve a reduced version of a page. Pages can be reduced by up to 90% by enabling the GZIP compression feature.

So when a visitor clicks on your site to load on their mobile device, only the compressed version is retrieved instead of the whole page.

11. Keep Request Count Low and Transfer Sizes Small

The more requests browsers have to make while loading your site, the longer it takes for your page to load. It’s the same if the size of each request is large.

Google’s PageSpeed Insights report lets you know what kind of request (script, stylesheet, third-party, image, font, or something else) is generating the most requests.

Unfortunately, there’s no standard for the best number of requests for a website. Instead, Google recommends that you create a performance budget and let your web developer use this. Alternatively, look at what requests can be eliminated to improve your page loading time.

12. Remove Render-Blocking Resources

Static files, or render-blocking resources, are fonts, CSS, JavaScript, and HTML that are essential for a web page to render or load. However, a bottleneck is created when your website visitor’s browser first needs to process these static files before loading the rest of the page.

Inline the static files by adding the CSS or Javascript code into the HTML file if your “small” site doesn’t have a lot of CSS or JavaScript. If you have a large website, use defer or async attributes to get the scripts to be non-render blocking.

Defer and async request the browser to download scripts in the background. Thus, it doesn’t block or slow down the page load time.

It also helps minimize main-thread work — Google PageSpeed Insights flags a page that takes four seconds or more to complete main-thread work and renders a usable website to the user.

For a WordPress site, utilize the Autoptimize WP plugin.

13. Prioritize Above-The-Fold Content

How fast your page loads isn’t solely based on actual time. It is also how fast visitors perceive your website to load.

For example, let’s say a user visits your page. Everything is loading except that which the visitor wants to see or click on. This lets the user think your page is loading too slowly (or longer than it actually is).

To make it seem like your website is rendering fast, improve the load time of the content that’s important to your user. One way to boost perceived performance is to ensure above-the-fold content loads first and before third-party plugins or widgets.

14. Use A CDN

Another way to improve your Google PageSpeed Insights score is to make use of a CDN.

For example, let’s say your business is in Vancouver. A user from Nova Scotia or New York loads your site. So the information needs to travel all the way from Vancouver to Nova Scotia or New York. The information needs to travel far, resulting in your site rendering slower than if someone in Vancouver accessed your site.

Using a CDN means that if the Nova Scotia user visits your site, the information comes from a server close to the person. This means your page can load faster, and your user is happy because they can quickly see the contents of your page.

15. Implement Lazy Loading

Lazy loading is also known as the process of deferring images offscreen. When your site is set to lazy load, it means the user’s browser doesn’t load all the images first and then displays the above-the-fold content.

Instead, the browser loads the images that show up first and other critical resources render first to make the site interactive.

For your WordPress site, use Lazy Load by WP Rocket or a3 Lazy Load to help you improve your Google PageSpeed Insights score.

16. Serve Images In Next-Gen Formats

Serving images in next-gen formats like WebP is the new standard image file format that loads quicker than JPEG or PNG formats.

Google created WebP to provide superior image compression. For example, WebP lossless images are more than 25% smaller than PNGs. WebP lossy images are between 25% and 34% smaller than JPEGs.

PageSpeed Insights will quickly let you know if the images on your websites aren’t adhering to the new WebP image format. To convert your images to WebPs, you can use Imagify and Smush.

17. Use Preconnect Attributes

If you are using Google Analytics and other third-party resources on your website, your page loading time will increase. The browser needs to connect with Google Analytics, for example, while also rendering the page for the user.

Using a preconnect or DNS-prefetch attribute tells a browser that there are third-party scripts to load so it establishes an early connection to required origins.

If you can edit the theme files on your WordPress sites, go to your header.php file and add a link tag. You can also use Perfmatters to help you set up preconnects for your site on WordPress.

18. Use Videos For Animated Content

Including GIFs in your content helps engage your audience. Plus, GIFs just work perfectly for animated content.

But too many GIFs means your page loads slowly.

To increase your page speed on the PageSpeed Insights tool, convert GIFs into videos by using WebM and MP4 file formats. You can also use CSS/SVG or HTML5 animations if this makes better sense for your website.

Final Thoughts On Google PageSpeed Insights

Page speed is a vital ranking factor for your website. To run a speed test and learn how fast your site renders, we recommend using PageSpeed Insights but mixing that data with other tools as well.

Your website performance score lets you know whether you need to optimize your page speed or focus your efforts elsewhere. The report even lets you know what works on your page, and Google gives your suggestions to improve your page speed score.

But remember, while you optimize for speed, don’t forget about the overall user experience of your site and other ranking factors that affect the SEO of your website.

If you have any questions or need help improving your page speed, contact us to learn more about how we can help optimize resources and reduce server response times to improve your website.

Originally published by Parachute Design.