Google Core Web Vitals and Page Experience [2023 Guide]

What are Core Web Vitals?

Core Web Vitals are a set of search console metrics that Google considers important in a webpage’s overall user experience. It evaluates the page experience score of a user. Core Web Vitals Update is made up of three specific page speed and user interaction measurements:

• Largest Contentful Paint (LCP)– talks about “Loading Speed“. It measures how quickly the main content of a web page loads and is visible to users.
  
• First Input Delay (FID)– talks about “Interactivity“. It measures the time it takes for a user to actually interact with your page.
  
• Cumulative Layout Shift (CLS)– talks about the “Visual Stability“. It measures how stable the page is as it loads and the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page.

The Core Web Vitals report shows how your pages perform, based on real-world usage data. Google announced to make the user experience an official ranking factor. So, it is very important to measure your site’s individual page performance and improve the CWV score for Google to understand that you should be considered to rank higher on SERP.

• Save

Since Google prioritizes working for users, therefore, website owners can’t rank higher or drive organic traffic just by impressing search engine crawlers or bots.

When did Google introduce Core Web Vitals Update?

Here’s a log of Core Web Vital updates by Google, when it officially announced page experience as the ranking factor.

On May 28, 2020, Google said, a new signal that combines Core Web Vitals with our existing signals for page experience will be introduced. 

On November 10, 2020, Google announced, the page experience signals will roll out in May 2021. The change for non-AMP content to become eligible to appear in the mobile Top Stories feature in Search will also roll out in May 2021. Google also announced new tools for publishers who are looking to improve page experience.  

On April 19, 2021, Google began using page experience as part of our ranking systems beginning in mid-June 2021. Google also announced the details on what will be included in the update, a new Page Experience report in Search Console, and support for signed exchanges for all content on Google Search.

On June 15, 2021, The page experience update began slowly rolling out and Google announced that it will be completed by the end of August 2021.

August 4, 2021, Google made several improvements to the Page experience report, including removing redundant Safe Browsing and Ad Experience widgets from the report. Google also clarified that Safe Browsing is not used as a ranking signal. Safe Browsing systems continue to play an important role to keep users of Google Search safe, and any flags will continue to be surfaced in the Search Console outside of the Page experience report. 

How Page Experience Affects Ranking?

Google says, Longer page load times have a severe effect on bounce rates. For example:

• If page load time increases from 1 – 3 seconds, bounce rate increases 32%

• If page load time increases from 1 – 6 seconds, bounce rate increases by 106%

Though Page experience is important, it’s not only Google’s ranking factor. Google still seeks to rank pages with the best information overall, even if the page experience is subpar. As per Google’s John Mueller, a great web page experience does not override having excellent page content. 

John Mueller mentioned, how to know whether the Core Web vitals ranking factors are impacting site rankings (positively or negatively) and when it’s not.

If the change in traffic is felt suddenly in a day, then, it is not the case that it’s anywhere related with CWV as the rollout is on a per-page basis essentially. That means if the Google algorithm sees your website is slow for core web vitals, then you would see a gradual change over time.

Also, take note that the updates take place automatically. So it’s something in the search console you will see the data is always delayed I think 28 days but it’s like gradually updated.

Major signals (categories) in Page Experience you need to take under consideration to improve on your site (for positive impact):

• Save

Google said, page experience specifically is not a ranking score, but rather, each element within has its own weights and rankings in the overall Google ranking algorithm.

• Save

Let’s study each element and its impact, one by one!

1. Core Web Vitals

Core Web Vitals tests the speed, responsiveness, and stability of the page loading experience for users. The CWV report provides a rating of Good, Needs improvement, or Poor to each page. A page must have a Core Web Vitals rating of Good in order to qualify for Good page experience status.

Note**, it takes a few days to import data from the Core Web Vitals report into the Page Experience report, and so the rating for a URL in the Page Experience report can lag slightly behind the URL’s rating Core Web Vitals report. URLs without Core Web Vitals cannot appear in the Page Experience report.

2. Mobile Experience

Each of your pages should be mobile-friendly. A URL must have no mobile usability errors in order to qualify for Good status in the Page Experience report.

SEO Tips to Build Mobile-Ready Sites

• Use large fonts that are legible on small mobile devices.
• Stagger your links so users are able to click them easily.
• Include plenty of whitespace for easy navigation.

