Core Web Vitals Essentials
Sections
- What Are Core Web Vitals?
- Why it Matters
- Deep Dive: Cumulative Layout Shift (CLS)
- Deep Dive: Interaction to Next Paint (INP)
- Deep Dive: Largest Contentful Paint (LCP)
- Measuring Web Vitals
What Are Core Web Vitals?
Core Web Vitals are metrics introduced by Google to measure website performance from the user's point of view. They serve as indicators of overall site performance, focusing on loading speed, visual stability, and interactivity.
Google considers Core Web Vitals an important ranking signal. Improving these metrics lead to faster websites, happier users, and contribute to better search engine performance.
Core Web Vitals: Primary Metrics
More Web Vitals Measurements
FCP First Contentful Paint ▪ Time between page navigation and when the first page content is visible
TTI Time to Interactive ▪ Time when the page becomes fully usable
TTFB Time to First Byte ▪ Initial server response time
TBT Total Blocking Time ▪ a measure of how long the main thread is too busy to prioritize user input
"Each of the Core Web Vitals represents a distinct facet of the user experience, is measurable in the field, and reflects the real-world experience of a critical user-centric outcome."
Web Vitals on web.dev (April 2024)
Why It Matters
Web performance and Core Web Vitals scores are key signals for SEO rankings. Improving these metrics will positively impact your site's search engine performance.
"Google's core ranking systems look to reward content that provides a good page experience."
"Core Web Vitals are used by our ranking systems. We recommend site owners achieve good Core Web Vitals for success with Search and to ensure a great user experience generally."
"Beyond Core Web Vitals, other page experience aspects don't directly help your website rank higher in search results."
In other words, Core Web Vitals are important.
All together, CLS, LCP, and INP give a good snapshot of how performant a website is. Improving these metrics can lead to better user experiences and signals to users and search engines alike that our site is well optimized and reliable.
Core Web Vitals are crucial. Together, CLS, LCP, and INP offer a snapshot of website performance. Improving these metrics can lead to better user experiences and SEO rankings.
Next, let's dive into some details of these primary metrics and see how they can be improved using Visionary.
CLSCumulative Layout Shift
Cumulative Layout Shift (CLS) is a metric that measures the visual stability of a webpage, quantifying how much the page content shifts while loading, which may cause a poor user experience.
Unexpected layout shifts can disrupt the user experience in many ways, from causing them to lose their place while reading if the text moves suddenly, to making them click the wrong link or button. In some cases, this can do serious damage.
Cumulative Layout Shift
on web.dev (September 2024)
Measuring Cumulative Layout Shift
- CLS values range from 0 to 1, where a lower score is better.
- A score of 0.1 or lower is considered good by Google web standards (see: What is a good CLS score?).
How Visionary Improves Cumulative Layout Shift
Visionary eliminates visual layout shifts by rendering a true-to-size, responsive placeholder on the DOM as soon as possible. This placeholder reserves the exact space needed for the image, preventing any unexpected layout shifts that may occur when the image finishes loading.
By maintaining the page's layout stability throughout the loading process, Visionary Image not only improves the measured CLS score but also enhances the user's perceived performance of the webpage.
Back to top
Further Reading: Cumulative Layout Shift
INPInteraction to Next Paint
Interaction to Next Paint is a measure of interactivity and measures the responsiveness of a page during user interactions. This is done by timing the latency between user interactions (clicks, taps) and the processing of those actions. The final INP value is the longest interaction observed.
Measuring Interaction to Next Paint
- Interaction to Next Paint is a number measured in milliseconds, where lower is better.
- Google recommends an INP of 200 milliseconds or less to provide a good user experience.
A critical aspect of interactivity in the page lifecycle is during startup. As a page loads, it will initially render, but it's important to remember that just because a page has rendered, doesn't mean that the page is finished loading. Depending on how many resources a page requires to become fully functional, it's possible that users may attempt to interact with the page while it's still loading.
Optimize Interaction to Next Paint
on web.dev (April 2024)
How Visionary Improves Interaction to Next Paint
Visionary Image automatically lazy-loads off-screen images, minimizing the number of images downloaded during the initial page load. This speeds up page load, reducing the time it takes for the page to become fully interactive, improving both the Interaction to Next Paint (INP) and Total Blocking Time (TBT) scores.
- TBT is the time between First Contentful Paint (FCP) and Time to Interactive (TTI) when the main thread is too busy to prioritize user input.
Back to top
LCPLargest Contentful Paint
Largest Contentful Paint (LCP) is a metric which measures the time it takes for the largest image or text element to render in the viewport. This metric is designed to correlate with users' visual rendering experience, as it represents the point at which the main chunk content of the page has visually loaded.
Measuring Largest Contentful Paint
- LCP is measured in seconds, with lower values being better.
- An LCP score of 2.5 seconds or less is considered good.
How Visionary Improves Largest Contentful Paint LCP
When the largest page element is an image, Visionary Image optimizes LCP by immediately rendering a placeholder div that matches the image's dimensions. This is a positive signal for the LCP metric, as it indicates the main content is being displayed quickly, even before the actual image has finished loading.
Visionary's lazy loading feature ensures that the image is only loaded when it's about to enter the viewport. This prioritizes the loading of visible content and defers the loading of below-the-fold images, further improving the LCP metric.
Back to top
Measuring Web Vitals in Production
The easiest way to get started is with the PageSpeed Insights web app. This is a tool hosted by Google which gives results Lighthouse results as well as real user field data via the Chrome UX Report database.
For sites with traffic already, see how real users experience your web site at Chrome User Experience Report (CRuX) Dashboard. CRuX data is also available via BigQuery dataset and API access.
Closing Thoughts
By prioritizing Core Web vitals, you will not just be optimizing for search engine rankings, you will create websites that geniunely delight your users.
By providing early visual feedback, Visionary improves the perceived loading speed and enhances the overall user experience.