A Technical SEO Guide to Advanced Core Web Vitals Optimization

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on reddit
Share on email

SEOs are aware of the importance of web pages to their clients’ businesses, and there has been a recent surge in interest. This piece provides an introduction to search engine optimization from the perspective of technical SEO, with more detailed explanations for users who want deeper knowledge about how specific metrics like page load speed or backlink analysis work.

The “core web vitals guide” is a technical SEO guide to advanced core website optimization. It includes information on how to make sure your website is optimized for search engines, and how to find the right keywords that will help you rank higher in Google.

A Technical SEO Guide to Advanced Core Web Vitals Optimization

Editor’s note: As the year draws to a close, we’re counting down the top 12 most popular and useful expert posts on SagaReach Marketing this year.

Our editorial staff selected this collection based on the performance, usefulness, quality, and value provided for you, our readers.

We’ll reprint one of the finest articles of the year every day until December 24th, beginning with No. 12 and going down to No. 1. Today, we begin our countdown with our No. 6 column, which was first published on April 26, 2021.

Jamie Indigo’s in-depth technical SEO tutorial on advanced Core Web Vitals garnered positive feedback from readers. It’s jam-packed with information and suggestions for diagnosing, measuring, and improving site performance in terms of user experience.

Jamie, you did an amazing job on this! We are grateful for all of the excellent material you continue to provide to SagaReach Marketing.

Enjoy!


Good online experiences are important to real people. So, how does it work in practice?

Advertisement

Continue reading below for more information.

According to a recent research mentioned by Google in a blog post about Core Web Vitals, mobile web users only focus on the screen for 4-8 seconds at a time.

Reread what you just read.

You just have 8 seconds to present engaging material and persuade a user to perform a task.

Start with Core Web Vitals (CWV). These three indicators are used to assess how well a site performs in terms of user experience. The measurements were introduced by the open-source Chromium project in early May 2020, and they were quickly implemented across Google products.

What criteria do we use to evaluate success in user-centric metrics?

  1. Is it starting to load?
  2. Is it possible for me to interact?
  3. Is it stable from a visual standpoint?

Core Web Vitals is a metric that measures how long it takes to finish the script functions required to paint the information above the fold. A 360 by 640 viewport serves as the stage for these Herculean undertakings. It’s small enough to fit in your pocket!

Advertisement

Continue reading below for more information.

This war-drum for unpaid tech debt is a boon to many product owners and tech SEO specialists who have been stymied by new features and flashy baubles.

Is this going to be Mobileggedon 4.0 with the Page Experience update?

Most likely not.

Users are 24 percent less likely to leave page loads when your page passes CWV inspections. These efforts help all sources and mediums, as well as actual people.

The New Page Experience

Despite the hype, CWV will be used as part of a ranking signal. The Page Experience Ranking, which will be phased in from mid-June through August 2021, will be made up of:

  1. The essentials of the internet.
  2. Mobile-Friendly.
  3. Browsing in a secure manner.
  4. HTTPS.
  5. There are no intrusive interstitials in this game.

The distribution will be incremental, according to updated instructions, and “sites should not anticipate major changes.”

What you should know about the update:

  • Each URL’s Page Experience is assessed.
  • The page is designed to be seen on a mobile device.
  • For Top Stories carousels, AMP is no longer necessary.
  • It is not necessary to pass the CWV in order to feature in the Top Stories carousels.

In Search Console, there’s a new page experience report.

A Page Experience report has been added to Search Console. The new resource provides data from the last 90 days.

A-Technical-SEO-Guide-to-Advanced-Core-Web-Vitals-Optimization

A URL must fulfill the following requirements to be considered “Good”:

  • In the Core Web Vitals assessment, the URL is rated as Good.
  • According to the Mobile Usability assessment, the URL has no difficulties with mobile usability.
  • There are no security problems with the website.
  • HTTPS is used to serve the URL.
  • There are no concerns with the site’s Ad Experience, or the site was not tested for Ad Experience.

High-level widgets connect to reports for each of the five “Good” criteria in the new report.

1639891925_786_A-Technical-SEO-Guide-to-Advanced-Core-Web-Vitals-Optimization

Diagnosing & Implementing CWV Improvements Workflow

First and foremost, there is a crucial distinction to be made between data collected in the field and data collected in the lab.

Advertisement

Continue reading below for more information.

Field data is performance data gathered from real-world page loads seen by your visitors. Field Data is also referred to as Real User Monitoring.

Field Data generated by the Chrome User Experience Report will be used in Core Web Vitals evaluations and the Page Experience Ranking Signal (Crux).

Which Chrome Users Are Included In The User Experience Report?

Crux data is compiled from users that match three requirements:

  1. The user agreed to have their browsing history synced.
  2. The user hasn’t created a Sync pass.
  3. The user has enabled use statistics reporting.

Crux is your go-to resource for Core Web Vitals Assessment information.

Crux data may be accessed using Google Search Console, PageSpeed Insights (page-level), the Public Google BigQuery project, or a Google Data Studio origin-level dashboard.

What makes you think you’d use anything else? CWV Field Data, on the other hand, is a limited collection of metrics with limited debugging capabilities and data availability constraints.

Advertisement

Continue reading below for more information.

Why isn’t data from Crux available on my page?