Check if your page is mobile-friendly with the Mobile-Friendly Test.

3. Safe browsing

Safe browsing allows webmasters to resolve security issues with their websites. Webmasters can use Google Search Console to access the security issues report, which detects six security issues: malware, deceptive pages, harmful downloads, and uncommon downloads. Safe Browsing also provides recommendations for each type of security issue for better page experience and trust.

Security threats, as defined by Google, include

• Malware
• Hacked content
• Social engineering

SEO Tips to Avoid Security Issues

• Don’t include unnecessary lead generation forms on your website.
• Include links and ads from reputable, verified sources.

Check to see if your site has any safe-browsing issues with the Security Issues report.

4. HTTPS Certificate

Your page must be served over HTTPS to be eligible for Good page experience status in Google Search. If your site has too high a ratio of HTTP URLs, you will see a warning banner, and the HTTPS section will show “Failing” on your site.

Adding HTTPS to page URLs offers three layers of security in the form of

• Data encryption
• Authentication
• Data integrity

SEO Tips to Nail HTTPS

• Strive to get an HTTPS by SSL certification.
• Use a schema markup generator tool to add structured data to your site’s HTML.

Check if your site’s connection is secure. If the page isn’t served over HTTPS, learn how to secure your site with HTTPS.

5. No intrusive interstitials (Pop-ups on your site)

Pop-ups or interstitials when browsing a website almost always bring a screeching halt that is interrupted by the enjoyable user browsing experience. These kinds of programmed interruptions lower the quality of the user experience.

Interstitials that count as distracting under this category are

• Standalone or native interstitials that obstruct the main content
• Intrusive pop-ups that disrupt the browsing experience

SEO Tips to Optimize Ad Experience

• Use pop-ups with discretion
• Place ads on sidebars or other unobtrusive places

That’s why Google has trained its algorithm to detect these instances of interstitials’ and penalize those website pages in SERP when they include this kind of user-hostile behavior (not created properly with the proper size, timings, etc)

Since the changes mentioned in Google’s roadmap are rolled out, therefore CWV has become an integral part of Google’s ranking factors. That means now, Google considers page experience when generating Search results. 

Click to Know Google’s 100 Complete Ranking Factors in 2023

Let’s understand the Core Web Vitals metrics and know why are they relevant to users

You can find your site’s Core Web Vitals data in the “experience” section of your Google Search Console account.

• Save

User-centric metrics is a critical tool in understanding, measuring, and improving the user experience of your website. Largest Contentful Paint measures how quickly users see the content. First Input Delay measures how responsive a site is to user input like tapping a button or entering data in a form. Cumulative Layout Shift measures how often elements of the page move around while the user is trying to read or interact with it (for both mobile and desktop).

Let’s understand core web vitals metrics in-depth:-

• Save

All factors, Google considers to score you on Core Web Vitals Optimizations:

• Avoid an excessive DOM size
• Avoid chaining critical requests
• Keep request counts low and transfer sizes small
• Largest contentful paint element
• Avoid large layout shifts 
• Avoid long main-thread tasks
• Eliminate render-blocking resources
• Properly size images
• Defer off-screen images
• Minify CSS
• Minify JavaScript
• Reduce unused CSS 
• Reduce unused JavaScript
• Efficiently encode images
• Serve images in next-gen formats
• Enable text compression
• Pre-connect to required origins
• Initial server response time was short 
• Avoid multiple page redirects
• Pre-load key requests
• Use video formats for animated content
• Remove duplicate modules in JavaScript bundles
• Avoid serving legacy JavaScript to modern browsers 
• Preload largest contentful paint image
• Avoids enormous network payloads 
• Uses efficient cache policy on static assets 
• User Timing marks and measures
• JavaScript execution time 
• Minimises main-thread work 
• All text remains visible during webfont loads
• Minimise third-party usage 
• Lazy load third-party resources with facades
• Largest contentful paint image was not lazily loaded
• Uses passive listeners to improve scrolling performance
• Avoids document.write()
• Avoid non-composited animations
• Image elements have explicit width and height
• Has a <meta name="viewport"> tag with width or initial-scale

What is Largest Contentful Paint (LCP)?

