All about Core Web Vitals

So what is Core Web Vitals?

For a long while, Google considered meta tags, alt tags, heading tags, website content and page load time as key factors that determine your website’s ranking. Now they are decidedly moving into the area of User experience – how visitors view your website, how easy it for them to interact with you site.

All metrics are given under 3 heads, GOOD, NEEDS IMPROVEMENT AND POOR to help you understand how urgently you need to rectify things on the website

The 3 acronyms you need to remember are LCP, FID and CLS.

1. Largest Contentful Paint (LCP)

   Forget the fancy words. It just means how fast your main content block loads. And that includes images, text and elements that comprise the visible area or viewport of a user.

   GOOD

   • Less than or equal to 2.5 seconds

   NEEDS IMPROVEMENT

   • Less than or equal to 4 seconds

   POOR

   • More than 4 seconds

   Aggregated LCP value is the time it takes for 75% of your visitors to complete LCP.

2. First Input Delay (FID)

   First input delay measures how soon your website will respond to a user action, like a click. After the visitor clicks on a link or a button, the time taken for your browser to respond to that click is FID.

   GOOD

   • Less than or equal to 100 milliseconds

   NEEDS IMPROVEMENT

   • Less than or equal to 300 milliseconds

   POOR

   • More than 300 milliseconds

   Aggregated FID is the minimum delay value for 75% of visitors to your site.

3. Cumulative Layout Shift (CLS)

   Elements on your page should not move around or shift, while the visitor tries to interact with the page. A score of 0 means that the elements don’t move around at all, and a score above .25 means that the elements are shifting too much.

   GOOD

   • Less than or equal to .1

   NEEDS IMPROVEMENT

   • Less than or equal to .25

   POOR

   • More than .25

   Aggregated CLS is the lowest common CLS for 75% of your visitors.

In addition to these three, there are some other factors measured in PageSpeed Insights based on Lab data, which would also help you understand the report better.

Additional factors that determine Core Web Vitals Scores

1. First Contentful Paint (FCP)

   FCP denotes the time taken for the first set of DOM(document object model) elements to load. DOM includes the head, title and body tags. It could include text, image or graphics; and basically tells the user that the site is on its way.

   GOOD

   • Less than or equal to 1.8 seconds

   NEEDS IMPROVEMENT

   • Less than or equal to 3 seconds

   POOR

   • More than 3 seconds

2. Speed index

   Speed index score is based on how quickly you website is visually available.

   GOOD

   • Less than or equal to 3.4 seconds

   NEEDS IMPROVEMENT

   • Less than or equal to 5.8 seconds

   POOR

   • More than 5.8 seconds

3. Time to Interactive (TTI)

   The time taken for a website to respond to user requests quickly (within 50 milliseconds), after the First Contenful Paint and other major elements load.

   GOOD

   • Less than or equal to 3.8 seconds

   NEEDS IMPROVEMENT

   • Less than or equal to 7.3 seconds

   POOR

   • More than 7.3 seconds

4. Total Blocking Time (TBT)

   TBT measures the time between First Contentful Paint (FCP) and Time to Interactive (TTI) where long tasks that took more than 50 milliseconds were blocking the user from interacting with the page.

   GOOD

   • Less than or equal to 200 milliseconds

   NEEDS IMPROVEMENT

   • Less than or equal to 600 milliseconds

   POOR

   • More than 600 milliseconds

How do you check your website’s Core Web Vitals score?

Currently, there are multiple ways to check your website’s Core Web Vitals scores.

1. Google search console

   Login to Search console. In the left navigation, under Experience, click on the link called Core Web Vitals. This gives you the mobile and desktop scores for your pages classifying them into Good, Needs improvement and Poor. Deep dive into the report gives you the list of URLs, and an option to export them.

   Data comes to this dashboard from Chrome UX report that is based on site usage data from around the world.

   
   

2. Page speed insights

   This is the easiest method to check Core Web Vitals score of any particular URL. Go to Page speed insights and enter the URL. It gives:

   • Overall score for the page
   • Field data on time taken for Largest Contentful Paint, First Contentful Paint, First Input Delay and Cumulative Layout Shift.
   • Origin Summary on aggregate data of all pages served from the website.
   • Lab data on time taken based on different parameters like Largest Contentful Paint, First Contentful Paint, Speed Index, Time to Interactive, Total blocking time, and Cumulative Layout Shift.
   • Treemap that shows what percentage of time is taken by the top elements on the page. This shows the relative importance of fixing specific elements on the page.
   • Opportunities – Suggestions that can help improve page load time.
   • Diagnostics – Specific suggestions that can be implemented to improve Core Web Vitals scores.
   • Passed audits – Areas where you website did well, but could be optimized further
   
   

3. Lighthouse Chrome Extension

   Add Lighthouse Chrome extension to your browser, and run it when you are on any page, and it will give you details related to that particular page.

   • Overall scores on Performance, Accessibility, Best Practices and SEO
   • Specific values and suggestions for each of these parameters including LCP, FCP, CLS, FID, content best practices and more.
   • You can also access the Lighthouse scoring calculator, which gives you values, metric scoring and weightage for the different parameters
   
   

4. Chrome UX Report

   Also called CrUX report, this data is available through PageSpeed Insights, Public Google BigQuery project, and CrUX dashboard on Data Studio. It measures real user measurement across different metrics.

10 Things you should do to have better Core Web Vitals Score

1. Images

   • Go easy on the number and size of images
   • Define the dimension of images so that you don’t load extra-large images in a small box
   • Compress images using tools like Compressor.io, Tiny PNG or JPEG optimizer
   • Implement lazy loading that deferrs loading of elements that are not required immediately on the page
   • User newer format of images like WeP, which are over 20% smaller in size compared to PNG

2. CSS

   • Don’t dump all CSS into one file. Split them to reduce CSS size and load only as little as is required for the page
   • Remove extra spaces from CSS files using CSS minifier tools
   • Use inline CSS for common classes

3. Javascript

   • Use as little as possible by replacing JSS with HTML5 and CSS3
   • Remove extra spaces using JSS minifiers
   • Defer loading JSS files

4. Videos

   • Go easy on the number and size of videos on a page
   • Use a thumbnail image instead of the video, so that the video loads only when a user clicks on it
   • Defer loading videos

5. Server

   • Regardless of all the optimization you do, if your server is slow, it defeats the whole purpose
   • So make sure you pay a little extra for a fast, responsive server
   • Use CDN to make elements load faster

6. Third-party scripts

   • Any tool you use will add some script to your website, making it slower
   • Reduce number of tools to what is absolutely required
   • Use latest code to ensure that it’s updated and fast

7. Don’t try gimmicks

   • Graphics that keep rotating to show that your site is loading is not a good idea, since that will also take time to load
   • Forget about the flashing icons, moving banners, floating elements etc. as it can affect Cumulative Layout Shift or CLS scores

8. Preload elements

   • Use Chrome DevTools performance tab to see a visual progress bar of how the elements load
   • Use link rel=“preload” to fetch the important elements first

9. Above-the-fold elements

   • Look, look again, and then once more at all the elements above the fold, or within the first scroll. Keep it as light as possible.
   • This includes background images, JSS and videos that can be optimized.

10. Website redesign

    • This is the very last option if you feel that everything is a mess, and not repairable.
    • Remember that redesign is no magic wand to solve all Core Web Vitals problems.

If you would like an audit of your website to identify key issues that need to be resolved, reach out to TagBeans Digital for a comprehensive Website Audit. We can help improve your Core Web Vitals scores!