What, Why, How of Core Web Vitals – An implementation guide

Search Engine Optimization got a little complicated since mid 2021. Google’s introduction of Core Web Vitals (CWV) as an important but not a critical SEO metric [Relevance is still ‘king’] has since baffled many a digital marketers. To understand and implement these web performance metrics, they would need a fair amount of technical help. We have touched upon this in SEO for Beginners post.

What are Core Web Vitals?

CWV or Core Web Vitals is a set of web performance metrics that enable Google’s search to analyse and choose the results to display after a user query. The metrics are:

• LCP [Largest Contentful Paint] – The speed at which a webpage’s main content loads. It is a measure of page load speed.
• FID [First Input Delay] – The speed at which your webpage can paint pixels to the screen. It is a measure of page interactivity.
• CLS [Cumulative Layout Shift] – The stability of your webpage while interacting with a visitor without shifting. It is a measure of visual stability.

Page load speed has been a ranking factor for long, however, Google is focussing on all of the three metrics as a part of its ranking algorithms.

What Google says about these web performance metrics?

Google says, integrating these web performance metrics into search algorithms will:

• Help website publishers to offer enhanced page performance to visitors.
• Better page speed matters since faster pages generate more leads, helps conversions and enhance advertising revenue.
• Page performance reduces time for visitors to get where they want, quickly.
• Making your site rank in accordance to Core Web Vitals will help rankings indirectly, adding to the direct ranking boost by Google’s algorithm.

According to Google, the Core Web Vitals ranking signal is weaker compared to other ranking signals directly related to satisfying a query. Relevance and content still rule the algorithms.

CWV thresholds are assessed at the webpage level. So, webmasters need to meet these requirements, page on page.

Starting May 2021, Core Web vitals will be included in page experience signals together with existing search signals including mobile-friendliness, safe-browsing, HTTPS-security, and intrusive interstitial guidelines.

Google

The effect of Core Web Vitals on Search Engine Optimization

As we already know the process of analysing websites is automated by the use of bots, web crawlers or spiders. These bots analyse content on a webpage and decide when the page can be displayed against a search query. One of the factors that bots check is the web performance metrics.

Since Google’s ranking algorithms are mostly secretive, it is difficult to ascertain how, CLS, LCP or FID actually effect your SEO. Since the inception of CWV into ranking factors in June 2021, many experts have analyzed and created case studies that demonstrate ranking fluctuations due to changed CWV performance metrics. It is understood the CWV as a ranking factor impacts Search Éngine Optimization to a great degree. Here is one such case study by By Barry Pollard .

How does it effect Google Search? A simple search study

I have searched for ‘digital marketing’ at google.com/ncr and I get results as in the figure below.

The first two results have similar content of similar length optimized to rank well. However, Hubspot ranks over Marketo because of the Core Web Vitals metrics shown underneath the search result title and above the description.

The metrics are quite similar, in fact Marketo’s CWV are better than Hubspot’s. However, Hubspot ranks owing to its better treatment of the user search query. Look at the titles and you will understand how they cater to the search query.

Third comes Investopedia which has better CWV metric and still ranks third. This is because it has a different kind of content and is not optimized well for the user query ‘digital marketing’. The title itself says it is more of a definition.

This is just for understanding and only the tip of the iceberg. Search engines are much more complex and evolved than we can imagine, as marketers. With the helpful content update slated to hit search in August 2022, we can expect a roller coaster ride to white-hat practices.

How to see CrUX data in search results?

Now, you must be wondering how I got the CWV CrUX data on my search results. Thanks to my good LinkedIn friend Christian Stenger, he gave me a few insights and guided me to use a Chrome extension. Click on this one and follow instructions. Please note that it will work only for the synchronized Chrome account where it is is integrated.

Why Core Web Vitals?

When a searcher looks for answers, they expect instant gratification. If a webpage is slow to load, searcher may move on to other websites for the same information. And, if a webpage loads like lightning, chances are that the searcher will return to the page, with a related query, later.

For example, if you have spent time and money on a link building strategy over the time and a visitor comes through and finds you webpage lagging, will he convert?

Other search engines like Bing or DuckDuckGo may be taking these web performance metrics into account for similar reasons. However, we have far lesser information of their search algorithms like Google. Even with Goole, we can only assume and not infer, however, since it has the king’s size of the search market, and we follow it all the time.

Deeper understanding of Core Web Vitals

As you read above the 3 web performance metrics that CWV comprises of are LCP [Largest Contentful Paint], FID [First Input Delay], and CLS [Cumulative Layout Shift]. Let us understand each of these in greater detail. In this section we shall be analysing this very website’s home page at https://efficaci.us.

Understanding LCP [Largest Contentful Paint] – troubleshoot and improve

Largest Contentful Paint or LCP is the measure of time it takes to load the largest piece of webpage into a browser. It could be a very large chunk of text or an image or even fonts, JS or CSS elements.

Remember, it is not the time taken to load the entire webpage. It loads the largest chunk and benchmarks the entire webpage accordingly. Again, it is user perception. If you are searching for an image, possibly it will load slower than a piece of text.

According to experts, a LCP score should be less that 2.5 seconds, however, the lower it is, the faster and better.

For the webpage that we have taken as an example, the LCP is 880ms, which is way below 2.5 second threshold.

Improving LCP – For measuring your webpage LCPs, you can use Lighthouse Chrome Extension. There are a few factors that can slow down your webpage LCPs. The following table will help you improve LCP tremendously.