LCP metric is a part of core web vitals that reports the render time of the largest content element (image or text block) visible to the viewpoint of actual users. In simple words, LCP is a time required from clicking a link to seeing the main content of the page till it finishes rendering on the screen. 

Agg. LCP (aggregated LCP) shown in the report is the time it takes for 75% of the visits to a URL in the group to reach the LCP state.

What is a good LCP score?

Google has categorized the LCP score into 3 parts:

1. 0–2.5 seconds: Green (GOOD)
2. 2.5–4 seconds: Orange (NEED IMPROVEMENT)
3. 4+ seconds: Red (POOR) 

• Save

Therefore, to provide a good user experience, every page on your site should hit LCP within 2.5 seconds. 

And trust me, it can be very challenging for websites like us because my blog pages are large, in-depth with lots of graphics, visuals, or other features. So, if you are producing the content at that level (more than 3000-5000 words) then be ready to put in an extra effort just to improve LCP. 

How to improve Largest Contentful Paint?

There are mainly 4 factors that affect LCP

1. Slow server response times
2. Render-blocking JavaScript and CSS
3. Resource load times
4. Client-side rendering

Here is the quick checklist to improve the LCP score of web pages

1. Apply instant loading with the PRPL pattern
2. Optimize your server
3. Route users to a nearby CDN
4. Optimizing the Critical Rendering Path
5. Optimize your CSS
6. Optimize your Images
7. Optimize web Fonts
8. Optimize your JavaScript (for client-rendered sites)

What is First Input Delay (FID)?

FID is the second Google CWV factor and another critical user-centric metric for measuring load responsiveness because it quantifies the user’s experience on your page. When any user tries to interact with unresponsive pages then the FID score becomes low, which helps to ensure that the page is usable. 

FID measures the time from when a user first interacts with a page (i.e. when they click a link, tap on a button, or use a custom, JavaScript-powered control) to the time when the browser is actually able to begin processing event handlers in response to that interaction.

Just like LCP, FID scores are also determined in 3 major categories

1. 0–100 ms: Green (GOOD)
2. 100–300 ms: Orange (NEED IMPROVEMENT)
3. 300+ ms: Red (POOR) 

• Save

Hence, to provide a good user experience, your web pages should strive to have a First Input Delay of 100 milliseconds or less. 

What is Cumulative Layoff Shift (CLS)?

CLS is the 3rd factor in Google’s core web vitals updates.  CLS is how stable a page is and its visual stability while it loads. If elements on your web page do not move around as the page loads, the CLS score goes low and it helps to ensure that the page is delightful with a great user experience, But if the elements move around when the page loads then you get a high CLS score that indicates bad user experience. 

In other words, Cumulative Layoff Shift is a measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page. 

This layout shift occurs any time a visible element changes its position from one rendered frame to the next. 

Google’s criteria to determine CLS scores are

1. CLS score of 0.1 or less: Green (GOOD)
2. 0.1–0.25: Orange (NEED IMPROVEMENT)
3. 0.25+ ms: Red (POOR) 

• Save

So, every web page on your website should hit a CLS score of 0.1 or less to meet the core web vitals threshold and provide a better user experience. 

Google’s other performance metrics in core web vitals updates are

1. First Contentful Paint (FCP)

FCP identifies render-blocking resources that categories mainly on 3 range of FCP scores;   

• 0–2 seconds: Green (fast)
• 2–4 seconds: Orange (moderate)
• 4+ seconds: Red (slow)

FCP measures how long it takes for a user’s browser to render DOM elements such as images, non-white <canvas> elements, and SVGs. 

2. Speed Index (SI)

The average time that content on your site takes to display to a user is called the speed index. SI metric identifies excessive JavaScript on a page and is measured in milliseconds, with a range of SI scores: 

• 0–4.3 seconds: Green (fast)
• 4.4–5.8 seconds: Orange (moderate)
• 5.8+ seconds: Red (slow)

3. Time to Interactive (TTI) 

TTI is an important lab metric for measuring load responsiveness. It identifies website owners about the pages with unnecessary JavaScript and is measured in seconds. Measuring TTI is important because some sites optimize content visibility at the expense of interactivity. This can create a frustrating user experience. TTI is the amount of time it takes for the content on a page to become functional for it to be fully interactive.

 The ranges of TTI scores metrics with color-coding are

