Knowledge Base

/

Core Web Vitals

/

Expert Guide to Core Web Vitals: LCP, FID and CLS

Analyze Core Web Vitals Report and Improve Page Speed of Your Website

By
James Gibbons
Core Web Vitals

The core web vitals report is the primary source of inputs to improve page speed for websites. The three key metrics to monitor and improve for page speed are LCP, FID and CLS. In addition, the website page speed index complements core web vitals with a helpful metric that blends many of the Lighthouse based metrics into a single composite metric.

When working on a large website with hundreds to sometimes millions of web pages, how many core web vital reports and the multitude of reported issues can you review? How do you translate them into actionable page speed improvement work items while reviewing them manually?

This article will provide you with a detailed guide on improving the core web vitals and describe how Quattr can help expedite your work using our unified website optimization platform which includes monitoring and recommendations for the core web vitals reports.

Performance Matters - Users rank the time it takes a page to load as the most important metric. Speed ranks higher than site usability or how attractive the site looks.

To provide consumers with a positive experience, Google provides a higher ranking to sites that provide consumers with content relevant to their search and a seamless on-page journey.  To meet this requirement, sites need to be responsive, stable, fast and allow consumers to navigate the site without interruptions.

Quattr's SEO technology platform offers an efficient workflow for improving core web vitals in addition to AI guided workflows that help set a content strategy and roadmap and optimize all existing content for the right keywords.

Quattr Scores

of this article

Keyword Relevance

77

Content Quality

100

Check your content's score now!

Core Web Vitals Explained

Search Engine Signals for Page Experience (as per Google)
Search Engine Signals for Page Experience (as per Google)

Google created core web vitals to help websites measure and monitor the page experience for a web page and guide core web vitals optimization efforts. Page Experience is an algorithm update that Google rolled out and Google has been very specific about the metrics and the related benchmarks it expects.

Core Web Vitals are a set of metrics that measure a webpage’s user experience.

Page experience is measured by quantifying the load time, interactivity, and visual stability of a page. Currently, Core Web Vitals includes three metrics - Largest Contentful Paint (LCP), First Input Delay, and Cumulative Layout Shift (CLS). Each Core Web Vital measures a real and distinct aspect of the user experience as explained below.

Core Web Vitals take into account the time it takes for a page to load, the time it takes for a page to become interactive and the amount of unexpected movement of content on a page.

What Is Largest Contentful Paint (LCP)?

How to measure Largest Contentful Paint (LCP)? (as per Google)
How to measure Largest Contentful Paint (LCP)? (as per Google)

Largest Contentful Paint (LCP) is the amount of time it takes for the main content on the page to load. A study conducted by Akamai found that 53 percent of mobile site visitors will leave a page that takes longer than three seconds to load. Several studies have found the conversion rate is the best if the page loads within four seconds.

Google recommends websites aim to keep LCP under 2.5 seconds for 75% of their page loads. LCP is mainly affected by four factors: Slow server response times, Render-blocking JavaScript and CSS, Resource load times, and Client-side rendering. Find more details on how to improve LCP here.

What Is First Input Delay (FID)?

How to measure First Input Delay (FID)? (as per Google)
How to measure First Input Delay (FID)? (as per Google)

First Input Delay (FID) is the amount of time it takes for a page to become interactive. For example, a button may become visible on a page but because the JavaScript libraries are still loading the button does not respond to user inputs. This can be frustrating for the user and prevents them from experiencing a seamless journey through the site.

Google recommends sites should aim to keep First Input Delay (FID) under 100 milliseconds for 75% of page loads.

FID can be improved by reducing the impact of third-party code, reducing JavaScript execution time, minimizing main thread work, and keeping request counts low and transfer sizes small. For detailed guidance, please review how to improve FID here.

In a recent update, Google announced that it will replace FID with a new responsive field metric called Interaction To Next Paint (INP). Read our blog on Interaction to Next Paint (INP) to learn what this update means for your website and how you can optimize your web pages for INP.