1639891926_413_A-Technical-SEO-Guide-to-Advanced-Core-Web-Vitals-Optimization

“The Chrome User Experience Report does not have adequate real-world performance data for this website,” you may notice while evaluating your page.

Crux data is anonymised, thus this is the case. There must be enough page loads to report without the potential of identifying an individual user.

Field data is ideal for identifying Web Core Vitals, while lab data is best for diagnosing and QAing them.

Advertisement

Continue reading below for more information.

With end-to-end insight and comprehensive visibility into UX, Lab Data helps you to troubleshoot performance. This simulated data is acquired in a controlled environment with specified device and network parameters, thus the name “lab.”

PageSpeed Insights, web.dev/measure, Chrome DevTools’ Lighthouse panel, and Chromium-based crawlers like a local NodeJS Lighthouse or DeepCrawl may all provide lab data.

Let’s have a look at how a workflow works.

1. In Search Console, identify issues with Crux data grouped by behavior patterns.

To find groupings of sites that need care, start with Search Console’s Core Web Vitals report. This data collection is based on Crux data, and it does you the favor of grouping sample URLs together based on behavior patterns.

If you resolve the fundamental problem on one page, you’ll probably be able to repair it on all pages that have the same CWV problem. Typically, a template, CMS instance, or on-page element will share similar difficulties. GSC will organize your items for you.

Concentrate on mobile data, since Google is transitioning to a Mobile-First Index and CWV will have an impact on mobile SERPs. Prioritize your efforts according to the amount of URLs that have been affected.

1639891926_905_A-Technical-SEO-Guide-to-Advanced-Core-Web-Vitals-Optimization

To view examples of URLs that show the same behavior patterns, click into an issue.

Advertisement

Continue reading below for more information.

Keep these sample URLs on hand for testing purposes as you go through the upgrade process.

1639891926_919_A-Technical-SEO-Guide-to-Advanced-Core-Web-Vitals-Optimization

2. Integrate field data with lab diagnostics using PageSpeed Insights.

Use PageSpeed Insights (powered by Lighthouse and Chrome UX Report) to detect lab and field problems on a page after you’ve identified pages that require repair.

Keep in mind that lab tests are one-time simulations. One test is neither a reliable source of information or a conclusive response. Experiment with a variety of URLs.

Advertisement

Continue reading below for more information.

Only publicly accessible and indexable URLs may be tested using PageSpeed Insights.

Crux data is accessible through API or BigQuery if you’re working on noindex or authorized pages. Lighthouse should be used in lab experiments.

3. Fill out a Ticket Form. Carry out the development tasks.

As SEO specialists, I invite you to participate in the ticket refinement and QA procedures.

Sprints are common in development teams. Each sprint has a set of tickets. Your development team will be able to better estimate the work and get the ticket into a sprint if you have well-written tickets.

Include the following information in your tickets:

Story of a User Stick to the following format:

As a user/site/etc., I want to take action in order to achieve my aim.

For example, in order to get the greatest contentful paint for this page template in under 2.5 seconds, I want to add inline CSS for node X on page template Y.

Criteria for Acceptance Define when the objective has been met. What exactly does “done” imply? Eg.:

  • By inserting it straight in, any critical-path CSS used for above-the-fold material will be inlined.
  • In the, critical CSS (that is, CSS linked to node X) shows above JS and CSS resource links.

Advertisement

Continue reading below for more information.

URL/Strategy Testing Copy the grouped sample URLs from Search Console and paste them here. Provide QA engineers with a set of instructions to follow. Consider the tool, the metric/marker to check for, and the behavior that indicates a pass or fail.

Documentation for Developers When possible, use first-party documentation. Please don’t write flowery blogs. Please? Eg.:

4. Changes in Quality Assurance in Staging Environments Using Lighthouse

Before being released to production, code is often tested in a staging environment. To measure Core Web Vitals, utilize Lighthouse (through Chrome DevTools or a local node instance).

If you’re new to Lighthouse testing, A Technical SEO Guide to Lighthouse Performance Metrics may teach you how to test and how to test approach.

Lower environments often have less resources and are less performant than production settings.

Advertisement

Continue reading below for more information.

Use the acceptance criteria to determine if the development effort produced was adequate for the assignment.

The Most Contented Paint

Represents the loading experience as seen by the user.

Measurement: When the page’s biggest picture or text block is visible inside the viewport at the end of the page load timeline.

The LCP node for pages that use the same page templates is usually the same.

The goal is for 75% of page loads to reach LCP in less than 2.5 seconds.

Lab and field data are also available.

What Is LCP and How Does It Work?

When the biggest text or picture element in the viewport is visible, the LCP metric is used.

A page’s LCP node may be any of the following elements:

  1. elements.
  2. components inside a tag
  3. pictures of posters

Watch This Video-

The “core web vitals rollout” is a guide that will help you understand how to optimize your website’s core web vitals. The article also includes the “Must Have” text.

Related Tags

  • core web vitals report
  • core web vitals checklist
  • core web vitals fonts
  • how important are core web vitals
  • core web vitals faq

Get in Touch with your New
Digital Marketing Consultant Now!

- Dominate your search results.
- Save time by letting us do the work.
- Expand and protect your brand.
- Generate more leads for sales potential.
- Convert more leads for growth.
Scroll to Top