Google Page Speed Index & Page Speed Insights

Learn how a page’s load speed and speed index score impact your website’s ranking and how you can automate optimization with Quattr

By
Colton Miller

Fast page loading times for a website are essential for your business to succeed. Unfortunately, people have become increasingly more impatient when it comes to waiting for websites to load. In fact, according to a recent study, 53% of Internet users abandon websites that take longer than 3 seconds to load.

Search engines like Google have made it a point to give importance to the user experience, and page loading time is a critical factor in providing a seamless journey to the internet users on your website.

This article explains what PageSpeed Index (PSI) is and how you can optimize your website to increase its score.

Also read: What is Interaction to Next Paint (INP) and Google's plans to replace First Input Delay (FID) with this new metric within the core web vitals.

Google Page Speed Index And Improvement TL:DR

PageSpeed Insights (PSI) generally measures how well a page follows Page Speed principles. Some of the best practices include

1. Optimize images

2. Minimize HTTP requests

3. Leverage browser caching

4. Optimize CSS delivery

5. Optimize JavaScript delivery

A higher PageSpeed Insights score usually means that a page is faster and follows more of the PageSpeed Insights principles.

Google's ranking algorithm gives higher keyword rankings to websites with fast-loading pages rather than sites with slower-loading pages.

Scale Your Page Speed Optimization Efforts with Quattr The current process of optimizing for page speed-related issues is typically a page-level exercise. The Quattr platform highlights page speed issues across your site and gives you ways you can improve your page load time.

What Is Google Speed Index Score?

Speed Index is a score given to a website on how fast it loads. Specifically, Speed Index scoring is a measurement of how quickly the content of a page is displayed visually. Speed Index or SI is a ranking factor that Google introduced in 2012. In addition, the PageSpeed Insights tool evaluates the technical performance of a web page and provides suggestions to improve it.

PageSpeed Insights generally measures how well a page follows the following Page Speed principles:

1. Optimize images

2. Minimize HTTP requests

3. Leverage browser caching

4. Optimize CSS delivery

5. Optimize JavaScript delivery

A higher PageSpeed Insights score usually means that a page is faster and follows more of the PageSpeed Insights principles.

Google’s Lighthouse team is always looking for a way to provide search users with the best possible experience. A fast-loading website is one of the several ranking factors that the search engine considers, especially as the world moves toward more and more mobile device usage.

Why is Page Speed Important?

Google’s core goal for search is to help users accomplish actions as quickly and efficiently as possible. They do this by giving importance and weight to page loading times. Google’s ranking algorithm gives higher keyword rankings to websites with fast-loading pages rather than sites with slower-loading pages. If your website takes a long time to load, you run the risk of not appearing in Google’s search results as often as your competitor's site that loads faster. Even if your site is considered fast by tools,  but is slow in comparison to your digital competitors. You may still be at risk of not being able to rank as well as you should be, especially when users are on mobile devices.  

Google’s Speed Index is a ranking factor that helps determine how well you are optimized for poor networks and lower data bandwidths. Unfortunately, your site's Speed Index scoring can affect your site's organic ROI. One study found that your ROI can be impacted by as much as 20%; for every second your site takes to load on mobile devices.

A high PageSpeed Insights score also means that your website is likely to perform better on various device types.

For example, devices with slower internet connections, such as mobile phones and laptops, tend to have trouble loading websites that have lower PageSpeed Insights scores.

In summary, higher PageSpeed Insights scoring is better. Therefore, if you want to rank higher in the search engine results, you need to work towards improving your website’s speed and PageSpeed Insight scores. Which is easier said than done, so how can you increase your website’s PageSpeed Insight score?

How Are Google PageSpeed Insights And Speed Index Calculated?

The PageSpeed Insight tool by Google calculates the page loading time of your web pages. Let us first look at how the PageSpeed Insights tool calculates your site’s loading time. Then we will explore calculating the Speed Index metric more granularly. First, it makes sense to understand how PageSpeed Insights (PSI) scores and, more granularly the Speed Index metric is calculated.

Google PageSpeed Insights Scoring for Dummies

Google’s PageSpeed Insights tool gives you a score between 0-100, with 100 being the fastest loading time. A website with a PSI score of 90 or above is considered to be performing well. While a website with a PSI score of 0-30 is considered to be performing poorly. Anything in between is considered ‘Needing Improvement’ but, in reality, is deemed to be average if not above average.

While there are dozens of factors and a handful of metrics being calculated for PageSpeed Insight scoring. The PageSpeed Insights tool measures three primary aspects of your website that tend to impact a site’s loading time:

1. The server response time is the time it takes for the server to send the first byte of information to the browser. The time to first meaningful paint is the time it takes for the content on the page to first appear.

