Mastering Core Web Vitals: Navigating the Trickiest Performance Metrics

on 07 Sep 2023, by Bogdan, in Blog, Cloud, Guides

by Bogdan

Understanding your site’s Core Web Vitals can help you improve your page user experience significantly. These performance metrics help you quantify the experience of your website and identify opportunities to improve.

In this article, we’ll navigate you through the three main Core Web Vitals for websites. We’ll discuss what they are, their significance, and other performance metrics you can follow. Let’s start with what Core Web Vitals are and how they relate to your site’s user experience and performance.

The Importance of Core Web Vitals

Currently, Google considers a page's user experience as an official factor for its search rankings. Google has set specific minimum scores (as we’ve already seen) for various metrics that evaluate a site’s user experience. If your website's performance falls below these thresholds, it could negatively impact your site’s visibility and overall ranking in search results.

This change emphasizes the important role of Core Web Vitals, among other factors that affect the search signals for page experience. These include mobile-friendliness, safe browsing, HTTPS, and unintrusive interstitials & dialogs.

What are Core Web Vitals

By definition, Core Web Vitals is a set of user-centric metrics that Google uses to help you measure your site’s user-friendliness. For this, Google uses real-world user experience information it gathers over time to grade your website’s performance based on three critical aspects of user experience:

The site’s loading speed – This is how fast content on your website appears.
Interactivity – This is how long it takes for a user/visitor to be able to interact with your website and do things like clicking a button.
The visual stability of your page – This is how stable your website is.

There is a lot of data to measure the values of Core Web Vitals. It’s rewarding if your website can meet the threshold Core Web Vitals metrics scores. For this reason, research shows that your users are 24% less likely to abandon your page load.

Important note: Core Web Vitals metrics are obtained from Google’s CrUX dataset. This database stores data on the user experience of actual Chrome users who’ve interacted with your website. As a result, the Core Web Vitals report you will receive is reliable and provides actionable recommendations that can help you improve specific areas that determine your page’s user experience.

Are you interested in knowing how your website performs?

Tools to Measure Your Site’s Core Web Vitals

You can measure your site’s Core Web Vitas using the following Google performance analysis tools:

PageSpeed Insights – reports Core Web Vitals data on mobile and desktop platforms over a 28-day collection period and provides suggestions on improving your page’s performance. It also uses Lighthouse to measure and monitor web performance and other metrics such as SEO, site accessibility, and best practices.

Google Search Console – reports on how your website meets Core Web Vitals based on how your audience uses your site under the Enhancements section. Essentially, as its name suggests, Search Console also measures your site’s search traffic among others.

Web Vitals Chrome extension (best for developers) – measures and reports Core Web Vitals performance in real-time.

For example, to use Google PageSpeed Insights, simply go to the PageSpeed Insights site, enter your site’s URL, and hit the Analyze button. If it’s done running analysis of your website, you’ll receive personalized results on the Core Web Vitals of your site.

Google PageSpeed Insights will show you if you’ve passed, failed, or need improvements. Generally, the results you receive for your website depend on the three Core Web Vitals you see immediately beneath; LCP, FID, and CLS. All these three metrics need to be green to pass Core Web Vitals on your website.

The three main metrics of Core Web Vitals in Google

The above-mentioned Core Web Vitals metrics; LCP, FID, and CLS measure three simple concepts we’ve already introduced. In this section, we’ll discuss these three metrics in more detail.

Loading: Largest Contentful Paint (LCP)

The Largest Contentful Paint (LCP) measures the loading speed performance of your website. Specifically, it measures the time from when the user starts loading your page until the largest content is displayed within the viewport. The largest content painted on your screen can include images (image elements & background images), block-level text, video, and much more.

If you expand the view of the PageSpeed Insights report, Google recommends that sites should strive for an LCP of less than 2.5s for at least 75% of page visits. This should provide a good user experience.

In order to meaningfully improve your LCP score, you need to look at the entire loading process, break it into smaller, manageable tasks, and identify key areas to improve separately. To get started, scroll down to the section called Diagnose performance issues. There you will be able to see image by image your website’s loading and the largest content coming into view. This section is labeled as View Treemap.

It will also list opportunities like eliminating render-blocking resources, reducing image size, and much more in order to improve your site’s LCP. Read this article for more information on how to improve your site’s LCP.