INP & FID metrics in Core Web Vitals Report
INP & FID metrics in Core Web Vitals Report

What is Interaction to Next Paint (INP)?

Interaction to Next Paint (INP) measurement metrics
Interaction to Next Paint (INP) measurement metrics

Interaction to Next Paint (INP) metric measures the time it takes for a web page to become fully interactive from the moment the user starts an interaction. It could include clicking a button or entering text in a form field until the next paint occurs. INP is a key factor in determining the user experience and is significant in ensuring a smooth and responsive website.

When INP is high, users may encounter delays or unresponsiveness after initiating an action, leading to a suboptimal browsing experience. This delay can occur due to various factors, including loading JavaScript libraries, resource-intensive tasks on the main thread, or excessive network requests.

Google suggests that websites should strive to achieve an INP of less than 200 milliseconds for 75% of page loads.

Improving INP involves implementing various optimization techniques. Reducing the impact of third-party code helps minimize dependencies on external scripts that can slow down the page. Optimizing JavaScript execution time, minimizing main thread work, and optimizing request counts and transfer sizes can significantly enhance INP.

What Is Cumulative Layout Shift (CLS) And How Does It Measure Visual Stability?

How to measure Cumulative Layout Shift (CLS)? (as per Google)
How to measure Cumulative Layout Shift (CLS)? (as per Google)

Cumulative Layout Shift (CLS) measures the visual stability of a web page's layout. It quantifies how often users may experience an unexpected movement of content on a page. CLS is designed to be a user-centered metric that estimates visual stability based on each layout shift on a web page and it is calculated based on the size of the HTML element and the distance the HTML element moved from the original location. CLS for a web page is then calculated by adding up all individual layout shifts that take place on the web page. Low Core Layout Shift scores imply very few elements have shifted on the page. Review how unexpected movement of HTML elements affects CLS score and other layout shifts in detail here.

Individual layout shifts can happen because web pages load HTML elements progressively or content is dynamically injected into the web page. A base-level experience is loaded first and the more advanced functionality is loaded later. This technique is used by developers to support legacy browsers. The progressive loading technique is also used to load web pages fast and lower LCP.

While pages may load fast, the visible elements on the page keep shifting thereby negatively affecting the user page experience journey. More importantly, in some cases, large layout shifts can cause serious errors. For example, a user may be intending to click the cancel button but may land up clicking on the buy button or may click buy twice.

For the above visual stability reasons, it's important to keep the CLS on a web page low. Google recommends that sites aim for a CLS of less than 0.1 for 75% of page loads. A few practices that can help keep the CLS score low include adding size attributes to images and avoiding executing code that inserts content above the existing web page content.

Read our guide on how to improve and optimize CLS issues here.

Why Should You Focus on Core Web Vitals?

Core Web Vitals is a set of user-centric metrics introduced by Google that measure website performance and user experience. Here's why you should care about them:

1. User Satisfaction: Core Web Vitals directly impact how users perceive and interact with your website. Poor performance can lead to frustrated users, increased bounce rates, and lower conversions.

2. Search Engine Ranking: Google considers Core Web Vitals necessary in determining search rankings. Websites that offer better user experiences and faster loading times tend to rank higher in search results.

3. Competitive Advantage: By optimizing your website for Core Web Vitals, you can gain a competitive edge over websites that neglect these metrics. A fast and smooth website will attract more visitors and keep them engaged.

4. Mobile Experience: With the increasing use of mobile devices, improving page experience becomes even more crucial. Mobile users expect fast and responsive websites; meeting these expectations can boost your mobile traffic and engagement.

5. User Retention: When users have a positive experience on your website, they are more likely to stay, explore further, and return in the future. Core Web Vitals play a significant role in ensuring a seamless user journey and retaining your audience.

Understanding Google's Page Experience Algorithm Update

Google had announced that Page Experience will officially become an important ranking factor in August 2021 and it was widely anticipated to have an outsized impact on the organic traffic to a site. This feature was earlier expected to be launched in May 2021, but Google postponed the change to gradually roll out starting mid-June and become completely live by end of August 2021.

