9 Optimization tips to pass Core Web Vitals assessment

What are Core Web Vitals?

Core Web Vitals are a group of particular elements that Google believes are crucial to the overall user experience of a webpage. The three distinct pagespeed and user interaction measurements that make up Core Web Vitals are the largest contentful paint, the first input delay, and the cumulative layout shift.

• Largest Contentful Paint (LCP) is a Core Web Vitals metric that measures how long it takes for a page to load. More specifically, it measures how long it takes to render the biggest piece of content in the area of a user's screen that can be seen. It doesn't take the whole page into account.

• Cumulative Layout Shift (CLS) is one of the Core Web Vitals metrics that measure how stable a page looks. It looks at how much of the screen moves and how far things move on the screen (like ads, and pop-ups).

• First Input Delay (FID) is a Core Web Vitals metric that measures the time to interact. In particular, it measures how long it takes for a web page to respond to the first action (clicking, tapping, swiping, etc.) taken by a user.

Update: FID has been replaced by INP

Core Web Vitals are, in essence, a subset of factors that make up Google's "page experience" score, which measures the overall user experience of your page.

Why Core Web Vitals are important

Core Web Vitals helps web developers make sure that users have a great time on their sites. Because of this, users are happier, more likely to come back, and more likely to tell their friends about your website. On the other hand, users are less likely to come back if pages are slow, unstable, or full of popups.

Think about how this affects Google's brand and how much money it makes. If you keep clicking on links in the SERP that take you to bad places, you'll start to dislike Google. You might try another search engine at some point, which would mean less advertising money for Google.

Core Web Vitals does more than just boost your organic rankings, though it does do that too. It makes the experience better for your audience. And that means customers are more interested, conversion rates are higher, and there may be other benefits as well.

“In general, we (Google) prioritize pages with the best information overall even if some aspects of page experience are sub-par. A good page experience doesn’t override having great, relevant content.”

Core Web Vitals assessment

Before you start optimizing your Core Web Vitals, you need to assess how you score on this at all. The best way to do this is by using PageSpeed Insights. The score you get here also determines your ranking factor with regards to Core Web Vitals.

Another way to do this is to use a RUM tool, these often cost money, but provide much more nuances of how your real users experience your website. Learn why a RUM tool will help you further than PageSpeed Insights.

But to get a good assessment of your Core Web Vitals, you've come to the right place at PageSpeed Insights.

Lab data is more useful for debugging performance issues because it's collected in a controlled environment. Real-world bottlenecks may be missed. When optimizing Core Web Vitals, consider both sets of data. Lab data can be found under "Diagnose performance issues".

How to improve Core Web Vitals?

Now that you know within which metric gains can be made for your website you can get to work. In general, there are standard recommendations you can apply to score higher within the Core Web Vitals. But not all tips you find on the internet are necessarily going to help you. There is much more to it, like what kind of device and internet connections your users have and where they come from.

But to get you well on your way to passing Core Web Vitals we will discuss how you can start achieving results.

1. Implement a caching solution

Caching is the process of storing a copy of your files in a cache, which is temporary storage that may be accessed more quickly. Enabling browser caching has many benefits because it can decrease server workload, boost load times, decrease latency, and consume less bandwidth.

The primary drawback is that there will always be at least two different versions of your website available. Running a real-time application that depends on accurate data can make this problematic, but even this can be partially fixed by forcing a subset of the cache to empty when new data is imported.

2. Optimize image sizes

Serve images in the right resolution. We see a lot of websites using an image that is 2 to 3 times bigger than it should be. This results in a bigger file. Bigger resolution = bigger file size. If your visitors are using slow mobile data connections, you are only wasting their bandwidth and increasing the loading time of your website.

Use the right file size as well. JPEG 2000, JPEG XR, and WebP are image formats that offer better compression than PNG and JPEG. This translates to faster downloads and less data usage. Although WebP might not help pagespeed at all times, it will save data storage and data traffic.

3. Limit the number of HTTP requests

For your users, a long load time can be disruptive and annoying. Mobile users will have a particularly bad experience because the majority of them will have to wait for the entire contents of a webpage to download before the page even starts to load in their mobile browser.

If you have many requests queued up, some of them may be blocked if the queue is too long because browsers typically have a limit on the number of parallel network requests. To prevent this, you can remove unnecessary images, JavaScript, CSS, and fonts, and if you're using a WordPress site delete some plug-ins.

Our very own website

4. Load JavaScript asynchronously