Understanding FID [First Input Delay] – troubleshoot and improve

First Input Delay or FID is the measure of time from the searcher’s first step and the webpage’s response to it. If a searcher is searching for something, he clicks on your webpage that comes up as a result and the webpage opens. So, the time taken from the searcher’s click to your webpage’s response is the First Input Delay.

FID is a click-to-start-load time, either from an external link or an internal one within the website.

The challenge in measuring FID is that for webpages that show:

“Discover what your real users are experiencing – No Data”.

There is no real wold data to assess it. However, the TBT or Total Blocking Time is a fair estimate going by Semrush.

Ideally, experts say that a FID or approximated TBT should be less than 100 milliseconds.

Improving FID – The main culprit behind a poor FID are heavy JavaScript executables. You can directly reduce the JS load by optimizing JS complies, parses and executes.

Coming back to our example, you can see that the TBT is 0 milliseconds which is considered excellent.

First Input Delay can be comprehensively reduced by following coding best practices.

• Mininimize unused poly fills and defer unused JS. This reduces execution time.
• JS can be run on a background thread. Find the right web worker to do this.
• Long -running tasks can be recoded into smaller, asynchronous tasks.
• Optimize the webpage for interaction readiness (reduce CSS data fetch, minimise post-process date, keep only on-demand 3rd party code, have a lean 1st party script loading mechanism.

The following figure depicts how Best Practices score on our example webpage.

Understanding CLS [Cumulative Layout Shift] – troubleshoot and improve

Cumulative Layout Shift or CLS is the measure of “page jumps”, a measure of the largest “bursts” of shifts on a webpage’s layout. A layout shift happens in milliseconds, it could be shifting side to side or top to bottom and vice-versa. You may have seen layout shifts in many webpages wherein you clicked something else than what you intended, because the layout has shifted without a warning. The shift normally happens when content shifts from one rendered frame to another. So, CLS is also a measure of how ‘stable’ elements load on to the screen from a website.

CLS is calculated as impact fraction * distance fraction.

The impact fraction is based on frames. It is the ratio between the total area of the frame (viewport) and the sum of all visible areas of all ‘unstable’ elements from the previous frame and the present frame.

The distance fraction is the ratio between the largest distance an ‘unstable’ element has moved in the frame, in any direction and the viewport’s lengthiest dimension, be it height or width.

Ideally, as per experts, a good CLS score should be below 0.1.

In the example that we have been using, you see that CLS is way below the recommended threshold at 0.02

Improving CLS – Reasons for a poor CLS could be:

• Fonts causing FOUT (Flash Of Unstyled Text) or FOIT (Flash Of Invisible Text).
• Dynamic or 3rd party content.
• Embeds, iframes, Images or Ads without dimensions.
• Executions expecting network response from DOM  (W3C’s Document Object Model) updation.

CLS can be improved by avoiding layout shifts. We recommend:

• Define size attributes to all media elements. You can use aspect ratio boxes.
• Animate transitions logically by providing continuity using context.
• Refrain from inserting new content over the existing one, when you are not interacting with a user.

Other critical web performance metrics

Core Web Vitals are not limited to the above three metrics we have discussed. There are many more metrics to understand like TTFB (Time To First Byte), TTI (Time To Interactive), DOM (Document Object Model) and DCL (DOM Content Loaded) etc.

These are not as critical as the LCP, FID or CLS for Search Engine Optimization. However, it is important to understand these in order to spruce up the Core Web Vitals performance on your webpages.

Common mistakes to fix before you implement Core Web Vitals

There are many common mistakes like the deliberated assets put up on a webpage, either for assumed user experience or for the need of a particular domain. However, there are some facts that can damage your Core Web Vitals scores. These common mistakes can be avoided by fixing theses:

• Optimizing Content above the fold – Having interesting content above the fold can be interesting to most visitors, however, to keep your web performance metrics in tact, you will need to prioritise their loading, otherwise they can negatively impact the FID and CLS. If your webpage has sliders, or embeds from social media feeds, SoundCloud or YouTube streams, Maps or photo galleries above the fold, you can well kiss your CWV scores goodbye. All these elements need to be taken below the fold.
• Custom Fonts – Many designers use custom fonts like TypeKit or Google Fonts. They can add a lot of load and cause flicking on you webpages. Implementing them the right way is critical to avoid low CLS scores. Do not use more than two custom fonts.
• Optimizing Images – The larger the image , the more time it takes to load and render on a browser. Optimizing images and giving them dimensions is critical to better your Core Web Vitals scores. Use WebP images to compress your images by not compromising on quality.
• Analytics – Analytic tools like Google Analytics, AdRoll scripts and Tag manager can take their toll on your load times. Choose wisely and use one in a proper manner to keep your Core Web Vitals scores intact.
• Platform Optimization – If most of the tips and trick we discussed here work towards scoring the CWV metrics, it is time you changed the server, the platform, the CMS or whatever it takes. Experiment and choose, CWV is going to be a major factor that will define search results, going ahead.

Conclusion…

We understand that scoring high on Core Web Vitals metrics is no easy task. We have given a fair warning, right at the beginning that you will need technical help, not to add some more mature marketing expertise.

You are welcome to speak to us about your CWV metrics.

As you have already seen the scores of this website’s home page, you can understand the pain and grind we have gone through to gain that score and derived experience.

Leverage our experience, talk to us today, and we can get you through the CWV threshold.

More Digital Marketing trends for 2022.

Send us a message.