Core Web Vitals
The core web vitals as the name suggests are the parameters which specify the health of our site [ health -> judgement of a thing, how much it is in good condition ]. Now this is related to a few parameters like
- Loading time
- Page interactivity
- Visual stability
The web vitals are now also responsible for the SEO of a website, google uses this parameter as well to determine how the site would be ranked.
Loading time -> How much time does the site take to load.
Interactitivty -> How much delay is there after the first input from the user.
Stability -> The content of the site is stable and not switching positions.
Some factors on which the rankings [ Signals ] depends upon ->
- HTTPS -> This is necessary as it explains if our site is secure or not, this determines whethe the connection of the user to the site would be secure.
- Mobile Friendly -> It determines whether the site would perform the same and won’t break across multiple platforms.
- No Intrusive Interstitials -> Modal or any content blocking the site interface without any interaction from the user side is considered in this category and it is considered bad. For e.g. a subscribe modal coming up our website without any user activity.
- First Input Delay -> It is a metric which determines the time taken by our website to start performing the execution of the event when the user first performs an action, the action can be anything like scrolling or tapping a button etc.
This can be delayed because of the condition if our site is busy loading or parsing a big JS file, so it won’t be able to listen to the events as the JS handler would be busy somewhere else. - Largest Contentful Paint -> This would be considered loading the media elements and the recommended value for it must be lower than 2.5 seconds, anything under 2.5 seconds would be considered a good metric, if our media data for example an image is very big and taking a lot of time we can optimize it in several ways, for example we can shrink the size of the image.
Or another thing, if the image is in the page somewhere, under the fold [ out of the view area of the user -> the user have to scroll the page to see it ], we can avoid loading it initially and we can look towards lazy loading it when required. - Largest Contentful Paint -> This metric determines that the layout of the page must not change from the initial load. To have a good user experience
Explanation -> For example if our content has been loaded for a login button, -> we click on that button and it would take us to the login page, now next to it is a register button, now if on the initial load, the buttons are loaded as plain text and we are adding the styling afterwards, if the user has his/her cursor on the login button, now after the style loading the content would shift the position a but and user can acciedentally click the register button instead -> This would be here conisdered a bad user experience.
The less layout shifts -> The better the ranking.
Some tools available to check the metrics
- https://developers.google.com/speed/pagespeed/insights/
- https://www.webpagetest.org/
- https://gtmetrix.com/ -> Preferred one as it also provides the way to fix and where to fix
- https://developers.google.com/web/tools/lighthouse