A Guide Core Web Vitals: How to Prepare for Google’s Latest Ranking Factor?

Posted By on December 10th, 2020 in Search Engine Optimisation

Coming in 2021, Core Web Vitals is Google’s latest change to its ever-evolving algorithm. Unlike other updates, what sets the Core Web Vitals update apart from the regular core algorithm updates, is that Google has given us over 6 months to prepare for this one, raising the stakes as this is often an indication of how important Google would consider this update.

What are Core Web Vitals? 

Core Web Vitals essentially looks at user-experience metrics determining how user friendly a page is, it consists of three main components: 

1. Largest Contentful Paint (LCP)

This simply refers to the time taken for the page to load from the perspective of the user. In simple terms, it is the time taken for the bulk of the content of a particular page to load for the user. 

What, perhaps, sets LCP aside from other pagespeed measurements is that it only considers loading time of page elements that directly impact the user experience, e.g. images, videos, background images with CSS, plain text etc. 

How to Measure LCP? 

One of the easiest ways to measure your LCP is through Google’s PageSpeed insights tool or through Google Search Console itself. The following tools from Google give us a pretty good understanding of site performance.

An Example of LCP result from PageSpeed Insights

Although good scores vary from site to site it has been made clear that anything under 4 seconds would be considered acceptable whereas 2.5 seconds would be the ideal time for LCP.

3 Ways to Improve your LCP

  • Optimize images Efficiently: Ensure your images are in the right size and format to ensure they load efficiently. It is important to stick to the size dimensions specified by your host server to ensure your LCP is kept as low as possible.
  • Make use of a CDN for your Images: A CDN service for your images can make them load faster. CDNs manage to serve your images in the most efficient manner keeping the LCP low again.
  • Avoid JavaScript to load images: JavaScript loading can severely increase your LCP; this would be better left with your browser. This would be incredibly helpful in terms of reducing the load on your page loading and keeping the LCP low.

2. First Input Delay (FID)

First Input Delay measures how interactive a page is, Google is essentially aiming to measure how quickly a page can produce an outcome from interaction with the user. For example, interactions may include choosing an option from the navigation menu, clicking a link on the homepage or signing up for an account, amongst others. 

Google determines a poor experience as on whereby we click on an event button, and there is a significant delay in terms of load time. For sites that are purely content-based such as news articles and blogs the importance of FID is somewhat reduced as there is little interaction to be made on the page, however, for E-commerce sites, this is a crucial ranking factor. 

What is a Good FID Score? 

Google has made it clear that FID First Input Delay (FID) measures the time from the users’ first interaction on your site (e.g. upon clicking or tapping on a button ) to the time when the browser is actually able to respond to that interaction. The ideal time is >100ms with anything above 300ms as a response time considered poor.

Google’s Guidelines for FID

How to Improve your FID?

Minimize (or defer) JavaScript: By parsing or deferring your JavaScript, we can enable users to interact quickly with our site, thus helping keep our FID low. 

Remove any non-critical third-party scripts: Just like with FCP, third-party scripts (like Google Analytics, heatmaps etc.) can negatively impact FID. 

Leverage Browser Caching: Through caching, we allow users to save and reuse files included on our sites. This would significantly reduce load time and positively impact FID.

3. Cumulative Layout Shift (CLS)

CLS measures how stable a page remains after loading. Google considers unexpected changes in the page layout, such as the page shifting or image sizes changing as very poor user experience. By ensuring the page loads in a stable manner, users are able to act quickly and reduce errors in terms of incorrect clicks.

This is particularly crucial on mobile devices where unstable elements can cause a very poor user experience and with the limited screen size, the impact of this is amplified on for the user. This would result in a higher bounce rate, lower interaction, as well as a poor CLS score. 

What is a Good CLS Score?

CLS can be measured through PageSpeed Insights as well as other lab tools such as GTMetrix which give us a clear indication of site performance on this metric. Google has indicated that a good score is >0.1 seconds with anything above 0.25 seconds being considered poor.

How to Improve your CLS

  • Specify Image Dimensions: It is crucial to set size attribute dimensions for images and videos as this tells the browser how much space an image would require and avoid any need for the page to change once the image loads. 
  • Reserve Space for Ad elements: One of the main causes of unstable pages are ad elements causing shifts in the page design. By reserving ad space, it can stop ads suddenly appearing and shifting content around on the page.

Summary

With around 6 months to go for the Core Web Vitals update to be rolled out, it is crucial to analyse your current site performance with regards to LCP, FID and CLS. The changes outlined in this article can go a long way in terms of improving site performance and ultimately user experience. One thing is for sure, Core Web Vitals will be one of the most significant updates in terms of ranking factors, and it is crucial to take this into consideration going forward.

Bruce Clay AdministratorPerson
follow me