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:
1. Largest Contentful Paint (LCP)
2. Interaction to Next Paint (INP)
3. Cumulative Layout Shifts (CLS)
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.
9.
10.
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.
Largest Contentful Paint (LCP) measures the time it takes for the main content of a page to load.
Pages that take longer than three seconds to load see 53% of mobile site visitors leave (Akamai study).
Google recommends websites aim to keep LCP under 2.5 seconds for 75% of their page loads.
1. Slow Server Response Times: Use faster hosting and optimize server performance.
2. Render-Blocking JavaScript and CSS: Minimize and defer JS and CSS files.
3. Resource Load Times: Optimize and compress images and other large resources.
3. Client-Side Rendering: Implement code-splitting and use server-side rendering when possible.
Read our detailed guide to find out more on how to improve LCP here.
Interaction to Next Paint (INP) measures the time it takes for a webpage to become fully interactive from the moment the user starts an interaction. INP is a key factor in determining the user experience and is significant in ensuring a smooth and responsive website.
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.
High INP can lead to user frustration and poor user experience, impacting overall satisfaction and engagement.
Google suggests that websites should strive to achieve an INP of less than 200 milliseconds for 75% of page loads.
1. JavaScript Execution Time: Reduce the size and complexity of your JS.
2. Main Thread Work: Optimize tasks running on the main thread.
3. Third-Party Code: Minimize the impact and dependencies on external, third-party scripts that can slow down the page.
4. Network Requests: Reduce the number of requests and optimize transfer sizes.
Read more about Interaction to Next Paint here & learn why Google replaced First Input Delay with INP.
Cumulative Layout Shift (CLS) measures the visual stability of a page by quantifying unexpected layout shifts during the page's lifetime.
CLS quantifies how often users may experience an unexpected movement of content on a page.
It 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.
Unexpected shifts can lead to a poor user experience, such as users clicking on the wrong elements. 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.
Google recommends a CLS score of less than 0.1 for 75% of page loads.
1. Dynamic Content: Avoid inserting content above existing content.
2. Image and Video Size: Always include size attributes or use CSS aspect ratio boxes.
3. Ads and Embeds: Reserve space for ads and embeds to prevent layout shifts.
4. Web Fonts: Use font-display: swap; to avoid invisible text during font loading.
Read our guide on how to improve and optimize CLS issues here.
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.
Google's Page Experience update, introduced in 2021, emphasizes user experience as a crucial ranking factor. This update integrates Core Web Vitals - LCP, INP (replacing FID), and CLS—alongside other existing ranking signals to evaluate the overall experience of a webpage.
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.
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.
Good Page Experience is important but it is one of several important ranking factors like:
1. Mobile-Friendliness: Verify that your site is fully responsive and performs well on mobile devices.
2. Site Security & Safe browsing with HTTPS: Ensure your site is secure by using HTTPS.
3. Minimize Intrusive Interstitials: Avoid pop-ups that can disrupt the user experience.
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.
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. Understanding the distinction between field data and lab data is crucial for effective web performance analysis:
Field Data or RUM (real-user monitoring) is collected from real users' interactions with your site, providing insights into actual user experiences.
1. Google Search Console: GSC is a free tool that provides Core Web Vitals reports based on real user data, highlighting pages that are performing well or need improvement. Learn how to use GSC Core Web Vitals Report.
2. PageSpeed Insights: Uses both field data and lab data to offer a comprehensive analysis of page performance. It provides a score for both mobile and desktop versions of the website and identifies opportunities to improve the page's performance.
Lab data is generated in a controlled environment, simulating how a page performs under various conditions. Tools that rely on lab data include:
1. Google Lighthouse: Analyzes page content and provides actionable suggestions to enhance performance. This tool is essential for diagnosing issues in a controlled setting.
2. Quattr: An AI SEO platform, Quattr uses lab data to generate a comprehensive set of performance metrics and audits, helping to identify and prioritize areas for improvement. 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.
By leveraging both types of data, you can gain a holistic understanding of your site's performance and take targeted actions to optimize user experience.
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:
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:
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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).
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 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.
.svg)
.svg)
