Google has launched a new game-changing metric for ranking websites on its search engine. Good UX and page loading experience will be a crucial factor in website ranking. Google has newly introduced core web vitals.
By checking the site speed reports you can identify areas that need improvement and track the extent of those improvements.
Measurement of site speed would be difficult to understand and confusing and the rate of measurement will change each time you test your site.
Core web vitals are ranking signals or metrics that Google uses to evaluate your website’s overall user experience. The Core Web Vitals report shows how your pages perform on users’ experience.
It assesses your website’s speed and visual stability with existing users’ overall page experience and user-friendliness.
Three core web vitals:
- Loading performance (how fast does the content appear on the screen)
- Responsiveness (how fast the page reacts to the input)
- Visual stability (does content moves on the screen while loading)
There are three most important core web vitals:
LCP ( Largest Contentful Paint):
This assesses the duration of the largest piece( image or text block) of the content appearing on the screen or time taken from clicking on the link to showing the largest part (image or text block) of the content of the website on screen.
Good LCP score:
To have an honest user experience, the Largest Contentful Paint (LCP) measurement of sites should be in green and of 2.5 seconds or less.
How to check your LCP score?
You can check it on Google Page Speed Insight sites :
- Go to PageSpeed Insights
- Enter your website URL in the search box
- Click on Analyze
After clicking on Analyze, you will get the report of your website on screen. There you can check your LCP score. If it’s in 2.5 seconds or less, then your Largest Contentful Paint is good. If it is in between 2.5s and 4s or 4s it needs improvement, if more than 4s then it is poor. Make sure your website should come in under 4 seconds.
This can be challenging for you if you have a large website having large pages, multiple large images, and multi-features.
You Can Use Other Tools Too:
Core Web Vitals report - Search Console Help
Lighthouse | Tools for Web Developers
GTmetrix | Website Performance Testing and Monitoring
Factors Affecting LCP:
Slow Server Response Times
Render-blocking JavaScript and CSS
Slow Resource Load Times
Issues on client-side rendering
2) FID ( First Input Delay):
FID measures the time of load responsiveness.
It means FID measures the time from when a user first interacts (click a link, tap on a button, or use a custom) to the time when the browser can begin processing in response to that interaction. It measures the time it takes for users to truly do something on your page.
FID only measures the first interaction.
FID measures input delay, not processing
Good FID score:
To have a good user experience, the First Input Delay (FID) measurement of sites should be in green and less than 100ms.
Firstly, Under 100 milliseconds or less is considered “good”
Secondly, Between 100 and 300 milliseconds is taken into account “in need of improvement”
Thirdly, Above 300 milliseconds is considered “poor”
You can check your website’s FID score using these tools:
Core Web Vitals report - Search Console Help
Lighthouse | Tools for Web Developers
GTmetrix | Website Performance Testing and Monitoring
How to Improve your FID?
Improve FID by optimizing your CSS Code.
Improve FID by optimizing your JavaScript Code.
Improve FID by reducing Third Party Code impacts.
3) Cumulative Layout Shift (CLS):
CLS is a user-centric metric for visual stability.
This metric takes under consideration the visual stability of a page because it loads.
It measures all layout scores for every unexpected layout shift that happens during the entire loading of the page.
Good CLS score:
To have a good user experience, sites should be in Green and will strive to possess a CLS score of 0.1 or less.
Any measurement underneath 0.1is great, while anything from 0.1 to 0.25 requirements work. And everything above 0.25 is poor.
Most Common Causes Of Cumulative Layout Shift Are:
- Images without dimensions,
- Ads, embeds, and iframes without dimensions,
- Dynamically injected content,
- Actions expecting a network response before updating the DOM.
You can check your website’s CLS score using these tools:
Core Web Vitals report - Search Console Help