Core Web Vitals: 7 Tips for a Better User Experience

88 percent of online shoppers say they would not visit a website again after a bad user experience. A clear trend that Google has also registered – and is now reacting to with “Core Web Vitals”. The algorithm update, which will be rolled out next May, is designed to ensure that a poor user experience will impact rankings in search results.

In the following, we explain what Core Web Vitals are all about and give 7 tips that website owners can use to optimize their presence and be rewarded with a good ranking.

Google’s Core Web Vitals Update evaluates websites based on three key metrics. The first one is hidden behind the name Largest Contentful Paint (LCP). In the future, this metric will measure the amount of time it takes for the essential content of a web page to become fully visible and accessible to visitors.

The following opportunities exist to improve this LCP score in a sustainable manner:

The key to a good LCP is to identify and optimize the element that causes long loading times. If this is an image, you should make sure it is optimized for all relevant devices. For your mobile website, you should use a specially optimized image or completely avoid large images in the first view area. Another tip: Use the WebP image format to ensure lossless compression of images on the web. WebP files are up to 34 percent smaller than PNGs and JPEG images of similar quality.

Over time, additional code can accumulate on your website – especially if new apps are added manually and old code is not removed. Instead, if elements are just hidden or code is commented out, the size of browser downloads can increase greatly. Accordingly, you should make sure that unnecessary HTML, CSS or JavaScript is removed from the website altogether.

Another success factor for fast loading times is the pre-connection of external resources. The more such resources – i.e. ads, share buttons, social media posts or widgets – that need to be accessed, the greater the potential for cumulative slowdown of a website. One approach to solving this problem is prefetching. Here, all external resources are obtained from applications that are not physically located on your website. Only when a visitor visits a page does the browser actually call up these resources.

The second relevant metric in the course of Core Web Vitals is First Input Delay (FID). The FID refers to measures the delay a user experiences when interacting with a website for the first time, for example in the form of a click. If there are delays here, a page appears sluggish and unresponsive – which in turn frustrates the user. Below are two key actions you can take to improve your site’s responsiveness.

Third-party page content can block the thread and the main thread on a website, increasing the Time to Interactive (TTI). So, for improving FID score, first of all you should check all applications, plugins and scripts that you get from third parties. Every single element should be evaluated and in the next step unnecessary content should be reduced as best as possible.

Imagine clicking a button while a large content area of the website is loading in the background. Once the loading process is complete, the new element pushes the button down – and you click the wrong content. This behavior of a website is frustrating. The Cumulative Layout Shift (CLS) will be the third metric to evaluate the visual stability of web pages in the future. Here are essential tips for optimization:

One reason for a low CLS score is the displacement of page elements. Typical culprits that website operators need to watch out for are ads or banners that are dynamically inserted or externally loaded widgets. One approach to solving this problem is so-called ‘lazy loading’: The method allows certain objects to be loaded only when they are in the visible area. This saves valuable loading time for elements that are out of the field of view.

To improve the CLS score, one option is to add width and height attributes that make the size of page elements binding. This prevents website content from changing from 0 to x pixels on load, triggering a page shift. Alternatively, you can implement CSS styling that loads early.

Reserve space for your content, for example in the form of a block of predefined size for that content which will be inserted dynamically. The code should have the height and width of an injected search bar to fix the position before HTML and CSS are available. Another tip: Make sure that critical CSS like structure, layout or menu is loaded before the respective content.

That the optimization of the three Core Web Vitals is becoming important has been made more than clear by Google. However, there is no reason for webmasters to worry: various tools provide sufficient opportunities to identify and implement potential for optimizing FID, LCP and CLS. At the same time, you shouldn’t overstate the hype around Core Web Vitals.

First, two of the three metrics are metrics that existed before the introduction of Core Web Vitals was even known: While the importance of FID and LCP has increased due to their definition as Core Web Vitals – they are not new metrics. Only the Cumulative Layout Shift (CLS) did not exist yet.

Nevertheless, the Core Web Vitals offer a very good opportunity to make presentable evaluations of the user experience on the basis of clear key figures. In this way, it can be shown very quickly and clearly which problems exist – and which of the tips mentioned can be implemented by website operators in order to satisfy their target groups.