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.
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.
- What are Core Web Vitals?
- When did Google introduce Core Web Vitals Update?
- How Page Experience Affects Ranking?
- What is Largest Contentful Paint (LCP)?
- What is First Input Delay (FID)?
- What is Cumulative Layoff Shift (CLS)?
- Google’s other performance metrics in core web vitals updates are
- What is Google Lighthouse Performance Metrics
- How Do You Use Google Lighthouse?
- Why Lighthouse Score Fluctuates
- Tools to Measure Google Core Web Vitals
- How to Improve Google Core Web Vitals with Best Practices?
- Google Core Web Vitals Infographic
- FAQs About Google Core Web Vitals (CWV) and Page Experience
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):
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.
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
- 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
- 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.
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.
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.
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:-
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
- Reduce unused CSS
- 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
- Preload largest contentful paint image
- Avoids enormous network payloads
- Uses efficient cache policy on static assets
- User Timing marks and measures
- 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
- Avoid non-composited animations
- Image elements have explicit
- Has a
<meta name="viewport">tag with
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:
- 0–2.5 seconds: Green (GOOD)
- 2.5–4 seconds: Orange (NEED IMPROVEMENT)
- 4+ seconds: Red (POOR)
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
- Slow server response times
- Resource load times
- Client-side rendering
Here is the quick checklist to improve the LCP score of web pages
- Apply instant loading with the PRPL pattern
- Optimize your server
- Route users to a nearby CDN
- Optimizing the Critical Rendering Path
- Optimize your CSS
- Optimize your Images
- Optimize web Fonts
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.
Just like LCP, FID scores are also determined in 3 major categories
- 0–100 ms: Green (GOOD)
- 100–300 ms: Orange (NEED IMPROVEMENT)
- 300+ ms: Red (POOR)
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
- CLS score of 0.1 or less: Green (GOOD)
- 0.1–0.25: Orange (NEED IMPROVEMENT)
- 0.25+ ms: Red (POOR)
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)
- 0–4.3 seconds: Green (fast)
- 4.4–5.8 seconds: Orange (moderate)
- 5.8+ seconds: Red (slow)
3. Time to Interactive (TTI)
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)
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.
|First Contentful Paint
|Largest Contentful Paint
|Time to Interactive
|Total Blocking Time
|Cumulative Layout Shift
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
- In Chrome, go to the page you want to audit.
- Click Lighthouse. It should be next to the Chrome address bar.
- 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
- Antivirus software
Tools to Measure Google Core Web Vitals
PageSpeed Insights analyzes the content of a web page, then generates suggestions to make that page faster for mobile and desktop devices.
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.
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
- 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
FAQs About Google Core Web Vitals (CWV) and Page Experience
Q: How do I improve my LCP/CLS/FID score?
A: Google’s core web vitals are purely technical parts of the website and hence it requires web development knowledge. If you are not a technical expert or are unable to find technical experts to fix this issue, you can follow the suggestions given on Search Console Help Center. But the best way is to find a professional that can help you with this. You can contact reputed marketing agencies like EchoAd Media to resolve all your website-related issues.
Q: Should all my pages hit these thresholds of Google core web vitals? What do I get if I do so?
A: Google recommends that websites use these three thresholds, LCP, CLS, and FID for a better page experience for users. If you hit these thresholds, your page experience will improve and users will enjoy staying on your website. In the long run, your web pages will rank better on Google and drive huge organic traffic. If you do not improve on these factors of web vitals, Google will hit your website. As a result, your site’s traffic and ranking will drastically fall. Even Google may deindex your poor pages.
Q: If I built AMP pages, do they meet the recommended thresholds?
A: There is a high likelihood that AMP pages will meet the thresholds. AMP is about delivering high-quality, user-first experiences; its initial design goals are closely aligned with what Core Web Vitals measure today. This means that sites built using AMP likely can easily meet Web Vitals thresholds. But it is important to note that there are things outside of AMP’s control that can result in pages not meeting the thresholds, such as slow server response times and un-optimized images.
Q: Can a site meet the recommended thresholds without using AMP?
A: Yes you can hit recommended thresholds by Google without using AMP. But, if you use AMP pages, you need not put extra effort.
Q: My website is mobile-friendly, but my Core Web Vitals score is low on mobile. How is that possible?
A: The Page Experience signal measures aspects of how users perceive the experience of interacting with a web page. Core Web Vitals is one aspect of this along with Mobile-friendliness. These are not meant to be overlapping but additive in order to provide a holistic picture of page experience.
Q: Why are there differences in scores between mobile and desktop?
A: There are various factors but one of the main reasons for variation is mobile devices generally have slower processors. Mobile devices have device-specific CSS rules such as resizing images, viewport size, etc.
Q: Can sessions that don’t report FID to be considered “bounced” sessions?
A: No. First Input Delay excludes scrolls. Bounce Rate and Abandonment Rate may be defined as part of your Google analytics suite of choice but these are not considered in the design of Core Web Vital metrics.
Q: If my user base is using slow devices or slower networks then how do Core Web Vitals account for my website?
A: Core Web Vitals is meant to measure the quality of a user’s experience on a website. In such cases it is the responsibility of website owners to ensure that such users are still receiving a great user experience by meeting the recommended Core Web Vitals thresholds.
Q: My page is fast. Why do I see warnings on the Search Console Core Web Vitals report?
A: Different devices, network connections, geography, and other factors may contribute to how a page loads and is experienced by a particular user. While some users, in certain conditions, can observe a good experience, this may not be indicative of other users’ experiences. Core Web Vitals look at the full body of user visits and its thresholds are assessed at the 75th percentile across the body of users. The Search Console CWV report helps report on this data.
Q: When I look at Lighthouse, I see no errors. Why do I see errors on the Search Console report?
A. The Search Console Core Web Vitals report shows how your pages are performing based on real-world usage data from the CrUX report (sometimes called “field data”). Lighthouse, on the other hand, shows data based on what is called “lab data”. Lab data is useful for debugging performance issues while developing a website, as it is collected in a controlled environment. However, it may not capture real-world bottlenecks. You can use both reports to improve the experience for your users, but the information each report provides is different.