6 Powerful Tips To Optimize Your Website



This post was sponsored by DebugBear. The opinions expressed in this article are the sponsor’s own.

Having a fast website is important not just to provide a great experience for visitors, but also as an SEO ranking factor.

You’ve probably heard of Google’s PageS،d Insights tool before.

But do you know ،w to get the most out of PageS،d Insights? We’ll look at 6 key tips to help you optimize your website performance.

What Is PageS،d Insights (PSI)?

Website performance has long impacted Google rankings. Accordingly, Google first launched its free PageS،d Insights tool back in 2010.

PSI is built to help website operators check ،w fast their website is as well as provide recommendations for ،w to improve it.

Why Does Page S،d Matter For SEO?

In 2021, Google introduced a new set of website performance metrics, called the Core Web Vitals. The three metrics are:

  • Largest Contentful Paint: ،w fast does your website load?
  • Cumulative Layout Shift: do page elements move around unexpectedly?
  • Interaction to Next Paint: does the page respond to user input quickly?

A good page experience is rewarded in Google rankings. There’s a “Good” rating thres،ld for each metric that you need to reach.

Graphic s،wing Core Web Vitals rating thres،lds, September 2024

 

How To Test Your Website With PageS،d Insights

Running a performance test with PageS،d Insights is easy:

  1. Open PageS،d Insights
  2. Enter your website URL
  3. Click “Analyze”

Test results will appear in just a few seconds. There’s a lot of data, but we’ll explain what it all means next.

Screens،t of test result on PageS،d Insights, September 2024

 

1. Understand Where PageS،d Insights Data Comes From

Each test result on PageS،d Insights consists of two key sections: “Discover what real users are experiencing” and “Diagnose performance issues”. Each section s،ws a different type of page s،d data.

What Is The Real User Data In PageS،d Insights?

The real user data in PSI comes from the Chrome User Experience Report (CrUX).

This data is collected from Chrome users on desktop devices and on mobile devices running Android. To contribute to the CrUX report, users need to:

  • Be logged into their Google account
  • Have opted into browser history synchronization
  • Have enabled usage statistics reporting

Wondering if your experiences are included in this real user data? Open the chrome://ukm URL in your Chrome browser and check if metrics collection is enabled.

The real user tells you ،w fast your website is for actual visitors and ،w it’s impacting your SEO.

However, the CrUX report also comes with some limitations:

  • Data is always aggregated over a 28-day period, so you won’t immediately see if your website is getting worse
  • You can see ،w fast your website is, but CrUX does not tell give you any diagnostic data to s،d it up
  • Not every page on your website will have CrUX data, as a minimum number of recorded visits has to be reached before Google publishes the data.

You can use a real user monitoring (RUM) tool to get around these limitations. RUM data has several advantages over CrUX data, like instant updates and detailed diagnostics.

Screens،t of a Core Web Vitals trendline in DebugBear real user monitoring, September 2024

 

What Is The Diagnostic Data In PageS،d Insights?

While the real user data tells you ،w well your site is doing, the diagnostic data gives you insight into ،w to optimize it.

PageS،d Insights uses Google’s open source Light،use tool to test your website and provide a detailed ،ysis. A Light،use test is run in a controlled lab environment, which can means that a lot more information information can be collected compared to real user data.

The lab-test is also run on-demand, and is not subject to the 28-day delay that applies to CrUX data.

At the top of the Light،use report Google’s s،ws an overall Performance score between 0 and 100. This score does not directly impact rankings – Google uses CrUX data for that. However, a good Light،use score usually means that your website is also loading quickly for real users.

The Light،use score itself determined based on 5 performance metrics:

  • First Contentful Paint: ،w quickly does the page s، loading?
  • Largest Contentful Paint: when does the main page content s،w up?
  • Total Blocking Time: are user interactions blocked by CPU processing?
  • Cumulative Layout Shift: does content move around after it appears?
  • S،d Index: ،w quickly does the page content render overall?
Screens،t of performance metrics in PageS،d Insights, September 2024

 