2. The download time is the time it takes for the full page to be downloaded.

3. The total page size is the size of the page in bytes.

Google Speed Index Scoring for Dummies

As a general concept, Speed Indexing is the score of the average time it takes for your page and its content to be available and visible to a browser/user. Today’s Speed Index scoring has had some additions added to help make it more viable as a metric. One of the biggest additions is the inclusion and comparison of HTTP Archive data. This effectively gives Lighthouse and the PageSpeed Insights tool the ability to create a baseline and enables them to compare individual pages and their metrics like Speed Index.

The result of this is a simplified scoring system for the Speed Index metric. With each color-coded score, there is an associate value. This is compared with and shown in seconds. The scoring rubric is the following:

1. Green (fast): 0-3.4 Seconds

2. Orange (moderate): 3.4-5.8 Seconds

3. Red (slow): Over 5.8 Seconds

Speed Index Metrics
Speed Index Metrics

What brings down your Google Page Speed Index Scores?

There are a few things that can bring your page speed scores down. One of the biggest culprits is unoptimized and oversized images. If your website has a lot of images, it can take longer to load if they are inappropriately sized for the page and unoptimized for a user's network.

Another thing that can affect your page speed score is the number of HTTP requests your website makes. HTTP requests are the requests your browser makes to load all the elements on a page. The more requests your website makes, the longer it will take to load.

One other common trend for a poor page speed score is under-serving your website. Or more technically bandwidth-throttling your site from its housed server to the end-user. This often occurs with cheap or shared hosting options from hosting companies and registrars. While this usually affects smaller sites and businesses it can affect larger sites especially if the site usage and access are not increased as the site and its popularity expands.

How To Improve PageSpeed Insights Scores

There are many ways you can improve the page loading speed of your website to increase its Page Speed Index. Almost anything you do to optimize your site and its pages tend to lead to better PageSpeed Insight scoring. Below we will share some of the best ways to improve your Speed Index scores.

The first thing to examine is the server and network utilization. Images are another thing to evaluate within this utilization. You only need to understand one simple question:

“Is there enough bandwidth available?”

If not, then you should consider creating a content delivery network (CDN), which will help optimize site files and offload some of the traffic from the server. Furthermore, you can use your CDN to serve static resources like images, CSS files, and scripts from global servers instead of hosting them on your own local servers which might be poorly distributed or too remote from other servers that may be closer to the user. This will help reduce latency in serving those resources which will increase the page speed index score.

You can also reduce the amount of traffic on your website by using browser caching. This means that users won't have to download all of the same content again and again when they revisit your website because it will be stored in their browser cache.

Reduce the size of HTML, JavaScript, CSS, and other types of files on your site. This will decrease the overall load time as well as the number of bytes transmitted over the network. Be sure to use only what is needed and not more than necessary. For example, use CSS sprites instead of multiple images for particular elements in your design so that each image isn't downloaded separately from different sources each time it loads on screen.

Finally, compress images using tools like TinyPNG or ImageOptim to compress your images. You should also resize them if they are too large. Lastly, you can also set images to load as the page is scrolled through. Commonly referred to as lazy-loading it effectively delays content from being fetched by the browser until a trigger occurs. This trigger could be a user scrolling to an element, a time delay, and more. This will defer some data transferring and could also help save you bandwidth usage over time.

Improving Your Speed Index Metric Scoring

While similar to improving your overall PageSpeed Insight scores. Your Speed Index scoring can often improve by almost any optimization or improvement made to a page. However, beyond general optimizations, there are 3 specific suggestions provided to optimize your site's Speed Index scores.

1. Text Visibility During Webfont Load

2. Reduce JavaScript Execution Time

3. Minimizing Main Thread Work

Text Visibility During Webfont Load

Making sure your site and page content remains visible while the page and its design are being loaded can make a positive impact on your Speed Index scores. Ensuring this happens is of course easier said than done. But with some slight code or even theme file changes is completely doable for almost anyone.

Including the HTML code [font-display: swap] in your [@font-face] page style can help you avoid the default hiding of text while font styles are being loaded. Here is a quick example of how this can look inside of a page’s HTML coding.

HTML code to improve Speed Index Scores
HTML code to improve Speed Index Scores

Reduce JavaScript Execution Time

Dropping the time it takes to execute JavaScript can be done in a multitude of ways. Some basic recommendations that can help improve these processes

1. Implement Code Splitting

2. Minify or Compress Code

3. Cache Code with PRPL Patterning

4. Remove Unused Code

Minimizing Main Thread Work

This last one is certainly not for the faint-of-heart or technically timid. It is however something that can make a massive impact on the way your site and its page load. As a general overview, your browser has a render process. This process is responsible for taking raw HTML code and effectively building the page. This building process includes the information, formatting, styling, functionality, and more.

