Page Speed Is Now More Important for SEO

Core Web Vitals are the speed metrics that are part of Google’s Page Experience signals used to measure user experience. The statistics measure the visual load with the greatest content paint (LCP), visual stability with cumulative layout shift (CLS) and interactivity with first input delay (FID

Page experience and the included Core Web Vital statistics will be officially used for page rankings in May 2021.

Source: Google

The easiest way to see the statistics for your site is with the Core Web Vitals report in Google Search ConsoleThe report makes it easy to see if your pages are categorized as ‘bad URLs’, ‘URLs in need of improvement’ or ‘good URLs’.

The report provides more detailed information about the specific issues and a list of affected pages.

Fast facts on Core Web Vitals

Fact 1: The statistics are split between desktop and mobile, but only mobile signals are used for page rankings. Google will switch to 100% mobile-first indexing in March, so it makes sense to use the mobile speed signals as the indexed pages will also be based on the mobile versions.

Fact 2: The data comes from the Chrome User Experience Report (CrUX), which records details of logged-in Chrome users. The metrics are rated at the 75th percentile of users, so if 70% of your users are in the ‘good’ category and 5% in the ‘need improvement’ category, your page will still be rated as ‘needs improvement’.

Fact 3: The stats are graded for every page, but if there isn’t enough data, John Mueller states that signals from sections of a site or the overall site can be used.

Fact # 4: With the addition of these new stats, AMP will be removed from the Top Stories on Mobile feature as a requirement. Since new stories don’t really contain data on the speed stats, it’s likely that the stats from a larger category of pages or even the entire domain will be used for this.

Fact 5: Single page applications do not measure some of the statistics, FID and LCP, via page transitions. We’ll talk about what those are in a moment.

Fact 6: The statistics can change over time, and the thresholds can change just as much. Google has already changed the metrics used for measuring speed in their tools over the years, as well as their thresholds for what is considered fast or not. It is very likely that this will all change again in the future. We even did some work last year to improve the previous stats, but we need to do some more work to improve the new stats.

Are Core Web Vitals important to SEO

To raise expectations, remember that there are over 200 ranking factors. I wouldn’t expect much improvement from improving Core Web Vitals. It’s not known how much they’ll affect rankings, but it’s probably not a strong signal, especially given that many of the page experience components have already been used by Google to determine rankings.

Let’s take a closer look at each of the web’s core vitals.

Components of Core Web Vitals

These are the three current components of Core Web Vitals:

  • Largest content paint (LCP
  • Cumulative Layout Offset (CLS
  • First entry delay (FID
  • Largest content paint (LCP) – loading

    LCP is the largest visible element loaded in the viewport.

    Source: web.dev/vitals

    The biggest element is usually a featured image or perhaps the

    and

    How to see LCP

    In PageSpeed ​​Insights, the LCP element is specified in the Diagnostics section. For the tested page it is LCP is our featured image on the blog post.

    Follow these steps in Chrome DevTools:

  1. Performance> check ‘Screenshots’
  2. Click on ‘Start profiling and reload page’
  3. LCP is on the timing chart
  4. Click on the node; this is the element for that LCP

Optimize LCP

With our LCP element on this and many other pages that are the featured image, we can probably improve this by preloading this image or possibly inserting the entire image to create the image along with the HTML code. Basically we want to load this image faster than we currently do.

Resources

Cumulative Layout Offset (CLS) – visual stability

CLS measures how elements move or how stable the page layout is. It takes into account the size of the content and the distance it moves. A major problem with the metric is that it continues to measure even after the page is first loaded. Google is receiving feedback on this particular metric, so we’ll likely see some changes to it in the future.

Source: web.dev/vitals

It can be annoying when you try to click on something on a page that scrolls and click on something you didn’t intend to. It happens to me all the time. I click on one thing and suddenly I click on an ad and not even on the same website. It’s frustrating as a user.

Common causes of CLS include:

  • Images without dimensions
  • Ads, embeds, and iframes without dimensions
  • Inject content with JavaScript
  • Allow fonts or styles in loading

How to see CLS

In PageSpeed ​​Insights, under Diagnostics, you will find a list of the elements that shift.

Using WebPageTestIn the filmstrip view, use the following options:

  • Highlight layout shifts
  • Thumbnail Size: Huge
  • Thumbnail Interval: 0.1 sec

Note how our fonts are reformatted between 5.1s – 5.2s, shifting the layout as our custom font is applied.

You may want to try it Layout shift GIF Generator

Smashing Magazine also had an interesting technique they shared, where they outlined everything with a 3px solid red line and a video of the page loading to identify where the layout shifts are happening.

Optimize CLS

What we want to do for our test page is preload our custom font, drop the custom font completely (questionable), or use a default font for the first page load time and only load our font when the next page loads. These have tradeoffs in branding, style, consistency, etc., and we’ll have to decide the best path to move on.

Resources

First entry delay (FID) – interactivity

FID is the time from when a user interacts with your page until the page is able to respond. You can also think of it as responsiveness. This does not include scrolling or zooming.

Example interactions:

  • clicking on a link or button
  • enter text in an empty field
  • by selecting a drop-down menu
  • by clicking a check box.

It can be frustrating to click on something and nothing happens on the page.

Source: web.dev/vitals

Not all users will interact with a page, so they may not have FID value. This is also why lab testing tools don’t have the value because they don’t interact with the page. Use total lockout time (TBT) instead.

Cause of FID

JavaScript competes for the main thread. There is only one main thread and JavaScript competes to perform tasks on it.

Source: https://web.dev/long-tasks-devtools

While a job is running, a page cannot respond to user input. This is the delay that is being felt. The longer the task, the longer the delay the user will experience. The pauses between tasks are the options the page has to switch to the user input task and respond to what they wanted to do.

Optimize FID

I don’t see any concerns for our site before FID, but generally you want to split up long tasks and defer any JavaScript that isn’t needed until later.

Resources

Tools for measuring Core Web Vitals

The difference between lab and field data is that field data looks at real users, network conditions, devices, caching, etc. And lab data is consistently tested against the same conditions in the hope that the test results are repeatable.

Field data

Lab data

I find the report in GSC because you can see the data of many pages at once, but the data is a bit delayed and on a 28-day moving average, so changes may take time to show in the report. In Chrome 88, Google Add Core Web Vitals directly in DevTools

You can also use the score weights for Lighthouse at any time and view the historical changes.

Final thoughts

You want to improve Core Web Vitals so that your users have a better experience. It remains to be seen what impact they will have SEO, but as I mentioned in my page speed article, they should help you capture more data in your analytics that “feels” like an increase.

Collaborate with your developers; they are the experts here. Page speed can be extremely complex. If you’re alone, you may have to rely on a plugin or service to handle it the same way WP Rocket or NitroPack.

Comments are closed.