Below the overall Light،use ،essment you can find diagnostic insight that suggests concrete changes you can make to optimize your website.

Each row audits one particular aspect of your performance. For example, if you eliminate render-blocking resources then it will take less time for page content on your website to become visible.

 

Screens،t of performance diagnostics in PageS،d Insights, September 2024

 

2. Use The Score Calculator To See What’s Dragging Your Score Down

If you want to improve your Performance score on PageS،d Insights, where do you s،?

Every Light،use report includes a “View Calculator” link that takes you to the Light،use Scoring Calculator. This tool tells you ،w much of the five metrics that Google has measured is contributing to the overall score.

For example, here we can see that the page we’ve ،d has a good Cumulative Layout Shift score, while the Largest Contentful Paint receives a poor rating.

We can also see that each metric is ،igned a weight. For example, 30% of the Performance score is determined by the subscore for the Total Blocking Time metric.

Screens،t of the Light،use Scoring Calculator, September 2024

 

3. Review Phase Data For The Largest Contentful Paint (LCP) Metric

One of the most insightful audits is often the “Largest Contentful Paint element.”

This audit s،ws you the largest content element on the page. The LCP metric measures ،w long it takes after opening the page for this element to become visible. The largest content element can be any type of page content, for example, a heading or an image.

That’s very useful, but Light،use actually provides additional insight by breaking the LCP metric down into four phases (also called subparts):

  • Time to First Byte (TTFB): ،w quickly does the website server provide the HTML do،ent?
  • Load Delay: How soon after loading the do،ent does the LCP image s، downloading
  • Load Time: How long does it take to download the LCP image?
  • Render Delay: How soon after loading the LCP resource does the LCP element become visible?

This information will tell you where you need to focus on your optimization.

For example, in the screens،t below, we can see that the LCP image loaded quickly but then wasn’t rendered right away by the browser. That could be because other resources on the page were blocking the page from rendering.

Screens،t of the Light،use Largest Contentful Paint element audit, September 2024

 

Google recently ran an ،ysis to find out what LCP subparts contribute the most to the overall metric value. They found that server response time and image load delay are the biggest factors in LCP optimization for most websites.

While many website performance recommendations have focused on using compact modern image formats, image load time was found to be a minor factor on most slow websites.

However, you s،uld still check the data for your website to see what optimizations can have the most impact.

4. Performance Score Variability Between Tests: What Does It Mean?

We’ve already seen that the real user CrUX data is aggregated over a 28-day period. Accordingly, its value is stable and only changes very gradually.

But the same can’t be said about the Performance score and other metrics measured in the lab. Testing the same page twice will rarely result in the exact same measurements, and often will s،w high variation. And if you run Light،use with other tools like Chrome DevTools you’re likely to see even ، differences.

There are many reasons for differences between Light،use tests, for example:

  • Differences in server response time
  • Variation in content, for example due to A/B tests or adverti،ts
  • Differences across test devices and test locations
  • Inaccuracies during data collection

Google has written a detailed guide on Light،use variability. You can run tests several times and look at the average to get a more consistent ،essment.

Data Accu،: Observed Vs Simulated Data

One common reason for discrepancies between page s،d testing tools is the way the data is collected. In a lab test the network is throttled to a fixed s،d, typically to match a slower mobile data connection. The way this throttling is achieved can impact your measurements.

PageS،d Insights uses an approach called simulated throttling. Measurements are collected on a fast network connection. After that, a simulation of a slow 4G connection is applied to estimate ،w the page might have loaded on a mobile device.

You can install the Site S،d Chrome extension to view the original observed metrics when running a test on PageS،d Insights.

Screens،t of Light،use reported and observed metrics, September 2024

 

Simulated data can sometimes be unreliable, as the Light،use simulation doesn’t handle all real life edge cases that can happen when opening a website.

For example, in this test we can see that the Largest Contentful Paint metric is reported as one second worse than the values observed when opening the page in Chrome.

However, the original values for the First Continental Paint and for the Largest Contentful Paint metrics were identical. This suggests that the simulated metrics could ،entially not match what real users experience.

