Core Web Vitals

The Core Web Vitals are the most important factors Google pays attention to in order to rank a website. Each of the Core Web Vitals represents a specific facet of the user experience, is measurable in practice, and reflects real-world experiences with an important user-centric outcome.

Google reserves the right to re-evaluate the most important Core Web Vitals from time to time. According to the most current set of 2020, it focuses on three aspects of the user experience - loading, interactivity and visual stability.

Largest Contentful Paint (LCP)

Measures charging performance. To ensure a good user experience, LCP should occur within 2.5 seconds of the page first 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 have a CLS of 0.1 or less.

To ensure that the recommended targets are met for most users, it is recommended to use the threshold of 75% for each of the above metrics.

What to do if the values are not enough?

LCP (Loading)

The LCP is all about the loading time of your page. It may well feel to the user as if the page is loading quickly and yet the measurement of the LCP value can be surprising. Here are some points you should pay attention to in order to achieve a better score:

• Bundle size: The larger a page is the more must be transferred over the Internet and the longer it takes until the page is fully loaded. Remove unused content like pieces of code, plug-ins or libraries. Use tools to detect unused code and reduce the bundle size to a minimum.
• Cache: A fast buffer memory can be a useful technique on both client and server side to store static content for a certain time and thus increase the response time.
• CDN: A content delivery network (e.g. Cloudflare) can help if the website visitor has to travel a long distance to the server. If a customer in the American region visits a website hosted in Europe, it is obvious that the connection takes longer than if a customer accesses from Europe.
• Web Hosting: With a faster infrastructure, requests can be processed faster. First it makes sense to optimize the website and only in a second step to increase the resources of the server, this keeps the fixed costs low and usually solves the problem at the root.

Source: https://web.dev/optimize-lcp

FID (Interactivity)

The FID factor is already a bit more abstract than the LCP. The FID measures the time from the first interaction (e.g. click on a button) to the current time in which the browser is able to process the event. A web page does more than the user sees at first sight. The FID checks if the website is able to react quickly to the user actions or if too many background tasks are running. To get the FID score under control pay attention to the following points:

• Long Tasks: One of the most common problems with JavaScript applications is probably that too long tasks block the main thread. All tasks which block the main thread longer than 50ms are characterized as long tasks. 
• Web-Worker: Computationally intensive and long tasks that can be separated should be processed in independent web-workers.
• Prioritization: Place 3rd-party tools like analytics scripts at the very end. The first elements to load should be those that are necessary for user interaction.

Source: https://web.dev/optimize-fid

CLS (Visual Stability)

The CLS deals with the content on the page, more specifically how firmly elements move or shift on the page. This factor is probably the most controversial measurement. No one but Google itself knows exactly how this value is arrived at. However, there are some hints on what a website operator should pay attention to:

• Images without mass: Images should always contain the two attributes 'width' and 'height'.
• Ads without mass: Analogous to the images, ads and iframes should also have these attributes.
• Font: Prevent FOUT and FOIT when loading the font from the Internet.
• Dynamic Content: Should be inserted if possible under existing content and not above.

Source: https://web.dev/optimize-cls

How do I measure the Web Vitals?

There are quite a few tools to determine the Web Vitals from a page.

PageSpeed Insights

Probably the easiest way to measure a website is the Speed Test from web.dev.

https://pagespeed.web.dev, enter the desired website and off you go. After only a few seconds a detailed report about the most important Web Vitals metrics will appear.

Google Search Console

If you are the owner of a website you can link your website to the Google Search Console. After linking you will get access to the Web Vitals data collected by Google from your site. If the website has only recently been launched, you need a little longer patience until Google can show you data.

In contrast to the PageSpeed Insight Test, you get access to data in the past. So you can better analyze your page and easily see which page is good and which still has room for improvement.

To the Google Search Console: https://search.google.com/search-console

Chrome User Experience Report (CrUX)

CrUX is the official dataset of the Web Vitals program. All user-centric Core Web Vitals metrics are represented in the dataset. CrUX data is collected from real browsers around the world, based on specific browser options that determine user authority. A number of dimensions and metrics are captured that allow website owners to determine how users experience their websites.

Google Search Console obtains its data from CrUX. To retrieve the data from CrUX directly there are several ways. The easiest is probably via the Chrome UX Dashboard in Google Datastudio.

To the Chrome UX Dashboard: http://g.co/chromeuxdash

Other gauges (bonus)

Is the site mobile optimized?

To find out if a certain website is optimized for mobile, or. whether Google sees that a page is suitable for mobile devices, a simple test can be performed. 

To test: https://search.google.com/test/mobile-friendly

How do social media platforms see a website?

When a link from a website is shared on a platform like Facebook, Instagram, or WhatsApp, the corresponding platform displays a preview of the page in each case. Open Graph is an established standard for providing meta data on a page. Based on this meta data, the platform knows how to display the preview. On the following page you can check with just one click how the platforms sees and displays a web page.

To test: https://www.opengraph.xyz/

.