Web Vitals, an initiative by Google, provides unified guidance for quality signals that are essential for delivering a great user experience on the web. Whether you’re a business owner, marketer, or developer, understanding and optimizing for Core Web Vitals is key to the long-term success of your website.
Introduction to Core Web Vitals
Google has provided various tools over the years to measure and report on website performance. However, the abundance of tools and metrics has made it challenging for some developers to keep up. The Web Vitals initiative aims to simplify the landscape and help sites focus on the metrics that matter most – the Core Web Vitals.
Core Web Vitals are a subset of Web Vitals that apply to all web pages and should be measured by all site owners. These metrics represent distinct facets of the user experience, are measurable in the field, and reflect real-world user-centric outcomes.
The current set of Core Web Vitals for 2020 focuses on three aspects of the user experience: loading, interactivity, and visual stability.
The Core Web Vitals for 2020 include the following metrics and their respective thresholds:
Largest Contentful Paint (LCP): Measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.
First Input Delay (FID): Measures interactivity. To provide a good user experience, pages should have an FID of 100 milliseconds or less.
Cumulative Layout Shift (CLS): Measures visual stability. To provide a good user experience, pages should maintain a CLS of 0.1 or less.
To ensure you’re hitting the recommended targets for most of your users, it’s important to measure these metrics at the 75th percentile of page loads, segmented across mobile and desktop devices.
Understanding the Lifecycle of Core Web Vitals Metrics
Metrics on the Core Web Vitals track go through a lifecycle consisting of three phases: experimental, pending, and stable.
Experimental: Experimental metrics are prospective Core Web Vitals that may still be undergoing significant changes based on testing and community feedback. This phase allows for the exploration of problem-solving and iteration on previous metrics.
Pending: Pending metrics are future Core Web Vitals that have passed the testing and feedback stage and have a well-defined timeline to becoming stable. These metrics are held in this phase for a minimum of six months to give the ecosystem time to adapt.
Stable: Stable metrics are the current set of Core Web Vitals that Chrome considers essential for great user experiences. They are actively supported and may be subject to bug fixes and definition changes. Stable Core Web Vitals metrics won’t change more than once per year unless there is a significant reason to do so.
When a metric is initially developed, it enters the ecosystem as an experimental metric. The experimental phase allows for flexibility in the metric’s development, bug identification, and community feedback.
Once an experimental metric has received sufficient feedback and proven its efficacy, it becomes a pending metric. Pending metrics are held in this phase for a minimum of six months to allow developers to adapt to the changes.
When a Core Web Vital candidate metric is finalized, it becomes a stable metric and is considered a Core Web Vital. Stable metrics are long-lived but can be retired and replaced by other metrics if they address the problem area more effectively.
Tools for Assessing Core Web Vitals
Google is committed to surfacing Core Web Vitals in all of its popular tools. The Chrome User Experience Report (CrUX) collects anonymized, real user measurement data for each Core Web Vital. This data enables site owners to quickly assess their performance without manually instrumenting analytics on their pages.
Google provides several tools that support Core Web Vitals:
PageSpeed Insights: This tool analyzes the performance of web pages and provides insights into the Core Web Vitals metrics.
Search Console’s Core Web Vitals Report: This report in Search Console helps site owners identify and fix issues related to Core Web Vitals.
In addition to these Google tools, there are other ways to measure Core Web Vitals:
Using JavaScript: Each of the Core Web Vitals can be measured in JavaScript using standard web APIs. The web-vitals JavaScript library is a useful tool for measuring and reporting Core Web Vitals data to an analytics endpoint.
Analytics Tools: Some analytics providers have built-in support for Core Web Vitals metrics. Even if your analytics tool doesn’t have built-in support, you can use custom metrics to measure Core Web Vitals.
Web Vitals Chrome Extension: This extension measures Core Web Vitals metrics as users browse the web, providing insights into the performance of your own sites, your competitors’ sites, and the web at large.
Measuring Core Web Vitals in JavaScript
To measure Core Web Vitals in JavaScript, you can use the web-vitals JavaScript library. This library is a small, production-ready wrapper around the underlying web APIs that accurately measures each metric.
Here’s an example of how to use the library to measure Core Web Vitals:
“`javascript
import { onCLS, onFID, onLCP } from ‘web-vitals’;
function sendToAnalytics(metric)
{
const body = JSON.stringify(metric);
(navigator.sendBeacon && navigator.sendBeacon(‘/analytics’, body)) ||
fetch(‘/analytics’, { body, method: ‘POST’, keepalive: true });
}
onCLS(sendToAnalytics);
onFID(sendToAnalytics);
onLCP(sendToAnalytics);
“`
By configuring your site to use the web-vitals library, you can measure and send Core Web Vitals data to an analytics endpoint. This data can then be aggregated and reported to see if your pages are meeting the recommended thresholds.
Lab Measurement of Core Web Vitals
While field measurement provides the most accurate picture of a site’s performance, lab measurement is also important for testing performance during development and catching performance regressions. The following tools can be used to measure Core Web Vitals in a lab environment:
Lighthouse: This tool loads pages in a simulated environment and provides performance insights, including metrics related to Core Web Vitals.
WebPageTest: This tool allows you to run tests on web pages and provides various performance metrics, including those related to Core Web Vitals.
Lab measurement is essential for catching and diagnosing potential issues before they impact real users. However, it should not be a substitute for field measurement, as the performance of a site can vary based on user devices, network conditions, and other factors.
Recommendations for Improving Core Web Vitals Scores
Once you’ve measured Core Web Vitals and identified areas for improvement, it’s important to optimize your pages.
Here are 12 recommendations for optimizing each Core Web Vital:
- Largest Contentful Paint (LCP):
- Optimize server response times.
- Minimize render-blocking resources.
- Use a content delivery network (CDN) to reduce latency.
First Input Delay (FID):
- Minimize JavaScript execution time.
- Optimize event handlers and use requestIdleCallback.
Reduce the impact of third-party code.
Cumulative Layout Shift (CLS):
- Use size attributes for images and videos.
- Reserve space for ads and embedded content.
- Avoid dynamically injected content that shifts the layout.
By following these recommendations, you can improve your Core Web Vitals scores and deliver a better user experience to your site visitors.
Other Web Vitals
While the Core Web Vitals are crucial for understanding and delivering a great user experience, there are other vital metrics as well. These metrics often serve as proxies or supplemental metrics for the Core Web Vitals and aid in diagnosing specific issues.
For example, Time to First Byte (TTFB) and First Contentful Paint (FCP) are vital aspects of the loading experience and can help diagnose issues with Largest Contentful Paint (LCP). Similarly, Total Blocking Time (TBT) and Time to Interactive (TTI) are lab metrics that aid in diagnosing interactivity issues that impact First Input Delay (FID).
These other Web Vitals are context-specific and may change more frequently than the Core Web Vitals. They are valuable for capturing a larger part of the user experience and diagnosing specific issues.
Evolving Web Vitals
Web Vitals and Core Web Vitals represent the best available signals for measuring the quality of experience on the web. However, these signals are not perfect and may be subject to future improvements or additions.
The Core Web Vitals are expected to have a stable definition and threshold, with updates communicated in advance and on a predictable, annual cadence. Other Web Vitals may change more frequently based on specific contexts and tools.
Developers can stay updated on changes to Web Vitals by referring to the public CHANGELOG, which documents any changes made to the metrics.
Final Thoughts – Core Web Vitals
Optimizing for Core Web Vitals is essential for delivering a high-quality user experience on the web. By measuring and improving these metrics, you can enhance the loading, interactivity, and visual stability of your website.
Use the recommended tools, follow the optimization recommendations, and stay updated on changes to the Web Vitals ecosystem to ensure your site provides a great user experience.