Great content that helps readers has been the primary factor behind Google’s web page rankings. However, when websites get heavy with new pages and ad channels, the reader’s experience takes a plunge. That’s why Google rolled out a series of metrics last year called the “web vitals” that essentially puts the focus back on the user experience (UX). The changes have started coming into effect from June 2021 so if your business needs to up the SEO game, make sure you’re aware of these factors.  

The three core web vitals

The web vitals are a set of guidelines to determine the experience a website provides to the users. However, Google has dived in further and picked three core web vitals necessary for a good page experience. These are

• Largest Contentful Paint (LCP) 
• Cumulative Layout Shift (CLS)
• First Input Delay (FID)

As you might have guessed already, the Google core vitals form the basis of what will turn out to be a crucial shift in SEO strategies. Even though the guidelines are primarily for developers, it’s important to be aware of them for anyone looking to rank in SERPs. 

---

Is this enough to make your head spin? At Mode, we’re experts at improving Core Web Vitals for your website. If you’re looking for help and want to skip the download…

---

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) measures the time it takes to load the largest content of a page on the viewer’s screen. It’s essentially a speed factor but it’s different from Speed Index (SI) and First Meaningful Content (FMC). FMC depends on understanding what the most meaningful content in a page is so the process can often come up with inaccurate results.  

LCP on the other hand is a lot more dynamic. The largest content is usually one of the major parts of a reader’s query so it makes sense to judge a website on how long it takes to show it. When a webpage loads, LCP often shifts between images, videos, headline tags, texts, and elements inside other elements. Suffice to say, blogs with minimal elements boast the best LCP. 

When websites quickly display the content a reader is looking for, they tend to stay longer and read more, helping Google rank the websites higher in search results. Google identifies 2.5 seconds or below to be a good LCP score. If the LCP score is between 2.5-4 seconds, it needs improvement. 

What hurts the LCP

According to Google, here are the usual suspects behind low LCP scores:

• Servers that respond slowly
• Very large unoptimized images
• CSS and JavaScripts that block rendering
• Resources that take longer to load
• Client-side rendering 

How to improve it 

LCP is crucial so here are some ways you can improve it:

• Optimize your server: The server and web host you choose to use can have a big say on LCP. To begin with, use Time to First Byte (TTFB) to analyze your service response speed. If it’s higher than the ideal, you can make some adjustments to your server. For instance, if you’re using a single server, you can use CDN to route users. You can also cache HTML pages and serve cache-first content.
• Remove and optimize JavaScripts: A Backlinko study reports that each third-party script can impact LCP by 34 milliseconds. It’s always a good idea to use only the necessary JavaScripts and render-blocking CSS to improve LCP. 
• Compress resources and optimize loading time: Always prioritize compressing texts, image and video files and minimize the use of different fonts to increase loading time. You can use lazy loading to preload resources and offer cached content when necessary. It’s also a good idea to display different formats of content based on internet connection. 

First Input Delay (FID)

After a website loads, the focus shifts to how a reader interacts with the page. And that’s what First Input Delay (FID) is all about: interactivity. 

FID measures the time a page takes to respond to a reader’s first command. This can be opening an element from the menu section, clicking on a link, or inserting an email address in the sign-up box. When a browser has to work with a lot of different elements in the background, it takes time to load a responsive page and that’s never a good experience from a user point of view. FID is less of a headache for text-based content but becomes crucial for landing pages and signup/ login pages. 

Pages forcing readers to wait is frustrating. Google identifies anything under 100 milliseconds to be a good FID score. Anything between 200-300 milliseconds means the page needs improvement but a score beyond that means that you have some serious work to do.

What hurts the FID 

Google outlines these factors to be the major reasons for bad FID score:

• Heavy JavaScripts 
• JavaScripts that block the main thread
• JavaScripts that take a long time to execute

How to improve it 

FID is one core web vital that can’t be authentically recreated in a lab. Since FID depends on user interactions in real life, it depends a lot on browser, device, internet speed, and location. But that shouldn’t stop you from making necessary arrangements to improve FID from your end. 

