Page Speed Experience

Getting to the core of Google’s Core Web Vitals

Updated 04/19/21: As of April 19th, 2021 Google has officially announced that it has pushed back the Page Experience update to mid-June 2021. And the Page Experience “won’t play its full role as part of those systems until the end of August.” Also, check out Google Search Console’s new Page Experience reporting which, “combines the Core Web Vitals report with other page experience signals.”

In November of 2020, Google publicly announced a forthcoming algorithm update that will affect websites world-wide. According to Google, the algorithm update will highlight search results that provide a great page experience.

A great page experience, according to Search Engine Land, is “how a user will perceive the experience of a specific web page.”

Several factors come into play when evaluating page experience including page load, how mobile-friendly the page is, and is there intrusive interstitials, and HTTPS (secure browsing).

Also included in Google’s overall evaluation of “Page Experience” are Core Web Vitals including loading, interactivity, and visual stability.

All of these factors are part of Google’s Page Experience. And according to Google, Page Experience signals will become part of Google’s search ranking algorithm in May 2021.

What are Google’s Core Web Vitals?

Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web. The Web Vitals initiative aims to simplify the landscape, and help sites focus on the metrics that matter most–the Core Web Vitals.

What do the Core Web Vitals Consist of?

Google’s Core Web Vitals consist of the following metrics (source Google PageSpeed Insights):

• Largest Contentful Paint (LCP): measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.
• First Input Delay (FID): measures interactivity. To provide a good user experience, pages should have a FID of less than 100 milliseconds.
• Cumulative Layout Shift (CLS): measures visual stability. To provide a good user experience, pages should maintain a CLS of less than 0.1.

For each of the above metrics, to ensure you’re hitting the recommended target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.

How do I know if my site is in the 75th percentile?

According to Google, the 75th percentile is selected so that developers (and SEOs) can understand the most frustrating user experiences on their site. These include the LCP, FID, and CLS. The First Contentful Paint (FCP) is not included in the CVW’s. I’ll explain that in a moment.

In the example below 2 out of the 3 CVW’s are not meeting the 75th percentile criteria (this is reflected in the green vertical bar).

An example of a website meeting the 75th percentile criteria

What about the First Contentful Paint (FCP)?

Though not considered as one of the CWV’s, the FCP is essentially a sum of all the parts included in the LCP, FID, and CLS. It’s a metric that measures the time from when the page starts loading to when any part of the page’s content is rendered on the screen including text, images, elements (<svg>), or non-white (<canvas>) elements.

Generally, the FCP will improve when the issues that appear to be affecting the Core Web Vitals (LCP – FID – CLS) are resolved.

The difference between Page Speed Score and Core Web Vitals 

First and foremost, you should strive to improve the website’s loading times as much as possible. However, getting a 100/100 in Google’s PSI isn’t a realistic goal and is most likely impossible. Also, hitting 100/100 does not guarantee a top spot in SERPs.

In fact, in the example above, the website that has achieved a 75th percentile score or above for all three CWVs still received a negative/failing mobile Page Speed Score.

Why is this so? There are 3 reasons why you need to take a step back when considering a website’s mobile Page Speed Score:

1. Mobile devices usually have slower processors
2. PageSpeed Insights (PSI) emulates the cellular network at a slower speed
3. Mobile devices have specific CSS rules (e.g. resized images, viewport size, etc.)

So it’s very important before you start fixing things to put all the data in context and establish goals on how to improve CWV scores.

The goals are to:

• Improve the overall performance of the site.
• Identify the page speed issues on the site.
• Optimize the site speed issues to decrease the actual and perceived loading times.

How to Improve the Overall Performance of the Website

The Webfor SEO Team uses other testing platforms–in addition to Google’s PSI–to help evaluate the overall performance of the website. The scores across the different tools won’t match exactly, which shows just how arbitrary these numbers can be.

