Google Core Web Vitals – How To Optimize Them As Per New Algorithm

You might have already heard the news about the latest Google algorithm update – the Google Core Web Vitals. Currently, only about 22% of websites have passed Core Web Vitals score – Largest Contentful Paint (CLS), First Input Delay (FID), and Cumulative Layout Shift (CLS) score.

Google is planning to eliminate websites with low Core Web Vitals scores from its SERPs (Search engine result pages). So, if you own a website, it is imperative to optimize it according to this update. In today’s article, you will discover why and how to improve the core web vitals of your website.

Without waiting anymore, let’s jump straight to the main content:

What are Google Core Web Vitals?

Web Vitals are three indicators with which Google wants to classify the browsing experience of its user when accessing a website. The three factors – page load (LCP), interaction (FID), and stability (CLS) – will help Google better position your content in its search results.

LCP

LCP is the first core web vital. It stands for “Largest Contentful Paint”. In simple words, LCP is used to measure the loading speed of content. The “L” in the LCP is also referred to as “loading.” But LCP is not about the loading of the whole content. It’s about the main piece of content that first appears on the visitor’s screen – how much time it takes to load per second.

For your knowledge, the average loading speed of every page as per Google’s standards is around 2.5 seconds.

FID

FID stands for “First Input Delay” and is also referred to as “interactivity.” Once a web page is loaded, visitors see different links, keys, and buttons to navigate the website.

FID measures the interactions speed of the visitors – how fast they are interacting with your webpage. The interactions include – clicking on the keys, links, menu buttons,r entering data into fields like a login or signup page.

In case these buttons are not well interacting, after being clicked, it can cause some serious problems to your website’s performance.

“According to Google, the standard FID score should be a minimum 100MS. This number is a delay time when interacting or clicking on the website’s navigation buttons.”

CLS

The last but not the least core web vital is CLS. CLS stands for “Cumulative Layout Shift.” After the loading and interaction part, it’s also crucial to maintain the stability of elements in your website. The other term for it is – “visual stability of a website”. One can also refer to it as the stability of a website as it loads.

Suppose the elements in your web page keep on moving or shifting their places as the page loads. This will result in high CLS and hence an awful user experience. You should focus on keeping the elements stable while the loading of a webpage gets completed.

Obviously, you don’t want the visitors to accidentally click on tab A when they want to click on tab B. That would be frustrating and will give the visitors a big reason to leave your website.

You should also keep in mind the mobile users. Your website might be functioning great on desktop, but when visitors open it on their mobile devices, it might cause some issues. To check if your website has a low or high CLS, Google has set some guidelines.

“A good CLS should be at least 0.1, and if it’s more than that, you need to work on your website and make it low.

Tips To Improve Your Core Web Vitals And Page Experience

If you want to be in the top positions of Google, you should start following these tips to improve your Core Web Vitals:

1 Use The Tools Recommended By Google

Google offers many tools to improve your website. These tools help measure and fix any problems with the users’ page experience. The recommendation from the search engine is first to do a general audit of your entire site. So you can see what to improve. You have many options to do it.

You can start with the Core Web Vitals report from Search Console. It will give you a broad look at how your site is performing and detect any problems. You can complement the use of Search Console with “Page Speed ​​Insights” and “Lighthouse“. They are two Google tools that have been around for a long time.

The best part is – they have adapted to these new metrics and help you optimize your website. They tell you the problems your website contains and how to fix them. The Chrome DevTools panel is available with a click in the Chrome browser, also offers great help.

2 Optimize Your Images

Optimizing images is one of the first things you should do to improve your site’s load times. A very large image on the home page or landing page can slow down the entire load and be the last element to load, the LCP. Therefore, you must optimize them so that your website loads quickly and gives a good experience to users.

One of our tips to improve your Core Web Vitals, specifically the LCP, is to make sure the image is of the size you need and compressed. Several tools can help you with this. Squoosh app is one of them. It is from Google and very easy to use.

You are probably using the more traditional image formats like .jpg and .png. But we recommend that you try a newer one, WebP, which can still offer great image quality.

Google recommends it because they give the option of compression without the loss of quality. The search engine says it allows you to create smaller and better images, making the website load faster. This format was created by Google, but it also looks good in Safari and Microsoft Edge.