Website teams now have a crisp mandate on focusing on page speed and user experience. Businesses are looking to understand what is involved and how to deploy resources to optimize their websites for core web vitals metrics.

Page Experience pulls together all three Core Web Vital metrics to classify a page as Good, Needs Improvement, or Poor. The table below is the criteria used to classify pages.

Quantifying Page Experience using Core Web Vital metrics (as per Google)
Quantifying Page Experience using Core Web Vital metrics (as per Google)

Google has invested a significant amount of time and research to come up with all the Core Web Vitals thresholds listed in this article. The threshold-based recommendation is based on analyzing data from tens of thousands of sites available in the Chrome User Experience Report (CrUX) database.

Page Experience for landing pages is a top factor along with Click Through Rate (CTR) for improving Ad Quality Score as well. It is thus essential to improve your website’s Page Experience scores.

Good Page Experience is important but it is one of several important ranking factors like High-quality and relevant content, Site security, Mobile Friendliness, and several other factors.

Note: Google has more than 200 ranking signals. So, a Good Page Experience rating on its own is not sufficient to gain organic traffic. Page experience work must be complemented with other ranking factors like high-quality and relevant content.  For example, in addition to Page Performance Experience, Google also tracks overall Site Security (HTTPS-security), Site Accessibility, Mobile Friendliness, Technical SEO, User Experience (CTR, Bounce Rate and Dwell time), Internal and External linking, and No Intrusive Interstitials (or no popup ads) to list a few important ranking factors.

Core Web Vitals SEO Tools

There are several tools available to help improve the Page Experience rating for a page. Performance tools are based on Field data or Lab data.

Field data (also referred to as Real User Monitoring or RUM) is based on data collected by the Chrome browser. Lab data on the other hand is based on loading and analyzing page performance data on a server. Some of the top tools available include:

1. Quattr: Quattr is an AI SEO suite that provides a prioritized list of audits to improve core web vital metrics. It helps to maximize a site's performance by speeding up the loading time and improving overall quality. Quattr provides a comprehensive set of Lighthouse performance metrics and audits covering the entire domain.

2. Google Lighthouse: Google Lighthouse is a free tool that uses lab data to analyze the content of a web page and generates suggestions to make that page faster. It also suggests steps to improve page speed scores and optimize for user experience. Lighthouse generates a report containing metrics and suggestions for improving them, including the Largest Contentful Paint (LCP) score and suggestions for improvement.

3. PageSpeed Insights: PageSpeed Insights is another free tool from Google that uses lab data & field data to analyze the content of a web page and generates suggestions to make that page faster. It provides a score for both mobile and desktop versions of the website and identifies opportunities to improve the page's performance.

4. Google Search Console: Google Search Console is a free tool that uses field data to analyze a website's performance. It provides a Core Web Vitals report that displays a chart for mobile and desktop platforms that indicates how many pages are good, need improvement, and poor page experience scores.

There are several tools available to help you measure and optimize the Page Experience score for your webpage.

*Google PageSpeed Insights (PSI) tests for page speed using Google Lighthouse but uses field data to calculate performance metrics.

Core Web Vitals Metrics Availability

These Core Web Vital metrics can be measured using field data, representing real user experiences, and lab data, simulating controlled testing scenarios. While field data reflect user behavior, lab data allows for controlled experimentation and optimization. Here's a comparison table showcasing the core web vitals metrics that can be measured using field and lab data:

Core Web Vital Metrics Field Data Availability Lab Data Availability
Largest Contentful Paint (LCP)
Interaction to Next Paint (INP)
First Input Delay (FID)
Cumulative Layout Shift (CLS)
First Contentful Paint (FCP)
Time to First Byte (TTFB)
Total Blocking Time (TBT)
Speed Index (SI)
Time to Interactive (TTI)

How To Improve Core Web Vitals?

