So what does this mean and how can you prepare for it? In this post we’re going to brush you up on Core Web Vitals and then provide five steps you can implement to make sure your site is in line with this algorithm update:
Core Web Vitals are page experience signals that evaluate the user experience on a website. Simply speaking, these signals measure how fast users will be able to interact with your website and what kind of result they will receive. These signals also measure how easy it is for users to navigate through the website.
If you improve user experience and make your website better in general, the better your page experience scores will be.
There are three Core Web Vitals metrics:
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.
Now, let’s continue with the tips!
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.
If you run performance reports using different tools, it’s worth comparing results and improving your page more efficiently.
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.
According to Google, one of the ways you can reduce the execution is by deferring unused JS.
First, go to your website and press the right mouse click and choose ‘Inspect’.
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:
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.
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.
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.
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.
Open the video on Youtube that you want to add to your site. Then, find the share button and choose the option <> Embed.
After that, all the information, including dimensions, will appear. Now, you need to copy the code into your website’s back-end and change it to the proper width and height that fits your site.
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.”
Most importantly, long server response time can negatively influence not only your SEO but also UX.
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.
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:
Google suggests having a server’s response time lower than 600 milliseconds.
Even though the Core Web Vitals will roll in almost three months, it’s vital that you already work on improving them. Since the reports on vitals are available, use the tools mentioned above and compare your site’s results before and after fixing the errors.
Remember that your website’s back end works hand in hand with the front end, so make sure you optimize the back end to provide the best user experience in terms of loading speed, visual stability, and interactivity. Also, it would help if you didn’t forget about Google’s existing search signals– mobile-friendliness, safe-browsing, HTTPS, intrusive interstitial guidelines.
GTmetrix states: ”As a primarily back end optimization, reducing TTFB can complement your front-end development to significantly improve performance.”
Agnese Repule 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.
Please read our Comment Policy before commenting.