5 Steps You Can (and Should) Take to Improve Your Core Web Vitals Now

Now, let’s continue with the tips!

user experience and make your website better in general, the better your page experience scores will be.

Image source

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.

Largest Contentful Paint (LCP) measures how fast the largest element (images, videos, animations, text, etc.) can load and appear on a website.
Cumulative Layout Shift (CLS) ensures that a website’s pages are without unexpected, confusing movements that might disturb users from consuming the content.
First Input Delay (FID) shows how responsive a website’s pages are when users interact with them for the first time. It also measures how fast a website’s browser can provide the result for users.

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.

Image source

The other benefits of lazy loading are:

5 tips to improve your Core Web Vitals

Google suggests having a server’s response time lower than 600 milliseconds.
Below you can see a step-by-step guide on finding an embed for a Youtube video. Learn how to change the dimensions and make sure the selected video looks great on your site.

Image source

1. Reduce JavaScript (JS) execution

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.
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.
Open the video on Youtube that you want to add to your site. Then, find the share button and choose the option <> Embed.
The image below shows the timeframe that indicates core web vitals score–good, needs improvement, and poor. The tips explained in the next paragraphs will help the website owners to improve their core web vitals score from poor to good.
First, go to your website and press the right mouse click and choose ‘Inspect’.

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.

In order to measure server response time, use Time to First Byte (TTFB) that identifies the time the user’s web browser receives the first byte of your page’s content.

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.

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

3. Optimize and compress images

Agnese Rapule is a passionate Content Marketing Specialist at Setupad, a monetization platform for publishers. She typically covers topics on programmatic advertising, monetization, SEO, and content marketing. Another passion of hers is art—painting in particular. You can follow her on Twitter or LinkedIn.
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.
It’s already confirmed that Core Web Vitals will become a search ranking factor in May 2021 with the Page Experience Update. What this means is, while quality content still reigns supreme, the technical side of your SEO will gain some more importance.

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.

Most importantly, long server response time can negatively influence not only your SEO but also UX.
According to Google, one of the ways you can reduce the execution is by deferring unused JS.
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.
However, before you start, collect the data on your server’s current performance to understand how you’re doing. When you have done the report, here are tips that will help you:

How to resize the YouTube video you want to display:

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.

Google says: “The longer it takes a browser to receive content from the server, the longer it takes to render anything on the screen. A faster server response time directly improves every single page-load metric, including LCP.”

GTmetrix states: ”As a primarily back end optimization, reducing TTFB can complement your front-end development to significantly improve performance.”
To see how well your website performs in terms of core web vitals, you should run a quick test of website performance analysis. To do so, you can use tools from Google like Search Console and Page Speed Insights and other tools like GTmetrix.
In order to see if your website has unused JavaScript:

Check how fast is your web hosting.
Use CDN for your site.
Review your plugins. Why? It’s because each plugin comes with an additional weight for your page that can negatively impact your site’s performance. Leave only the necessary ones.’

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.

interactivity. Also, it would help if you didn’t forget about Google’s existing search signals– mobile-friendliness, safe-browsing, HTTPS, intrusive interstitial guidelines.

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.