How to improve Core Web Vitals score with google page speed insights.

[marklogiha]

A site that meets the page speed score on 6 parameters gives an advantage in SEO and helps the web designer to focus on website performance on mobile and desktop. Read this blog: improve Core Web Vitals score

[Akshay_M]

If you run performance reports using different tools, it’s worth comparing results and improving your page more efficiently.


1. Reduce JavaScript (JS) execution
If your report shows a poor FID score, it means that your page interacts with users over 300 milliseconds. You should consider reducing and optimizing your JS execution. This means that time between your browser execution JS code and page is reduced.

It’s also essential to use as little memory as you can. Why? Whenever your site’s code requests the browser, it reserves a new memory that stops the JavaScript and might slow down the page.

According to Google, one of the ways you can reduce the execution is by deferring unused JS.

In order to see if your website has unused JavaScript:

First, go to your website and press the right mouse click and choose ‘Inspect’.

improve core web vitals—inspect element screenshot
Then click on ‘Sources’ and look for three dots on the bottom. You should add a tool–’Coverage’. After you have added it, press the load function.
improve core web vitals—screenshot of coverage tool in "inspect element" window
When the load is done, you will see how much JavaScript is not being used on your web page.

improve core web vitals—reduction in javascript
When you have realized the amount of unused JS, you should start to cut it down. One of the ways you can do it is with code splitting. This means to separate one JavaScript bundle (combined files into one bundle to avoid too many HTTP requests that are required to load a page) into smaller pieces.

2. Implement lazy loading
If you display images on your site, it’s crucial to implement lazy loading so your site’s UX and core web vitals score won’t get harmed. Lazy loading allows loading images at the exact moment when users scroll down through the page by not compromising the website’s loading speed and achieving your LCP score on a top-notch level.

The other benefits of lazy loading are:

Your site’s performance will be improved.
It will limit bandwidth usage.
It can improve your site’s SEO.
It will keep your visitors on the page and reduce the bounce rate.
Is lazy loading going to benefit your site? According to HubSpot, resources say that for those pages containing many images, animations, or videos (aka heavy elements), lazy loading would be considered a must. However, there are no set rules for which pages lazy loading should be implemented. So, if your site’s LCP score is poor, you should consider trying lazy loading and then compare results before and after implementation.


3. Optimize and compress images
Sounds quite obvious, don’t you think? However, for many websites, the largest elements are images. So, it’s crucial to optimize them because it can make your page significantly lighter, thus improving the loading speed, LCP score, UX, and your rankings on search engines.

You can reduce the overall page size by compressing images with tiny jpg and improving your LCP results. You might be thinking that image compression will destroy the quality or resolution. Well, actually, you can only see the difference when you zoom in or if the image is saved in the wrong format. Always try to use jpg format for landscape images and png for graphics. You can also use next-generation formats like JPEG 2000, JPEG XR, or WebP, but we suggest doing some research beforehand.

Besides compressing, another important thing is to activate Content Delivery Network (CDN) for images. CDN is a network of servers all around the world that stores your content. Since servers are distributed in many different locations, images can be served faster from the server closest to users.

4. Provide proper dimensions for images and embeds
CLS score that’s over 0.1 is indicated as poor, and usually, it is caused by elements like images, ads, or embeds without dimensions in the CSS file. If you want to improve your CLS score, dimensions do matter. The importance of setting proper width and height helps the browser to allocate the correct amount of space in the page while the element is loading.

For example, if an image’s dimensions are not in a proper size, it usually appears later on a page. While a user consumes the content, it can suddenly drop because the image without proper dimension could not load fast enough. In this case, the browser didn’t understand how much space is needed for that particular image.

So, in order to avoid this image shift, you can earlier reserve a space where the image should be displayed. This kind of action will avoid layout shift if it’s loaded off-screen.

Ensure you have also set proper dimensions for embeds like when inserting videos from YouTube into your site. By default, the video might look okay from the back end, but it might look super big or messed up in the front-end. If that’s the case, there is an issue with dimensions, and you should change them.