• Break up tasks: When JavaScript works on a long task, it ends up making the viewer wait for the website to respond. You need to break up long tasks in order to improve FID.
• Cut down on JavaScript size: The heavier the JavaScript, the slower it will work for your website. You need to spruce up the codes in order to make them run more efficiently
• Reduce execution time: You need to compartmentalize JavaScript usage in order to expedite the execution time. Two ways to do this are by deferring unused scripts and minimizing unused polyfills

Since FID is based on real-life usage, Chrome User Experience Report is a good place to check core web vitals tests.  

Cumulative Layout Shift (CLS)

Imagine this: you’re browsing a news site and you find a video player for a live interview. Just when you’re about to tap on the play button, the video player slides down, an ad pops up in the middle and you end up clicking on the ad. Not a good experience. And Google knows that. 

Cumulative Layout Shift or CLS is a metric that measures how stable the various elements in your website are. If the content is constantly shifting when the page is loading, the CLS score will be hit pretty badly. It’s perfectly reasonable to show ads but deceptive ads that impact the layout of a website, and ultimately, the user experience, are not good for SEO. 

Google identifies a score of 0.1 or below to be a good CLS score. Anything between 0.1 and 0.25 needs improvement and anything beyond that is poor.

What hurts the CLS 

If you’re getting a bad CLS score, chances are you’re doing one or a few of these things:

• Using images, banners, and embeds without dimensions
• Dynamically injecting content
• Using web fonts that cause FOIT/FOUT

How to improve it 

A good CLS score means that your website offers a consistent and reliable user experience. Here’s how you can improve the CLS:

• Set dimensions for images, videos, and ads: You need to specify the ratio for images, videos, GIFs, and other sections and not leave it to the browser to decide the dimensions. The same thing works for ads as well. You can determine a static ad position and clean up ads from JavaScripts to maintain a stable layout.
• Avoid dynamic content: Offering calls to action and directing readers to new content to extend their stay is not a bad practice. But it’s necessary to stop injecting dynamic content when the reader hasn’t specifically asked for it. Dynamic content can be article recommendations, newsletter alerts, and leading people to download mobile apps. If you must use these, reserve a space for them. 
• Minimize the complication of custom font usage: Rendering custom web fonts can alter the layout of a webpage. When a fallback font is replaced by a new font or some sort of invisible text field is displayed before the font can be loaded properly, it severely impacts the CLS score. You can simplify custom font usage and use tools such as font display and font loading API to speed up rendering.

Tools you can use to understand Google core vitals

Google has incorporated core web vital tests in multiple analytical tools.

• PageSpeed Insights: Google’s PageSpeed Insights has a robust dashboard to help you understand the core web vital scores and how to improve them. It uses Chrome user reports to produce real-life data. 
• Search Console: Similar to PageSpeed Insights, Google Search Console uses Chrome user reports. But what makes Search Console’s web vitals report different is the ability to see the LCP scores of all the links divided into good, needs improvement, and poor categories.  
• Lighthouse: Google’s Lighthouse is a capable tool to measure core web vitals and you can also tighten up your SEO following the metrics.

Other important metrics 

Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and First Input Delay (FID) are three major Google core vitals but they’re not the only important ones. 

First Contentful Paint (FCP) and Time to First Byte (TTFB) help determine LCP while Total Blocking Time (TBT) and Time to Interactive (TTI) are crucial for FID. The core web vitals are also a part of Google’s broad set of page experience signals.   

The other page experience metrics include mobile-friendliness, whether the page provides easily accessible content and safe browsing, and whether it’s served over HTTPS.

Page experience vs content: what is more important for SEO?

Search engine optimization (SEO) is an ever-evolving process. Google already has 200+ ranking factors so core web vitals alone will not be the deciding factors. 

The introduction of the core web vitals can make some businesses anxious but it’s important to know that Google doesn’t want to fix something that’s not broken. Core web vitals will be rolled out gradually, so you will have time to get your site up to speed (no pun intended), as needed. 

While it’s easy to get carried away with new tools and techniques, Google always stresses getting the basics right. Authentic and engaging content that answers the user’s problem is always going to be prioritized. However, with more websites fighting for the coveted number 1 page in Google search, it’s time to streamline the user experience and stay ahead of the competition.