All of this processing and rendering is done mostly by default with something called the ‘Main Thread’ acting like the step-by-step instructions to build the page. Effectively the Main Thread is what your site uses to tell the browser what to grab and when a page is being requested from a server.

In a general sense optimizing Main Threading for Speed Index scoring means telling the browser to fetch the content, formatting, and styling before fetching everything else like functionality, images, javascript, etc. for the page.

At a high level here are the top things to review and optimize when minimizing Main Thread work.

1. Script Execution Evaluation

2. Styling and Layout Handling

3. Page Rendering Priority

4. Parsing HTML and CSS Coding

5. Script Parsing and Compiling

6. Checking a Page’s Memory Usage

Lastly for those who are curious here is a great resource to learn more about Main Threads.

Existing tools that can help with Page Speed Optimization

You can use the following tools to test the loading speed of your website. These tools will also help show what is either passing or missing their own inspections and scoring rubrics. Each one provides solutions that when made can help ensure your website loads quicker.

1. PageSpeed Insights

Google's PageSpeed Insights tool is a great way to test the loading speed of your website and get suggestions on how to improve it. To use the tool, simply enter the URL of your website and click the "Run Test" button. PageSpeed Insights will then test the loading speed of your website and provide you with a score. The score is based on several factors, such as the page size, the number of HTTP requests, and the page loading time. PageSpeed Insights will also give you a list of recommendations on how to improve the loading speed of your website. Some of the recommendations may be to optimize your images, reduce the number of HTTP requests, and minify your CSS and JavaScript files.

2. YSlow

YSlow is another tool that you can use to test the loading speed of your website. It is a Firefox add-on that analyzes the loading speed of your website and provides you with a score. The score is based on several factors, such as the page size, the number of HTTP requests, and the page loading time. YSlow will also give you a list of recommendations on how to improve the loading speed of your website. Some of the recommendations may be to optimize your images, reduce the number of HTTP requests, and minify your CSS and JavaScript files.

3. GTMetrix

GTMetrix is another tool that you can use to test the loading speed of your website. It analyzes your website and provides you with a score based on the Page Speed and YSlow scores. It also gives you a list of recommendations on how to improve the loading speed of your website. Some of the recommendations may be to optimize your images, reduce the number of HTTP requests, and minify your CSS and JavaScript files.

Scale Your Google Page Speed Optimization Efforts With Quattr

The current process of optimizing for page speed related issues is typically a page by page improvement exercise. This can prove to be difficult and time-consuming, especially for enterprises with thousands, millions, or even billions of web pages. Quattr was built from the ground up to solve this problem and more.

The Quattr platform highlights page speed issues across your website and gives you ways you can improve your page load time. The platform also ranks these recommendations in a unique and one-of-a-kind way that is proprietary to Quattr. Simply put Quattr will show you prioritized improvements based on potential traffic to be gained. This is done through a series of processes looking at all your web pages, weekly evaluation of pagespeed index, rankings, impressions, clicks, traffic, and all of the above for your competition. This helps direct your page speed improvement efforts to places with greatest benefit to your users and to your SERP rankings.

Improve Speed Index Metrics with Quattr
Improve Speed Index Metrics with Quattr

The eventual outcome of Quattr's powerful and unique processing is that you get a targeted list of optimization efforts. Along with it you also get insights and a confident measurement of how these efforts will impact your business goals and improve your business and website's ROI.

While we covered the Speed Index metric pretty much exclusively here. The Quattr platform helps scale your site's page speed optimization efforts. While also help you improve the overall core web vital scoring of your website.  

About The Author

Colton Miller

Colton Miller is the Sr. SEO Success Manager at Quattr. He has 12 years of experience in selling, servicing, supporting, and strategizing SEO. He has dealt with thousands of sites across hundreds of verticals and has also helped create and define scaled solutions for hundreds of thousands of SMBs and enterprise clients alike. Colton writes about SEO, search engine insights, and algorithm updates. He is always available for questions or comments on Twitter feel free to connect!

About Quattr

Quattr is an innovative and fast-growing venture-backed company based in Palo Alto, California USA. We are a Delaware corporation that has raised over $7M in venture capital. Quattr's AI-first platform evaluates like search engines to find opportunities across content, experience, and discoverability. A team of growth concierge analyze your data and recommends the top improvements to make for faster organic traffic growth. Growth-driven brands trust Quattr and are seeing sustained traffic growth.

Scale your Google Page Speed Optimization Efforts with Quattr

Test Drive Quattr

Ready to see how Quattr
can help your brand?

Try our growth engine for free with a test drive.

Our AI will analyze your website and provide you with insights on the top opportunities for your site across content, experience, and discoverability metrics that are actionable and personalized to your brand.