Page Speed Is Now More Important for SEO

0
13
Page Speed Is Now More Important for SEO

Core Web Vitals are the speed metrics that are part of Google’s Page Experience Signals that are used to measure user experience. The metrics measure the visual load with Largest Contentful Paint (LCP), visual stability with cumulative layout shift (CLS) and interactivity with the first entry delay (FID).

The page experience and the included Core Web Vital metrics will be officially used for ranking pages in May 2021.

Source: Google

The easiest way to see the metrics for your website is from the Core Web Vitals report in the Google Search Console. The report makes it easy to see if your pages are rated as “Bad URLs”, “URLs Needed Improvement”, or “Good URLs”.

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

Brief facts about Core Web Vitals

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

Fact 2: The data comes from the Chrome User Experience Report (CrUX), in which data from activated Chrome users is recorded. 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 “needs improvement” category, your page will still be rated as “needs improvement”.

Fact 3: The metrics are scored for each side. However, if there is not enough data, John Mueller indicates that signals from portions of a site or the entire site can be used.

Fact 4: With the addition of these new metrics AMP will be removed as a requirement from the Top Stories feature on mobile devices. Since new stories do not contain data on the speed metrics, it is likely that the metrics of a larger category of pages or even the entire domain will be used for it.

Fact 5: Single page applications don’t measure some of the metrics. FID and LCPthrough side transitions. We’ll talk about what that is in a moment.

Fact 6: The metrics can change over time, and the thresholds can change too. Google has already changed the metrics used to measure speed in its tools over the years, as well as the thresholds for what is or is not considered fast. It is very likely that this will change again in the future. In fact, we did some work last year to improve the previous metrics, but we need to do some work again to improve the new metrics.

Are Core Web Vitals important to SEO?

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

Let’s take a closer look at the most important web vitals.

Components of Core Web Vitals

Largest content color (LCP) – Loading

LCP is the largest visible element loaded into the viewport.

Source: web.dev/vitals

The biggest element will usually be a featured image, or maybe that

Day, but could be one of these:

  • element
  • Element in one element
  • The picture in one
  • Background image loaded with the url () function
  • Blocks of text

and

As you can see LCP

In PageSpeed ​​Insights, the LCP The item is specified in the Diagnostics section. For the tested page, the LCP is our picture in the blog post.

In Chrome DevTools, do the following:

  1. Performance> Activate “Screenshots”.
  2. Click Start Profiling And Reload Page.
  3. LCP is on the timing diagram
  4. Click on the node. This is the item for LCP

Optimize LCP

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

resources

Cumulative layout shift (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 metric is that it continues to be measured even after the page loads for the first time. Google is taking 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 something on a shifting page and end up clicking something that you didn’t intend. It happens to me all the time. I click on one thing and all of a sudden I click on an ad and not even on the same website. As a user, it’s frustrating.

Common causes of CLS lock in:

  • Images without dimensions
  • Ads, embeds, and iframes without dimensions
  • Injecting content with JavaScript
  • Applying fonts or styles later in the load

As you can see CLS

In PageSpeed ​​Insights, see Diagnostics for a list of items that are being moved.

Using WebPageTest. In Filmstrip view, use the following options:

  • Select layout shifts
  • Thumbnail size: Huge
  • Thumbnail interval: 0.1 sec

Notice how our fonts are reformatted between 5.1 and 5.2 seconds, which changes the layout when our custom font is applied.

You may want to try Layout Shift GIF Generator.

The Smashing Magazine also had an interesting technique where they outlined everything with a solid 3 pixel red line and recorded a video of the page loading to see where layout shifts were happening.

Optimize CLS

For our test page, we may want to preload our custom font, delete the custom font entirely (this will be doubtful), or use a default font for the initial page load and only load our font on subsequent page load. These have tradeoffs in terms of branding, style, consistency, etc., and we have to decide which path is best.

resources

First entry delay (FID) – interactivity

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

Example interactions:

  • Click a link or button
  • Enter text in an empty field
  • Selection of a drop-down menu
  • Click a check box.

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

Source: web.dev/vitals

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

Cause for 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

A page cannot respond to user input while a task is in progress. This is the delay that is felt. The longer the task, the longer the delay for the user. The pauses between tasks are the ways the page has to switch to the user input task and act on what it wanted to do.

Optimize FID

I don’t see any concerns for our website for FIDIn general, however, you want to split up long tasks and move JavaScript that is not needed until later.

resources

Tools for measuring core web vitals

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

Field data

Laboratory data

I like the report in GSC You can view the data for many pages at once, but the data is somewhat lagged and is a moving average of 28 days. As a result, it may take some time for changes to appear in the report. In Chrome 88, Google Core adds Web Vitals right into DevTools.

You can also find the rating 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 SEOAs I mentioned in my page speed article, they should help you capture more data in your analysis, which feels like an increase.

Collaborate with your developers. You are the experts here. Page speed can be very complex. When you’re alone, you may have to rely on a plugin or service to handle this WP Rocket or NitroPack.