Note: LCP allows you to know how long it generally takes for the most significant part of your webpage to fully show up and be ready for users to interact with. Nobody likes waiting for a web page to load. If you can get your LCP to load quickly, it implies users get to see and use the important parts of a page faster.

Interactivity: First Input Delay (FID)

First input delay (FID), on the other hand, evaluates your page’s interactivity. It measures the time between when a user first tries to take an action on your page and when your page is able to process their action. The interactions encompass various actions such as button clicks, link selections, key presses, taps, and more. Ideally, your page should take less than 100 milliseconds or fewer to start processing a click.

There are a lot of things that contribute to the interactivity of your website. Just like with LCP, Google PageSpeed Insights provides several suggestions in the opportunities section to help you improve your FID score.

Note: It's worth noting that a common technique for enhancing FID involves implementing lazy loading. This strategy prioritizes specific components of your website that are more likely to be required sooner when a user starts browsing your page.

Other best practices include:
Remove or optimize third-party scripts ( aka lazy loading).
Load code needed for the page first, and reduce code that fetches data
Speed JavaScript execution
Keep the main thread idle by running long tasks off the main thread.

Visual Stability: Cumulative Layout Shift (CLS)

Lastly, the visual stability of your page is measured by cumulative layout shift (CLS). It checks for the disruptive nature of elements shifting unexpectedly as the page loads. CLS also measures the highest number of content shifts that happen at once and the fraction of the viewport affected.

Such abrupt shifts can be frustrating for users, especially if they lead to accidental clicks or misinterpretation of content. The most common causes of poor CLS are images without dimensions, Ads, embeds, and iFrames without dimensions, dynamically injected content, web fonts, and more. Google recommends that 75% of your page should score 0.1 or less. A good place to get started is:

Setting dimensions for media elements: This allows the browser to allocate the necessary space upfront, reducing the chances of layout shifts caused by media loading.
Use CSS for dynamic content: For instance, if you have a gallery that loads images of various sizes, applying a consistent aspect ratio to the container can help maintain the layout's stability as images load.
Avoid ads that display at the very top of the page. Or, choose the most likely ad size based on previous ads,

Other performance metrics to check

In addition to the core performance metrics we've discussed, there are several crucial indicators that provide valuable insights into your site’s user experience and the overall efficiency of the website:

Speed Index (SI)

The Speed Index measures how quickly the content of a page becomes visible to users as it loads. It quantifies the visual rendering speed, taking into account the progressive display of content elements. A good SI score is 3.4 seconds or less. Your user experience quality is better when the above-the-fold content appears faster on the viewport.

First Contentful Paint (FCP)

FCP measures the time it takes for the first content element to appear on the screen as the page loads. Unlike LCP, FCP determines when users begin to see a visual response from the website. FCP is an essential metric for assessing initial user engagement and providing a baseline for evaluating subsequent performance metrics. A good FCP score should be 1.8 seconds or less.

Interaction to Next Paint and Total Blocking Time - INP and TBT

Interaction to Next Paint (INP) measures the delay between a user performing an action, like clicking a button, and the subsequent visual update on the webpage.

Total blocking time, on the other hand, is related to the interactivity of a web page. It measures the cumulative duration of time when a page is blocked from responding to user input. A good INP and TBT score should be less than 200 milliseconds for 75% of a page load.

Time to First Byte (TTFB)

TTFB quantifies the time it takes for the browser to receive the first byte of data from the server after making a request. It reflects the server's responsiveness and can be affected by factors like server location and server-side processing. A lower TTFB is indicative of a faster server response time, leading to quicker page loading. It should be less than 0.8 seconds.

Conclusion

Understanding and improving your site’s Core Web Vitals is a rewarding endeavor. It enhances your site’s SEO performance and accessibility, elevates user experience on your pages, and boosts your site's speed, performance, and user engagement. As site owners, prioritizing Core Web Vitals represents a strategic investment that allows you to drive more conversions and build a more successful online presence.

Article by Bogdan

Co-founder & Head of Design, Bogdan has a passion for everything that works great and looks awesome. Guilty for most of the UI and UX around this place, you can say "Hi" to him at bogdan at brizy dot io

Switch to Brizy Cloud and you will get automatic optimizations for Core Vitals

Brizy Cloud is built with a focus on delivering fast-loading and responsive websites. The platform employs various techniques and coding practices to minimize loading times, reduce server requests, eliminate render blockers and optimize website assets, resulting in better overall performance. This is crucial as faster-loading websites enhance user experience, improve search engine rankings, and increase user engagement.