But what the tools all have in common is that they help identify page speed and performance issues on the site. Webfor looks for issues that appear to occur pervasively across all testing platforms. Then, we determine the page speed and performance issues on the site that will provide the most value and how they can be optimized.

Page Speed Issues on the Site

Use Google data testing tools and other website testing platforms to pinpoint specific page speed and performance issues that are impacting Core Web Vitals in a negative way:

• Google Page Insights
• Google Search Console
• GTmetrix (other widely used page speed platforms are Pingdom, WebPageTest, and Uptrends)

Optimize the site speed issues to decrease the actual and perceived loading times

Perceived loading times

Realistically, there isn’t a speed testing tool that measures perceived performance. What you experience on your device can be drastically–or only slightly–different from another user’s experience. Google PSI hints at this metric and they call it the First Contentful Paint (FCP)–as described early in this post.

Actual speed loading times

Actual speed is the data we derive from using a variety of different page speed testing tools. Find the pervasive speed and performance issues across your testing tools, analyze them, and you’ve pinpointed the problems.

The most common issues that can affect perceived loading times–which in turn affect actual speed loading times are:

• Missing activity or progress indicators.
• Neglecting to load above-the-fold content first.
• Not using progressive and lazy loading.
• No preloaded content.
• Forgetting to predict the user’s next action.

WP Rocket (also a very helpful plugin if you’re running WordPress) has written an insightful piece about The Psychology of Time: Perceived vs Actual Loading Time.

Google PageSpeed Insights Page Speed Score

Succinctly put, “PageSpeed Insights analyzes the content of a web page, then generates suggestions to make that page faster.”

And it’s easy to use. Just put your URL in and click on “Analyze”.

Now that you’ve entered your URL, it’s time to review the breakdown of your results.

First and foremost, PSI will give your website a Page Speed Score that is from 0 – 100. A score of 90 is good. 50 to 90 needs improvement. Below 50 is considered poor.

But where do these numbers come from? Many developers I’ve talked with think these numbers are misleading and somewhat unattainable considering the complexity of coding that goes into website development these days. The SEOs responsibility is to analyze and interpret these numbers so a Developer can understand what to improve and why.

At Webfor our goals are to develop SEO strategies that produce value for Webfor clients. We’re experienced long time users of Google search products, and we know there’s value behind the numbers. The challenge is to interpret and articulate what the numbers mean in regards to page speed. And page speed is a significant Google search ranking factor.

How to interpret Google’s Page Speed Score

The PSI Page Speed Score–the overall page performance–uses Chrome Lighthouse to collect and analyze lab data about the page. Lab data means the data is collected from a controlled environment vs field data. Field data is the data PSI collects over a 28 day collection period that simulates an average mobile experience.

The lab data is broken down into 6 different page speed performance values and is calculated using the Lighthouse Scoring Calculator Results. This is how Lighthouse comes up with the overall score (see below).

The above screenshot is the sum of all the parts that go into the overall page performance score–which is currently at an 8 on this client’s website. The above “calculator” can be used to demonstrate and display a better (or poorer) page performance score if you move the value slides back-and-forth.

By manually moving the calculator’s value sliders, you can see how we can improve the PSI to 75 or any other number. Please note the color coding to the left of each Core Web Vital (CWV) and/or page speed issue. The color is orange which denotes an average score. The color green would indicate a good score and red would indicate poor performance.

Within each one of the CWV’s and/or page speed issues, Google’s PSI will provide recommendations and potential solutions to improve all of the aforementioned metrics. However, it’s not realistic to think you can accomplish a “good” or perfect score on all of these metrics above.

Using the Lighthouse Scoring Calculator as a barometer we can use the details in PSI and the other aforementioned website testing tools and begin pinpointing the issues. The solution is to find the most common page speed issues by cross referencing other page speed tools.

Other Page Speed Testing Tools

Google Search Console

