What makes up Core Web Vitals?
Loading- Largest Contentful Pain (LCP)
LCP is the metric used to measure the loading performance of your page. It is the time taken to show the largest content on the screen without scrolling that is ready for interaction. The metric only considers what is relevant to user experience, which is:-
Background text with CSS
Text elements, like paragraphs and headings
The benchmark for a good LCP score is 2.5 seconds, and anything longer than 4 seconds is considered as a poor user experience and is replaced with a better website.
2. Interactivity- First Input Delay (FID)
FID captures the user’s impression of the site’s responsiveness. It measures interactivity (in milliseconds), the time between an action and its execution. Examples of interaction include:-
Clicking a link or a button
Entering text into a blank field
Selecting a drop-down menu
Ticking a checkbox
3. Stability- Cumulative Layout Shift (CLS)
Layout shifts can be distracting and annoying when elements of the page suddenly move around a split second before you click, leading you to a response you don’t desire.
CLS = Impact Fraction x Distance Fraction
CLS measures the instability of a page and gauges how long it takes for the elements to stabilise before user interaction. The common causes for poor stability are:-
Images with no dimensions
Ads, embeds or iframes without dimensions
Content injected dynamically
Incorrect use of fonts causing FOIT/FOUT
Actions updating DOM after network response
The expected score for cumulative layout shift should not be more than 0.1, and anything above 0.25 is unacceptable for a good ranking.