Categories
SEO

Core Web Vitals: Page Speed is More Important for SEO than Ever

The speed metrics that are part of Google’s Page Experience signals used to assess user experience are known as Core Web Vitals. Visual load is measured by Largest Contentful Paint (LCP), visual stability is measured by Cumulative Layout Shift (CLS), and interactivity is measured by First Input Delay (FID).

The Core Web Vitals report in Google Search Console is the simplest way to see your site’s metrics. You can quickly determine if your pages are classified as “bad URLs,” “URLs that need improvement,” or “healthy URLs” using the study.

Quick facts about Core Web Vitals

Fact 1: While there are metrics for both desktop and web, only mobile signals will be used to rate sites. Since Google will move to a 100 percent mobile-first indexing in March, it makes sense to use mobile speed signals because the indexed pages will be based on the mobile versions as well.

Fact 2: The data comes from the Chrome User Experience Report (CrUX), which collects information from Chrome users who have opted in. The metrics will be evaluated at the 75th percentile of users, so if 70% of your users are in the “healthy” category and 5% are in the “need improvement” category, your page will still be considered “need improvement.”

Fact 3: Metrics will be evaluated for each page, but if there isn’t enough data, signals from parts of a site or the whole site can be used, according to John Mueller.

Fact 4: With the inclusion of these new metrics, the Top Stories feature on mobile would no longer need AMP. Since new stories will lack data on speed metrics, it’s possible that metrics from a broader category of websites, or even the entire domain, will be used.

Fact 5: A couple of the metrics, FID and LCP, are not measured across page transitions in single page applications. In a moment, we’ll go over what those are.

Fact 6: The metrics, as well as the thresholds, can change over time. Over the years, Google has updated the metrics for calculating speed in their software, as well as the thresholds for what is considered quick. It’s very likely that something will change again in the future. In reality, we worked on improving the previous metrics last year, but we’ll have to do it again this year to improve the new ones.

Are Core Web Vitals important for SEO?

To give you a sense of what to expect, there are over 200 ranking variables. Improvements to Core Web Vitals are unlikely to yield significant results. It’s unclear how much they’ll affect rankings, but it’s unlikely to be a significant factor, given that Google already uses many of the page experience components to decide rankings.

Let’s take a closer look at each of the main web essentials.

Components of Core Web Vitals

Here are the three current components of Core Web Vitals:

Largest Contentful Paint (LCP) — loading

The largest visible element loaded in the viewport is LCP.

The largest element is typically a featured image or the h1> tag, but it may be any of the following:

The img> element is a type of image.

within an svg> element, an image> element

Background image loaded with the url() function within a video> element

Text, svg, and video blocks can be added in the future.

How to see LCP

The LCP factor will be defined in the Diagnostics section of PageSpeed Insights. The LCP is our featured image on the blog post for the checked page.

Follow these steps in Chrome DevTools:

  • Check “Screenshots” under “Performance.”
  • To begin profiling, click the ‘Start profiling and reload page’ button.
  • On the timing graph, LCP appears.
  • Select the node; this is the LCP element.
  •  

Optimizing LCP

Since our LCP element is the featured image on this and several other websites, we can probably improve this by preloading the image or possibly inlining the entire image to download the image along with the HTML code. Basically, we want to make this picture load faster than it is now.

Resources

Cumulative Layout Shift (CLS) — visual stability

CLS is a metric that measures how elements move around on a page and how stable the layout is. It considers the scale of the material as well as the distance it travels. One big flaw in the metric is that it continues to monitor after the page has loaded. Google is listening to user reviews on this measure, so it’s likely to improve in the future.

If you want to click something on a page that changes and you end up clicking on something you didn’t want to, it can be aggravating. It happens to me on a regular basis. I click on one thing, and the next thing I know, I’m clicking on an ad on a different website. As a customer, it’s aggravating.

CLS can be caused by a variety of factors, including:

  • Images with no measurements
  • Without dimensions, ads, embeds, and iframes
  • Using JavaScript to inject material and applying fonts or styles later in the load
  •  

How to see CLS

Under Diagnostics in PageSpeed Insights, you’ll find a list of the elements that are changing.

WebPageTest is a tool for testing web pages. Using the following choices in Filmstrip View:

Changes in Layout are highlighted.

  • Thumbnail Size: XXXXXXXXXXXXXXXXX
  • 0.1 second Thumbnail Interval
  • Take note of how our font restyles between 5.1s and 5.2s, causing the layout to change as our custom font is used.

Smashing Magazine also demonstrated an interesting strategy in which they used a 3px solid red line to outline all and captured a video of the page loading to identify where layout shifts are occurring.

Optimizing CLS

Preloading our custom font, dropping the custom font entirely (unlikely), or using a default font for the initial page load and then loading our font on subsequent page loads are all options for our test page. There are trade-offs in terms of branding, style, continuity, and so on, and we’ll have to figure out which direction is best going forward.

Resources

First Input Delay (FID) — interactivity

The FID is the time it takes for a user to communicate with your page before it can react. It’s often referred to as responsiveness. Scrolling and zooming are not included.

  • Clicking on a connection or a button is an example of an interaction.
  • selecting a drop-down menu pressing a checkbox inputting text into a blank area

It’s aggravating when you want to select something and nothing happens on the page.

Since not all users can communicate with a website, the FID value may be missing. This is also why, since they don’t communicate with the page, lab test tools would be of no use. Instead, use Total Blocking Time (TBT).

Cause of FID

JavaScript is vying for control of the main thread. There is only one main thread, and JavaScript competes for space on it to run tasks.

A page cannot respond to user feedback while a task is running. This is the time difference that is felt. The user will encounter a longer delay the longer the task is. The opportunities for the page to turn to the user input task and react to what they wanted to do are the breaks between tasks.

Optimizing FID

I don’t see any issues with FID on our platform, but you can break up long tasks and postpone any JavaScript that isn’t needed until later.

Resources

Tools for measuring Core Web Vitals

The distinction between lab and field data is that field data considers actual users, network conditions, computers, caching, and so on, while lab data is checked repeatedly under the same conditions in the hopes of repeatable performance.

I like the GSC report because it lets you see data for several pages at once, but the data is a little behind and is based on a 28-day rolling average, so improvements which take a while to appear in the report. Google has added Core Web Vitals to DevTools in Chrome 88.

You can also see the historical improvements in the scoring weights for Lighthouse at any time.

Final thoughts

You want to enhance Core Web Vitals in order to have a better experience for your customers. It’s unclear how they’ll affect SEO, but as I stated in my page speed post, they should help you collect more data in your analytics, giving the impression of an increase.

Work with your developers; they’re the ones who know what they’re doing. Page speed is a tricky topic. If you’re on your own, you can need to use a plugin or service like WP Rocket or NitroPack to handle this.

Need help with getting your business found online? Stridec is a top SEO agency in Singapore that can help you achieve your objectives with a structured and effective SEO programme that will get your more customers and sales. Contact us for a discussion now.