• 0–3.8 seconds: Green (fast)
• 3.9–7.3 seconds: Orange (moderate)
• 7.3+ seconds: Red (slow)

4. Total Blocking Time (TBT)

TBT helps site owners to identify pages with unnecessary JavaScript. It is determined in milliseconds on the basis of how long a web page responds to specific user input. 

Total Blocking Time scores ranges 

• 0–300 ms: Green (fast)
• 300–600 ms: Orange (moderate)
• 600+ ms: Red (slow)

5. Page Performance Score metric Categories

• 90: Green (good), 
• 50–90: Orange (needs improvement), and 
• below 50: Red (poor) 

What is Google Lighthouse Performance Metrics

Google Lighthouse is a free tool that provides powerful insights to help improve your website. By generating a Lighthouse report, you can assess any web page’s page experience and access valuable tips to improve its performance.

How scores are color-coded

The metrics scores and the perf score are colored according to these ranges:

• 0 to 49 (red): Poor
• 50 to 89 (orange): Needs Improvement
• 90 to 100 (green): Good

How Do You Use Google Lighthouse?

Run Lighthouse as a Chrome Extension

1. In Chrome, go to the page you want to audit.
2. Click Lighthouse. It should be next to the Chrome address bar.
3. Click Generate report. Lighthouse runs its audits against the currently-focused page, then opens up a new tab with a report of the results. 

Why Lighthouse Score Fluctuates

A lot of the variability in your overall Performance score and metric values is not due to Lighthouse. When your Performance score fluctuates it’s usually because of changes in underlying conditions. Common problems include:

• A/B tests or changes in ads being served
• Internet traffic routing changes
• Testing on different devices, such as a high-performance desktop and a low-performance laptop
• Browser extensions that inject JavaScript and add/modify network requests
• Antivirus software

Tools to Measure Google Core Web Vitals

Page Speed Insights

PageSpeed Insights analyzes the content of a web page, then generates suggestions to make that page faster for mobile and desktop devices. 

Chrome UX Report

The Chrome UX Report also known as CrUX is a public dataset of real user experience data on millions of websites

CrUX API measures for the following field metrics

• Largest Contentful Paint
• Cumulative Layout Shift
• First Input Delay
• First Contentful Paint

How do I use Chrome UX report?

There is a 2 simple step process to use CrUX;

• Log in to Google Cloud and create a new CrUX project.
• Navigate to the BigQuery console and click ‘Compose Query’. You can take a look at the table details of the “chrome-ux-report” dataset for complete analysis. 

3. Google Search Console

Based on real-time data from CrUX, Google Search Console helps you identify groups of pages across your site that need core web vital  improvement

4. Chrome Dev Tools

Powered by Google PageSpeed Insights, Chrome Dev allows you to measure the performance of your page over time, providing a prioritized list of guides and code labs on how to improve. 

5. Lighthouse

Lighthouse is an automated website auditing tool that diagnoses web vitals issues in order to improve page and user experience. The latest version of Lighthouse (8.0, which I have mentioned above in this blog) includes additional audits, new metrics, and a newly composed performance score.

How to Improve Google Core Web Vitals with Best Practices?

To optimize a website for Core Web Vitals, it’s recommended to analyze each URL individually as it may have a different score because a page holds different layouts, content blocks, and elements. Below are the basic steps you or your dev team should take first:

• Scale images to the correct placement sizing
• Compress large image files
• Lazy load static content
• Apply a content delivery network to the hosting platform 
• Remove any unnecessary render-blocking resources 
• Serve images in next-gen formats 
• Remove any unused javascript
• Design UX patterns that is optimized for Core Web Vitals
• Opt best practices for carousels
• Do best practices for cookie notices
• Use lazy-loading to improve loading speed of images and videos
• Choose best practices for fonts. Avoid invisible text during font loading and optimize WebFont loading and rendering. 
• Do best practices for tags and tag managers
• Choose and embed third-party plugins or services wisely. Any plugin should not badly affect your site’s load time. Optimize well your third party resources.  
• Infinite scroll without layout shifts
• Improve CSS for Web Vitals
• Optimize Largest Contentful Paint
• Optimize First Input Delay
• Optimize Cumulative Layout Shift

Google Core Web Vitals Infographic

• Save

FAQs About Google Core Web Vitals (CWV) and Page Experience