• SyberGrupe

2021 Core Web Vitals



Core Web Vitals is the buzz now, and getting your website ready is one of the most important priorities you currently need to consider.


Core Web Vitals is a set of user-centred metrics that are linked to user experience. It is part of Google’s overall evaluation of “Page Experience”.


Experts like Searchmetrics have determined that 96% of websites have failed the test of the new Google Ranking Factors.


There are different measure dimensions of web usability that is contributing to your website’s success:


Load Time:


There are two aspects, mobile and desktop. This is how quickly the main content of a web page loads and become visible to a user.


Elements that contributing are:


First Contentful Paint (FCP) – mark the time at which the first text or image is painted.


  • Time to Interactive – is the amount of time it takes for the page to become fully interactive.


  • Speed Index – shows how quickly the contents of a page are visibly populated.


  • Total Blocking Time (TBT) – Sum of all time Periods between FCP and Time to Interact, when task length exceeded 50ms, expressed in milliseconds.



Largest Contentful Paint (LCP) – mark the time at which the largest text, video or image is visible from the time the user requests the URL.


  • A Good Score determines how quickly the main content of a web page loads and is visible to users and should occur within 2.5 seconds from first-page loading.











Cumulative Layout Shift (CLS) – measure the movement of visible elements within the viewport.


  • A Good Score determines your user’s first impressions of your site’s interactivity and responsiveness and should maintain a 0.1 or less. It tracks how elements shift while a user is trying to interact with it and could be bad for the user experience.












First Input Delay (FID) – this is the time a user first interacts with a page to the time when the browser can process that interaction. (Click on a link, tap on a button, etc.)


  • For a good user experience, pages should have an FID of 100 or faster.











Interactivity:


This is your user’s first impression of your site’s interactivity and responsiveness.


Visual Stability:


This is all the individual layout shift scores for every unexpected shift that occurs during the entire lifespan of the page. This means if content shifts while loading.




The elements you need to look at are:



Image sizes:

  • Image formats in JPEG 2000, JPEG XR and WebP provide better compression than PNG or JPEG, which will improve your site to download faster and use less data consumption. The image file size is important and there are tools to reduce the file size and still retain the quality of the image sharp. You can look at https://squoosh.app/.


Lazy load:

  • Lazy load will help with your website speed especially on e-commerce sites to ensure your website is faster than your competitors.


Server Response time:

  • This includes themes and plugins, so it is vital

  • to review your theme used and to remove any unwanted plugins.


Cache:

  • A long cache lifetime can speed up repeat visits.


Videos:

  • Rather use thumbnails on mobile than videos with a link to the video.


General:

  • A full photo or video backgrounds will result in a bad LCP score, so reconsider your layout.


  • Everything above the fold has the biggest impact on your scoring.


  • To improve your CLS, load your page in chunks with content first, then navigation then content with different fonts. Dynamic elements are the biggest problem.


  • Consider how your JavaScript load impact the CLS.


  • Reduce your page size to best practice to be less than 500kb per page.


  • Limit the number of page resources to 50 for best performance on mobile.


Conclusion:


  • The rollout has started in June 2021 and will continue to August 2021.


  • Core Web Vitals will be critical for your business to be competitive.


  • Conduct a thorough audit of your website to decide what impacts your Core Web Vitals.


  • For small websites ensure you remove everything that is unnecessary and follow the recommendations to increase your website speed. Only think page by page and start optimizing your pages to perform better.


  • For bigger websites, also take the page-by-page approach and ensure you start with the most visited pages on your website.


  • Make sure you start with mobile optimization for speed.





Let us know if you have any other advice for businesses to assist in fixing their websites.


Recent Posts

See All
11526.png