Google’s Core Web Vitals in 3 Comprehensive Parts

The first part of Google’s Core Web Vitals is Largest Contentful Paint, which is a way to measure the time it takes for a page’s main content (like the largest image or text block or a video) to load. The content that is measured for loading time is the content that is visible on a user’s screen; if an image is resized, then the resized version is what is measured. 

Webpages load blocks of content at a time according to the way the HTML (Hypertext Markup Language – the written code that makes the content of the pages) and CSS (Cascading Style Sheets – tell the software how the content should appear on the screen) is set up. It is possible to tell the website to load/render specific content first before loading other content. According to Google, an ideal LCP measurement is 2.5 seconds or faster. 

You can find your site’s speed by utilizing Google’s free tools:

• Chrome User Experience Report
• PageSpeed Insights
• Search Console (Core Web Vitals report)
• Lighthouse (open-source tool)

Next for Google’s Core Web Vitals is First Input Delay, which is a way to measure the time it takes for a page to become interactive by clicking a mouse, pressing of keys, or tapping a screen. Pages take some time to load, and, while they are loading, there is a period of time that the page will not respond to inputs by users. This period of time is between when the page starts loading and when a good portion of the content has been rendered (how much of the content differs from site to site). This loading period can include rendering images and videos or other content that take longer to load. 

The reason the time until the user can first interact with the site is that users like to check to make sure the page hasn’t crashed or is otherwise having issues. Users also may have selected the page accidentally so they want to go back to select the page they meant to select as quickly as possible. User Experience is critical for making a site appealing and friendly to consumers, so make sure your site’s UX is as optimal as possible. According to Google, an ideal measurement for first input delay is less than 100 milliseconds.

A page can change what it is showing because of pop-up ads, other content loading at different times, a font or image that came in wrong or took longer than expected to load, or third-party ads or widgets that moved or resized themselves. Cumulative layout shift measures the amount of unexpected (at least by users) layout shift of visual page content. Basically, it measures the greatest point that visual pieces of content and/or widgets move or resize themselves causing the page’s layout to change and shift. This usually occurs in a couple of seconds. 

A shift is measured by how far a content or widget is moved or resized from it’s initial place that it loaded on the page. An ideal measurement of CLS is less than 0.1, meaning very little shifts or none at all is optimal. A layout shift is not always bad. When a user opens a drop-down menu, they are intentionally causing a layout shift. CLS only measures when content moves suddenly and without user input.