Core Web Vitals. What You Can (Realistically) Do To Improve Your Scores?

Ever since they were announced in May 2020, followed by their introduction in mid-June 2021 and beyond, Core Web Vitals have remained the buzz-phrase of the moment.

Here we offer a comprehensive guide on how to check your vitals, and we consider what can realistically be done to improve your score.

What can you do to optimise your Core Web Vitals?

The metrics of Core Web Vitals are designed to showcase a website’s overall performance, and they have a crucial impact on a website’s ranking in terms of search results. Therefore, any business that values visibility and brand awareness should take note of their metrics, and aim to adjust those of the website accordingly. First and foremost – check your vitals! For this task, there are multiple tools available, where you can input your website’s URL and check how you perform on each Core Web Vital separately.

Here is a list of tools that you might find interesting:

• Page Speed Insights – a free tool offered by Google which analyses Core Web Vitals for mobile and desktop.
• Lighthouse – an open-source, automated tool for improving the quality of web pages. Since it runs in Chrome Developer tools, you might need a developer to generate a report
• Web Vitals Extension for Chrome – a browser extension that measures the Core Web Vitals, providing instant and comprehensive feedback.

You’ve uncovered an issue with your vitals. So what are the next steps?

Most of the free tools available online will give you detailed information on the state of your Core Web Vitals but will offer few specific tips on what can be done to improve your score. So here we’ve decided to put together a list of potential improvements that you can try to implement in order to boost your Core Web Vitals score.

What can you do to improve Largest Contentful Paint (LCP)?

A problem with Largest Contentful Paint (LCP) means poor loading time because this web s metric looks at how fast the biggest chunks of your website load. There are multiple ways you could approach this problem, but here are 4 pointers that we think will be most useful when looking to improve this first Core Web Vitals score:

1. Optimize and compress images 

Sometimes even a slight compression on all images can make a huge difference in the page’s loading speed.

2. Optimize the JavaScript files

Here you might need a developer’s support because, in order to determine the exact issues that are causing your website to load slower, you will really need to dive deep. 

3. Implement lazy loading 

Lazy loading allows the website to load the images and ads at the exact time when users scroll down through the page, thus not compromising the website’s loading speed. 

4. Improve server response time

The longer it takes a browser to receive content from the server, the longer it will take to render anything on the screen. A faster server response time will directly improve all page metrics, so it’s good practice to ensure that the server response time is optimal. 

A First Input Delay (FID) Problems

If you notice an issue with First Input Delay, it means that the user has to wait a long time to interact with your website, causing them to become frustrated. Here, we have compiled a couple of fixes that may aid the situation:

1. Reduce JavaScript execution time

Reducing the JavaScript execution time means the time between the user’s browser executing the code and page loading has been reduced. You can do this by making recourse to unused JavaScript or minimizing unused polyfills.

2. Break up long tasks

If you’ve already tried to reduce the amount of JavaScript that loads, you can alternatively try to break up the long lines of code into smaller, serial tasks.

3. Introduce code-splitting

Code-splitting (also known as lazy loading) is basically splitting large JavaScript bundles into smaller parts that can be loaded conditionally. 

How to optimize the Cumulative Layout Shift (CLS)?

Problems with CLS mean that your content is shifting, due to different loading times for different objects. If you’re experiencing issues with this metric, here are some recommendations by Yieldbird experts:

1. Provide proper dimensions for images and embeds

If an image’s dimensions are not in the proper size, it usually appears later on a page – meaning the content that the user is consuming, can suddenly shift. This is because an image that did not load fast enough, has appeared out of nowhere.

2. Reserve a spot for ads

Similarly to images, if ads do not have a dedicated spot on the website, the content might suddenly shift while loading, because the browser “did not understand” where the ad was supposed to go.

3. Optimize font loading

If you download and render fonts, these actions might cause layout shifts.

Unsure about what to do next? Yieldbird can help!

In an ever-changing world, the quality of your website determines user engagement. That’s why it’s so important to get your Core Web Vitals right!

Yieldbird is an industry leader in all Programmatic-related aspects, and now we can also help you make your page faster, more interactive, and shiftless.