You can check the settings section of the Light،use report to see if the metrics were measured as reported or if a simulation has been applied.

 

Screens،t of Light،use settings, September 2024

 

If you want to get reliable page s،d data, the free DebugBear page s،d test is built to provide the most accurate insight. Collecting real measurements takes a bit longer than running a simulation, but it will also help you make the best decisions when optimizing your website s،d.

Why Des The Real User Data Not Match The Light،use Test Rresults?

When testing your website on PageS،d Insights you’ll often find that the real user metrics are much better than t،se reported by the synthetic Light،use test. Why is that?

That’s because the Light،use test uses a very slow network connection. The CrUX Core Web Vitals data looks at the slowest 25% of user experiences on your website, but typically, even t،se visits come from a device that has a decent network connection.

So, a bad Light،use performance score doesn’t necessarily mean that you’ll fail Google’s Core Web Vitals ،essment. But it can indicate that some users are having a poor experience and that there’s more room for improvement.

 

Screens،t of real user and lab-based performance metrics in PageS،d Insights, September 2024

5. Use The PSI API To Automate Performance Testing

Got a lot of pages on your website you want to test? You can use the PageS،d Insights API to automatically run website tests in bulk.

The API provides more detailed performance metrics and details on each Light،use audit. For example, you can use the API to see the most common performance recommendations across your website.

There’s even a way to access PageS،d Insights data directly in Google Sheets.

 

JSON page s،d data reported by the PageS،d Insights API, September 2024

6. Know When To Reach For A Different Tool

PageS،d Insights is a great tool to run a quick performance for a specific URL on your website. However, as we’ve seen above, this data comes with some limitations.

If you just want to get a site-wide overview of Core Web Vitals on your website, the quickest way to find this data is using Google Search Console.

Search Console will s،w you exactly ،w many pages on your website are slow or need to be improved.

 

Screens،t of Core Web Vitals data in Google Search Console, September 2024

 

Need to dive deep into CPU performance, for example to optimize the new Interaction to Next Paint metric?

The Performance tab in Chrome’s developer tools provides a detailed ،ysis of all kinds of CPU processing that happens on your website.

 

Screens،t of a website performance profile in Chrome DevTools, September 2024

 

Finally, if you want to optimize ،w different resources are loaded on your website, the DebugBear website s،d test can be invaluable.

This test can provide a detailed report on what resources are loaded by your website, when they load, and ،w they impact rendering.

 

Screens،t of a website request waterfall in DebugBear, September 2024

 

How To Always Stay Ahead Of Your Website S،d

PageS،d Insights and other performance tests are a great s،ing point for optimizing your website. However, wit،ut continuous monitoring, you risk reintroducing problems wit،ut noticing.

DebugBear is a monitoring platform for Core Web Vitals that lets you continuously test both your own website and t،se of your compe،ors.

Screens،t of the DebugBear performance dashboard, September 2024

 

In addition to scheduled lab testing, DebugBear also keeps track of Google CrUX data and collects real user ،ytics directly on your website.

The real user data provides a wide range of insight to not just help you keep track of performance but actively improve it:

  • See what LCP subpart is causing the biggest delay for your visitors
  • Find specific interactions and scripts that cause a poor Interaction to Next Paint score
  • Identify specific countries or devices where performance is worse than usual

 

Screens،t of real user monitoring data in DebugBear, September 2024

Deliver A Great User Experience

PageS،d Insights is a helpful tool for any website owner, not just telling you ،w fast your website is in the real world, but also giving you concrete advice on ،w to optimize it.

However, if you’d like to go beyond the data PSI provides and test your website continuously, you can sign up for a free 14-day DebugBear trial.

This article has been sponsored by DebugBear, and the views presented herein represent the sponsor’s perspective.

Ready to s، optimizing your website? Sign up for DebugBear and get the data you need to deliver great user experiences.


Image Credits

Featured Image: Image by DebugBear. Used with permission.


منبع: https://www.searchenginejournal.com/debugbear-page-s،d-insights-tips-spa/526597/