Improving Core Web Vitals can significantly enhance your website's performance, user satisfaction and can also positively affect your SEO ranking. Here are some ways to improve Core Web Vitals:

1. Reduce render-blocking resources

Render-blocking resources are files that prevent a page from loading quickly. These resources include JavaScript and CSS files loaded before the page content. To reduce render-blocking resources, you can:

1. Use asynchronous loading for JavaScript and CSS files.

2. Minify and compress JavaScript and CSS files.

3. Use a content delivery network (CDN) to deliver files faster.

2. Optimize Images

Images are often the largest files on a webpage, which can significantly slow down page load times. To optimize images, you can:

1. Compress images to reduce their file size.

2. Use the correct image format (JPEG, PNG, or GIF) for each image.

3. Use responsive images that are scaled to fit the user's screen size.

3. Use lazy loading

Lazy loading is a technique that delays the loading of non-critical resources until they are needed. It can significantly improve page load times and reduce the amount of data that needs to be downloaded. To use lazy loading, you can:

1. Use the loading="lazy" attribute for images and iframes.

2. Use a lazy loading plugin or script.

4. Implement a caching solution

Caching is a technique that stores frequently accessed data in memory or on disk, so it can be quickly retrieved when needed. To implement a caching solution, you can:

1. Use a caching plugin or script.

2. Set cache headers to control how long files are cached.

3. Use a CDN that caches files at edge locations.

5. Use a lightweight web framework

A lightweight web framework can significantly reduce page load times by minimizing the amount of code that needs to be downloaded and executed. To use a lightweight web framework, you can:

1. Use a static site generator like Jekyll or Hugo.

2. Use a lightweight CMS like Grav or Kirby.

3. Use a lightweight web framework like Flask or Express.

Reasons for Poor Page Experience Score

There are several reasons for having a Poor Page Experience score. A few reasons include unused CSS, unused JavaScript, unoptimized images, and render-blocking resources that prevent other files from being downloaded.

For example, images used on a web page may not be optimized for the web. This can be fixed by hosting images on a CDN, Lazy loading images, and converting all images to WebP format. The WebP format reduces image size significantly. Similarly, CSS and Javascript issues can be addressed by using GZIP Compression and Minifying Resources.

Identifying Performance Issues to Fix

Once these issues are highlighted by Lighthouse or other tools, teams have to look through the reports generated for each page to identify all the issues, prioritize issues they believe will have the highest impact, and fix them.

The reports generate tens of thousands of issues that need fixes across several web pages on the site. Prioritizing issues to work on and improving these pages can take time and cause your Page Experience scores to remain poor for longer thereby affecting the traffic to your web pages.

Furthermore, most teams that use PageSpeed Insights and Lighthouse lack the expertise and experience to convert the reports generated from performance tools into actionable code improvements.

Core Web Vitals Optimization: Current Problems

The current process described does not scale for large enterprise websites that may have thousands of pages. Furthermore, there are several additional problems with the current process described below.

Page-oriented Core Web Vitals Optimization over Site-wide Optimization

Google recommends optimizing Core Web Vitals for the consumer journey throughout the site and not just for a specific page. The goal is to remove interruptions, obstacles, and errors to provide users a seamless journey site-wide.

The only way to ensure site-wide optimization is by fixing issues on each specific web page. Performance improvement work is usually targeted to specific teams and pages. As a result, a few pages on your site have ‘Good’ Page Experience ratings while most other pages on the site have ‘Poor’ Page Experience ratings. The result of local optimization is poor consumer journey through the site which in turn can result in lower ranking on Google search for organic traffic.

Competitive Intelligence is Key to Focus Page Experience

It is important to benchmark your site’s user experience relative to the competition. Having visibility into the competitive landscape allows you to offer the best-in-class user experience.

For example, businesses like automobile loans, mortgages, credit cards are highly competitive and tend to invest a lot in site usability. Similarly, other sites that have B2B traffic may tend to invest less in site usability and more in terms of adding functionality.

