Web Vitals are factors that Google measure to estimate quality of user experience on web pages and includes that results in page ranking.
One of way to send good "SEO signals" to google search engine and to improve quality and quantity of website traffic from search engine for your webpage is to improve the core web vitals. Main aspects of them are:
- speed of page loading
- speed in which main content on page is loaded (largest contentful paint)
- interactivity of page (first input delay)
- visual stability
LARGEST CONTENTFUL PAINT
It is used for measuring how quickly the main content loads and is visible to users. Based on google's researches, best measurement for this is to track rendition of the largest element on the page (image or text block). Elements that are relevant for LCP are:
- image,
- video,
- an element with a background image loaded via the url() function ,
- block-level elements that have text child elements.
Size of element is calculated based on what user see (only inside of the viewport, without margins, paddings or borders).
It is considered as most convenient measure for user impression of speed of page loading.
If your page loads within 4 or more seconds, users will have bad experience. Good performance assumes that a page is loaded within less than 2.5 seconds and everything more than that means that your page needs improvements.
Some of ways to improve LCP score are to do preload important resources, compress text files or images.
FIRST INPUT DELAY
It shows how interactive and responsive is your page. Measures how long user must wait to interact with a web page. That refers to event processing which happens on some user action (click, tap, key presses) and only to first input, because first impression is most important for users and also it happens during page loading, so it can discover some critical point of page. It does not measure duration of event handling or time in which browser update UI, so it should be used in combination with other metrics to get some conclusions.
First input delay should be less than 100 ms in the 75th percentile of page loads, which should be tracked on both mobile and desktop devices.
Bad results for FID are caused with long JS parsing and execution, which blocks browser's main thread and delay running of event listeners.
To prevent bad core web vitals report, developers should take care to use best practices in writing and organising code. Some of roles that JS developers should follow in writing fast performance code are:
- put your scripts at the end of body tag if that is possible - if that scripts are not needed for initial render, because while script is executing, other things are blocked (parsing of other scripts, rendering of a page, users actions)
- If we have external JS file, load time will be longer because that file first must be downloaded and after that executed. In that case use less bigger files instead of many small external files, because each http request that is sent makes additional performance decrease
- add scripts dinamicaly to the DOM
- use for in loop only when you do not knew the size of collection in which you iterates, because it is much slower than other loop types
- create var for conditions before loop execution, to decrease number of comparison that are executed in each iteration
VISUAL STABILITY
It refers to unexpected moving of page parts, from one rendered frame to the next, and it is caused by changing position of existing elements. For example: user clicked on some button and just in that moment the button is moved on other position, or even worse, in its place there is other button now and user clicked on unwanted action.
To calculate the layout shift score, the browser looks at the viewport size and the movement of unstable elements in the viewport between two rendered frames. The layout shift score is a product of two measures of that movement: the impact fraction and the distance fraction.
Impact fraction is part of page in which transition happens (that was covered with moving element before move and that is covered with element after move), expressed in percents of viewport.
Distance fraction is distance between first and second element position, measured in percent of the largest viewport dimension.
To provide a good user experience, pages should maintain a Cumulative Layout Shift of less than 0.1. You can achieve it by following next roles:
- Use CSS aspect ratio boxes to take place for images and video elements, or set size for them in order to reserve space and enable to the browser allocation of document space during elements loading. You can also force this behaviour by using the unsized-media feature policy.
- The only case in which it is allowed to insert content above the existing one is when it is the result of the user's action, because then the layout shift is expected
- Animations should be made to provide context and continuity from state to state
Core web vitals are combined with other search signals to evaluate page experience for search ranking. Additional signals are mobile-friendliness, safe-browsing, https and complaintments about intrusive interstitials. Data source for this metrics in Google comes from field data (real user metrics) and lab data (used for testing). Tools for measuring this variables are Chrome User Experience Report, PageSpeed Insights and Search Console(Core Web Vitals report). Each of the Core Web Vitals can be measured in JavaScript using standard web APIs.