When the browser notices a script tag that loads JavaScript in from a remote source, it will wait for them to be downloaded before continuing with rendering the website. This process is called synchronous loading.

If you put an "async" on the script tag the browser will load the script asynchronously. This means that the parsing of the page will continue while the script is loaded.

<script src="demo_async.js" async></script>

5. Use Gzip compression

Your HTTP servers should have gzip compression enabled. Gzip compression reduces the size of HTTP responses, especially for text-based content like HTML, CSS, and JavaScript. Enabling gzip can significantly cut load times and conserve bandwidth.
How to enable Gzip Compression

Brotli is a newer compression method offering better compression ratios and faster decompression, supported by all major browsers. It's particularly effective for web content, making it a superior option when available. Consider switching to Brotli to optimize performance, but ensure compatibility for your target audience or implement a fallback to gzip if necessary.

6. Use a Content Delivery Network

By caching assets across multiple edge locations that are geographically distributed to be no more than 40 to 60 milliseconds from an end-user, a Content Delivery Network (CDN) improves a website's performance and page load time. A CDN raises Core Web Vitals ratings by caching static content near the users, such as images, CSS, and JavaScript. Shorter load times are necessary for passing Core Web Vitals.

Using a CDN is beneficial for all Core Web Vitals.

• Largest Contentful Paint: The static content of a website is stored by the CDN in server farms all over the world. Page loads are quicker because content has less distance to travel to and from users' devices and because those server farms are close to users (within 100 milliseconds of 95% of all internet users).
• Cumulative Layout Shift: Images that are sized incorrectly or that fill in slowly frequently result in cumulative layout shifts. Before being delivered to end-users, static assets like images can be improved, resized, and reformatted using a CDN.
• First Input Delay: The faster the website loads, the faster users will start to engage with them. Using a CDN will make sure that users engage with a site on the lowest latency.

7. Reduce the number of plugins

Especially on WordPress websites plug-ins are highly popular. This provides the websites with additional functions. But many plugins come with a cost.

Plugins are filled with CSS and JavaScript. This will improve the Time To First Byte (TTFB) and so will affect the other metrics. When you can't avoid using plugins be very cautious in terms of what you need, as some might not be necessary for your website.

8. Minify HTML, CSS, and JavaScript

Browsers have a limit on the number of simultaneous network requests, so if your website only needs to load three requests in total rather than 30 separate resources, it will probably load more quickly. When building a website, developers might utilize many files for ease of controlling what gets loaded.

CSS without minification:

#random-pattern {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 100vw;
 height: 100vh;
}
#random-pattern button {
 padding: 10px 30px;
 border: 3px solid black;
 font-size: 12px;
 font-weight: bold;
}

Minified CSS:

#random-pattern{display:flex;align-items:center;justify-content:center;width:100vw;height:100vh}#random-pattern button{padding:10px 30px;border:3px solid #000;font-size:12px;font-weight:700}

Before minification: 233 bytes
After minification: 190 bytes
Saved: 19,5%

9. Implement lazy loading

Lazy loading should be used if you display photos on your website to prevent damage to your site's user experience and core web vitals score. By preserving the website's loading speed and maximizing your LCP score, lazy loading enables loading images at the precise moment that users scroll down the page.

Lazy loading comes with some extra benefits:

• Pagespeed will be improved;
• Limitation to bandwidth, users under slow network conditions will be happier;
• Reduce bounce rate as visitors will less likely abandon the page.

Improve Largest Contentful Paint

The loading time of your LCP is usually caused by the following:

• Slow server response times
• Render-blocking JavaScript and CSS
• Resource load times
• Client-side rendering

By preventing this, you are well on your way to optimizing your Largest Contentful Paint. Want comprehensive documentation for everything you can do to improve your Largest Contentful Paint? Click here.

Improve Cumulative Layout Shift

By sticking to a few guiding principles, you can prevent any unexpected layout shifts on the vast majority of websites:

• Always include size attributes on your images and video elements, or otherwise reserve the required space with something like CSS aspect ratio boxes.
• Never insert content above existing content, except in response to user interaction.
• Prefer transform animations to animations of properties that trigger layout changes.

Google has created extensive documentation for optimizing your Cumulative Layout Shift.

Improve First Input Delay

As with the Largest Contentful Paint and the Cumulative Layout Shift, there are certain requirements that you can meet:

• Reduce the impact of third-party code
• Reduce JavaScript execution time
• Minimize main thread work
• Keep request counts low and transfer sizes small

Need additional tips for optimizing your First Input Delay?