Thus, understanding the industry and competitor-specific performance scores for each page and keyword is essential. It is critical to have visibility on your competitor’s Page Experience scores and to make sure your page experience is better, something that current optimization tools do not offer.

Core Web Vitals & Missing ROI

The reports generated by the performance tools like Lighthouse and PageSpeed Insights do not link web resources to traffic or other metrics like clicks, impressions, and conversion. As a result, teams do not have sufficient visibility on how to prioritize work and spend a lot of development cycles making less impactful improvements. These changes do not necessarily make big performance score impacts and are unable to move the needle for businesses.

After teams have released a performance improvement they do not have tools to correlate the performance improvements they make with business success metrics like clicks, impressions, and conversions. All these shortcomings fail to provide a wider view on how to improve Core Web Vitals and align them with your business needs to grow organic traffic and improve conversion for paid traffic.

Core Web Vitals SEO with Quattr

The Quattr platform addresses the shortcomings of the current process and helps you optimize your site to improve overall Page Experience and Core Web Vitals. Quattr is a data-driven AI platform trusted by the world's top brands to grow organic and paid presence on search engines. The platform helps customers grow traffic twice as fast and improve conversion by optimizing not just Page Experience Factors but so much more.

The Quattr platform generates, connects, and transforms data from multiple sources including Lighthouse and Google Search Console into a single coherent SEO Data Lake. The platform runs Google’s open-source Lighthouse tool on your website and competitor sites in a controlled simulation environment using multiple network profiles in both desktop and mobile mode. Network profiles are based on average network conditions for each country.

The Data Lake includes data for your website and your top competitors. The platform then uses advanced analytics to score your website and top competitors based on performance experience and users’ journey across devices and locations.

The platform uses AI and other advanced analytics techniques to generate a ranked list of highly actionable core web vitals and page experience recommendations. Organizations can use these recommendations to gain unprecedented speed in improving Page Experience for the entire site.

In addition to the Core Web Vitals, the platform also reviews and generates recommendations for other performance metrics, all tracked weekly. The metrics include Time To First Byte (TTFB), First Contentful Paint (FCP), Speed Index, and Time To Interactive (TTI).

Site-wide optimization for Maximum Business Impact

At any point in time Lighthouse can surface hundreds of issues per page that adds up to tens of thousands of issues across the site. It's important to first address issues that will have the highest user experience and business impact. To create a list of ranked recommendations the Quattr platform first converts all issues generated for all pages into milliseconds wasted. It then applies proprietary AI algorithms to generate a ranked set of highly actionable recommendations.

The ranking is based on many factors to optimize site-wide performance rather than performance improvements that are local to a specific page. It does this by taking into account milliseconds wasted by the resource, the number of pages impacted by the resource, the total clicks impacted by the resource, and quantifying how this issue impacts your website’s organic traffic.

Usability Recommendations by the Quattr Platform
Usability Recommendations by the Quattr Platform

The ranked and quantified usability recommendations allow developers to focus on the highest value work that can potentially have an outsized site-wide impact. Teams also have an option to filter and organize recommendations by Department, Type of technical work, Keyword Intent, and Page experience rating.

For example, using filters teams can ask questions like:

1. Show me all recommendations for pages owned by my department that have a “poor Page Experience”.  Focusing on these recommendations allows you to improve the Page Experience rating from “Poor” to “Good”.

2. Show me all images that need to be converted to a next-generation format.

3. Show me all images that are not correctly encoded and run through an image optimizer.

Competitive Intelligence and Benchmarking for Page Experience Metrics

The platform includes automatic competitor identification for each page and provides complete competitive analysis which is critical for benchmarking. This helps teams understand how they are operating within the competitive landscape. The platform provides side by side comparison for each Core Web Vital and Page Experience as shown in the illustration below. Besides, the platform also provides side by side comparison for several other ranking factors.

To maximize the business impact, your website should have performance scores that are better than the fastest competitor. Quattr's Site Usability platform automatically identifies competitor’s pages, benchmarks your site, and provides specific recommendations on improving your site performance.