Another way to improve your website images is through the CMS. It will only load the images that appear on the screen and leave the rest of the load for when users interact with the screen. Which tells the browser to load the images only when they are needed.

Another way to improve your website’s loading times is by using a CDN, especially for images. According to key stats, using a content delivery network has a beneficial impact on overall Core Web Vitals scores.

3. Preload Important Resources

By doing this, you can speed up visual load times. One of the main indicators for a user that a page is loading is what they see without scroll (above-the-fold).

This is where the Core Web Vitals LCP measures how fast the main elements load. To find out what these elements are, analyze the page with Chrome DevTolls, and you will see a waterfall graph in the Performance tab.

Also, with this, you can see how fast the LCP elements load. You have to select screenshots and start profiling the page when it loads. Once your profile is complete, you will see a screenshot of the page and its loading.

It will allow you to visualize how fast are the different elements of the page load. To help speed up loading times for items on the fold, consider using rel = “preload” to tell the browser to take those resources as a priority.

4 Minimize Long Tasks

The second of the main web metrics is the FID or latency of the first interaction. This refers to the time it takes for a website to allow interaction. A delay in this can cause problems.

For example, if the person has to click a button to add a product to the cart and does not see the answer immediately, they will click it again. As there was a late response, two products were added in the end. When this happens, users get frustrated. But it can be solved by reducing wait times between human interaction and browser response.

Long Task is JavaScript code that blocks the main thread for extended periods, which causes user interaction to “freeze”. That is, while the page loads, Long Task slows down the main thread and makes the page not responsible for user action, even if it looks ready.

For example, clicks or screen touches sometimes don’t work because event listeners or click handlers are not attached yet.

You can also see this in Chrome DevTolls, in the Performance tab. It marks the Long Task with a red triangle. If you click on this and go to the Bottom-Up tab, it shows you different activities that occur in the task, such as compiling and script analysis.

Solving this involves several things, depending on what activities contribute to these blocks. But a common solution is to break up the code and serve scripts into smaller chunks.

You have to look at third-party scripts, their Long Tasks can delay primary content from becoming interactive. It divides the operation into small parts of less than 50 milliseconds. And run these parts to the right time and place where they should appear.

5. Reserve Spaces for Uploading Images

By this, we mean optimization to improve the CLS metric. It measures the number of visual elements on the page that move while loading. You have to improve this to give a good user experience.

The problem in this sense is usually that the person clicks on a link, but at that moment, the page moves and ends up clicking in a different area. Which brings visitors to something that they didn’t want to see. You can also see this in Chrome DevTolls in the Performance tab.

By optimizing for accumulated layout changes, you don’t necessarily speed up the page, but you make it feel faster. And that offers a good experience. The CLS happens for dimensionless images in the CSS. Also, for ads or dimensionless embeddings, content is dynamically injected into mobiles.

Not having the dimensions, these tend to jump a bit during the loading process, which makes the page appear as if it is unstable. You can improve this by adding the width and length to the images in the CSS. Thus the browser reserves the spaces for the images that will appear a little later than the text.

6 Make Sure Your Page Is Mobile Friendly

For some years now, mobile traffic has exceeded that of computers, which makes it very important that all websites are optimized for these devices. It is not just that it loads well, but that the arrangement of the elements and the usability offers a good experience.

You will be able to review the user experience on mobile in the Mobile Usability report in Google Search Console and the Google Mobile Optimization Test.

What Are The Existing User Experience Cues?

Core Web Vitals add to existing metrics to measure user experience. These are:

Mobile-Friendly: This metric considers how easy it is to use a website on smartphones and tabs. The readability of the content is taken into account. Also, it accounts – if the links, buttons, and other elements are easy to click and accessible.

Safe Browsing: Analyze if the website is safe in general. That is, if you do not have malware, hacked content, or do phishing.

Use of HTTPs: This has been known to be a ranking factor for some time. Because it allows you to make sure that the web connection is secure.

Non-Intrusive Interstitials: See that important content on a page is unobstructed or difficult to see while browsing.

For your website to be ready for this change in Google’s algorithm, you must follow these tips to improve your main web metrics.

Wrapping Up!

Google algorithm changes very often time-to-time. Although these changes are inevitable, they create great new opportunities for improvement. For example, by keeping up with the new core web vitals – LCP, CLS, and FID – you can improve your website performance and SERP rankings.

Need More Assistance?

Leave Us A Message.