Google is a search engine that helps to match a user’s query with the best possible results. In the past, Google’s algorithm would find high-quality content that matched the search intent. It would also audit for safe browsing, basic experience signals, and mobile friendliness. Google web vitals is a set of user-focused metrics that are designed to provide a smooth and seamless user experience. These metrics measure web page content and they focus on; content loading speed (LCP), interactivity (FID), and visual stability (CLS).
Loading: Largest Contentful Paint (LCP)
This refers to the average loading time of the main content found on a page. LCP is an indicator of how quickly the main visible content takes to appear. Google will use LCP to determine how fast the first meaningful piece of content loads either in media or text. This is scored at the page level, therefore, an individual page’s content must load in 2.5 seconds or less, for it to meet the user experience standards set by Google. However, depending on the page this element could be H1, blocks of text, featured image, background image loaded with the URL() function, <img> element, image inside a <video> element, or an <image> element inside an <svg> element. If you want to provide the best user experience to your customers, aim for a good LCP score. One can improve their LCP score by; upgrading to a faster web host, setting up lazy loading of images, installing a CDN, removing any unnecessary third-party scripts, removing large page elements that take more time to load, and minifying your CSS.
Interactivity: First Input Delay (FID)
This metric measures the time from when a user inputs a command or action (tapping, clicking, swiping, etc) and the page executes it. First inputs include buttons or pressing keys and clicking links. In short, interactivity is page responsiveness. According to Google, an FID of 100 milliseconds or less is considered to be good. To improve FID one should reduce the impact of third-party code that has to load before a user can interact with their site, defer (or minimize) JavaScript since it’s difficult for users to interact with your site when JS is running, and implement browser caching which stores certain elements in a user’s browser.
Visual Stability: Cumulative Layout Shift (CLS)
This metric measures your website page stability while it loads, that is, does stuff move around the screen while it’s loading and how often does this happen. It’s important to calculate CLS based on real user interactions and not just lab data. According to Google, a CLS score of 0.1 or less is ideal and a page needs to hit 75% mark of the time on both desktop and mobile. Visual stability improves your overall SEO performance and enhances the user experience. To improve the CLS score, you should; put all ads in reserved spaces so that they don’t appear suddenly, use set size attribute dimensions for any media so that the user’s browser knows how much space they’ll take up, and avoid banners or pop-ups that cause the screen layout to shift when the site is first loading.
How to measure web vitals
Google incorporates web vitals measurement capabilities into many of its existing tools. These vitals can be measured using;
PageSpeed Insights
PageSpeed Insights is capable of measuring web vitals in both the lab and field sections of the report because it has been upgraded to use Lighthouse 6.0. It gives you an idea of the perceived loading speed of your site and also identifies opportunities to improve the performance of your page.
Search Console
Google Search Console monitors your site’s performance and helps you improve your site to how Google sees it. It also helps you understand how your site is performing on Google Search.
Lighthouse
It’s a page experience tool built by Google to audit Progressive Web Apps (PWA) initially. It was recently upgraded to version 6.0, including new metrics, additional audits, and a newly composed performance score. It not only measures performance but also checks SEO, various best practices, and accessibility.
Chrome UX Report (CrUX)
This report is a public dataset of real user experience data that comes from opted-in users in the field. The data collected is how Google sees the performance of your website.
Web Vitals Extension
It is a diagnostic tool that provides instant feedback on loading, interactivity, and layout shift metrics.
Chrome DevTools
It has been updated to help site owners to find and fix visual instability issues on a page that can contribute to CLS. It also measures Total Blocking Time (TBT) which is useful for improving FID.
Conclusion
LCP, FID, and CLS metrics capture important user-centric outcomes, are field measurable, and have supporting lab diagnostic metric equivalents and tooling.