Directly tied into the PSI results is Google Search Console (GSC). GSC provides a broad picture of the issues having to do with page speed and performance. Nonetheless, it does help narrow down CWV issues that are performing “Poor” or “Need improvement” (see screenshot below).

For this client, there are 257 URLs reported as “Poor” and are affecting the Cumulative Layout Shift (CLS) score. The CLS measures visual stability. To provide a good user experience, pages should maintain a CLS of less than 0.1. The site’s CLS is more than 0.25 (mobile).

GSC also provides sample URLs–with Similar URLs–that all appear to be affecting the CLS score (see screenshot below).

What are Similar URLs?

According to GSC “Each issue is assigned to a group of URLs that have similar content and resources. This is because it is assumed that any performance issues in these similar pages may be due to the same underlying problem (such as an overly large image, or a common slow-loading tab set display). The URL shown in the Examples table is one URL from the group. “Similar URLs” are other URLs in the affected group.”

So the good news is that when the performance issue is resolved, the other affected URLs will collectively improve.

The other “Poor” set of URLs found in GSC are affecting the Largest Contentful Paint (LCP) score. The LCP measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading. This client’s LCP is longer than 4 seconds (mobile).

It’s safe to say Core Web Vitals in GSC will produce a wide variety of results depending on the website you’re evaluating. The takeaway here is to be sure you evaluate and analyze Google GSC’s Core Web Vitals because they are tied in directly to Google PSI.

GTmetrix

Your results may vary. But more-often-than-not GTmetrix (and other page speed tools) will appear to have a better performance score than PageSpeed Insights. Here’s a very common example of the contrast between GTmetrix and Google PSI.

Page Speed Score results of the same website in PSI!

Based on the GTmetrix Grade, visitors using a Chrome browser on desktop are experiencing an above average user experience and page speed loading times. But, based on the PSI results, the same website receives a very poor Page Speed Score.

But why are PSI scores–oftentimes–not as good as other page speed tools? Google uses Lantern technology. In brief, Lantern is the technology used to determine page performance on mobile–an average user experience.

In contrast, GTmetrix loads the website in a real browser (Chrome) in desktop view using Lighthouse and consistent hardware across all locations. Therefore, GTmetrix may show better results than PSI. But the results are not representative of an average user experience.

If you’re unfamiliar with interpreting and identifying page speed and performance issues using GTmetrix, WP Rocket has an excellent tutorial on how to Read GTmetrix Reports and Analyze Your Site’s Speed.

We’ve identified the page speed issues, now what?

Now that we’ve run down the rabbit hole that is page speed and performance issues, let’s review our goals.

The goals are to:

• Improve the overall performance of the site.
• Identify the page speed issues on the site.
• Optimize the site speed issues to decrease the actual and perceived loading times.

Notice that these goals are not to improve the Page Speed Score numbers, they’re to improve the performance and page speed of the site. By resolving these page speed and performance issues, the Core Web Vitals–a vital part of Google’s overall evaluation of Page Experience–can be improved to the recommended 75th percentile.

Most importantly, the forthcoming Page Experience algorithm update in May 2021 isn’t just about improving numbers. It’s about Page Experience. And page experience also includes producing good quality content for your website too.

Runnin’ down the Rabbit Hole

In the past few months, the Webfor SEO Team has been tasked to review several client sites that have severe page speed issues due to a variety of reasons. We’re rapidly producing recommendations docs for clients, seeking advice from Webfor’s stellar Dev Team, and running down the Page Experience rabbit holes like Alice in Wonderland on energy drinks.

It’s safe to say, you’ll find your own rabbit holes while researching this topic. Here are some very useful rabbit hole reference links that are very helpful.

“Remember what the dormouse said, feed your head, feed your head…”

• About Google’s PageSpeed Insights
• Web.Dev’s Defining the Core Web Vitals metrics thresholds
• Web Fundamentals Loading Third-Party JavaScript
• Google PageSpeed Insights: The Truth About Scoring 100/100