Compare Core Web Vitals against your competitors in Quattr
Compare Core Web Vitals against your competitors in Quattr

Compare Experience Factors with competitors in Quattr
Compare Experience Factors with competitors in Quattr

The Quattr platform provides a comprehensive heat map view of experience factors including Page Experience rating so that users can quickly identify the part of the site that needs attention.

Correlate Performance Recommendations with Key Business Metrics

Teams can review and co-relate performance metrics with traffic metrics like impressions, clicks, position, and conversion over a period. In addition to the current period, the platform supports period-over-period analysis. The period over period analysis can be quarterly, monthly, or a custom period. After a performance change is completed teams can use this feature to measure the impact of their change.

Quattr’s visual data view of Performance Score vs Clicks against Competitors
Quattr’s visual data view of Performance Score vs Clicks against Competitors

Core Web Vitals Enhance Page Experience

Search Engine Optimization is a zero-sum game with long-term impacts. One of the best ways to receive a boost in traffic is to have a Good Page Experience score for all the vital pages in a customer’s journey. Enterprise websites with thousands of pages of content need a better way to monitor gaps, prioritize issues and measure impact and make this a continuous process.

Yet, for enterprises, the development cost and infrastructure cost required to improve the overall Page Experience can be very high and can take valuable time away from other high-impact work.

The Quattr platform provides an automated, data-driven AI system that addresses shortcomings with the current approach to improve core web vitals and page experience at scale. It enables you to optimize your website based on recommendations with the highest business impact that can be delivered in the lowest time with minimal effort.

Core Web Vitals is a major update by the Google search algorithm and the right tools like Quattr can help you stay ahead of the curve and beat your competition.

Interested in Tackling Core Web Vitals for Hundreds to Millions of Pages?

Get Started

Core Web Vitals FAQs

What is Google Core Web Vitals?

Google Core Web Vitals are metrics used to assess a webpage's speed, responsiveness, and visual stability. Google utilizes these metrics to measure user experience factors like loading speed, interactivity, and visual continuity. They help developers and site owners identify potential areas for improvement, thus enhancing the overall user experience.

How often should I monitor my website’s Core Web Vitals metrics?

You should regularly monitor your website's Core Web Vitals metrics to ensure they meet your desired performance goals. The frequency of monitoring will depend on the size and complexity of your website, the number of visitors you receive, and the changes you make to your website.

How long does it take to see improvements in Core Web Vitals after optimizations?

The amount of time it takes to see improvements in CWV can vary depending on the specific changes made & the complexity of the website. However, it typically takes 28 days for changes to impact Core Web Vital scores, as Google runs on a 28-day cycle.

Can third-party scripts impact Core Web Vitals scores?

Third-party scripts can significantly impact Core Web Vitals scores. These scripts can slow down the loading time of a website, increase the time to interactive, and cause layout shifts. Adding tweets via screenshots instead of embeds can significantly affect unused JavaScript.

About The Author

James Gibbons

James Gibbons is the Senior Customer Success Manager at Quattr. He has 10 years of experience in SEO and has worked with multiple agencies, brands, and B2B companies. He has helped clients scale organic and paid search presence to find hidden growth opportunities. James writes about all aspects of SEO: on-page, off-page, and technical SEO.

About Quattr

Quattr is an innovative and fast-growing venture-backed company based in Palo Alto, California USA. We are a Delaware corporation that has raised over $7M in venture capital. Quattr's AI-first platform evaluates like search engines to find opportunities across content, experience, and discoverability. A team of growth concierge analyze your data and recommends the top improvements to make for faster organic traffic growth. Growth-driven brands trust Quattr and are seeing sustained traffic growth.

Try Content AI Free Tools for SEO and Marketing

No items found.

Ready to see how Quattr
can help your brand?

Try our growth engine for free with a test drive.

Our AI SEO platform will analyze your website and provide you with insights on the top opportunities for your site across content, experience, and discoverability metrics that are actionable and personalized to your brand.