Are You Up to Speed? Here’s What You Need to Know About Core Web Vitals…

Would you stay on a site that’s difficult to navigate? We didn’t think so. If the speed of your site page increases from one to just two seconds, this can make your bounce rates jump by 32%. 

The user experience matters. That’s why, starting in June 2021, Google plans to update its algorithm to incorporate page experience as a ranking signal. This will be fully in place by the end of August. One critical component to measure page experience will be core web vitals. 

Let’s take a comprehensive dive into what core web vitals are and what you need to do to improve your search engine rankings. 

What Are Core Web Vitals?

Core web vitals are signals Google uses to assess the quality of your web page’s user experience.

While traditional ranking signals might tap into the text of your pages (keywords, copy, outbound/inbound links, etc.), core web vitals specifically focus on the on-page experience. 

There are three specific metrics core web vitals entail (we’ll cover these in depth later on): 

• Largest contentful paint (LCP): How fast is your page loading on desktop and mobile?
• Cumulative layout shift (CLS): How stable is the visual layout of your page?
• First input delay (FID): How quickly can you get from one page to another?

Why Should You Care about Core Web Vitals?

If you don’t look after your core web vitals, you won’t make a good first impression. This impression can make the difference between someone becoming a customer and someone ditching your site for a competitor’s. 

Research shows when a site fulfills the requirements of core web vitals, people are 24% less likely to abandon page loads (leaving the page before the site’s content has loaded on the screen). Not to mention, 80% of customers are willing to pay more for a better user experience. 

So again, the user experience matters, and Google will quantity your page experience using the three performance metrics. 

Core Web Vitals—The 3 Key Performance Metrics

As we mentioned earlier, there are three performance metrics to core web vitals. They measure  the load time, stability, and interactivity of your web pages. Let’s dive into each. 

1. Largest Contentful Paint (LCP)

LCP is how fast your page loads. To assess this, Google looks at the load speed of the largest piece of content (main image, video, or text block) on your page. 

Your page speed can be influenced by a number of factors like your server time, render-blocking CSS and JavaScript, and client-side rendering. 

You should aim to have an LCP of no more than 2.5 seconds. 

2. Cumulative Layout Shift (CLS)

Have you ever clicked on a button and then the site page suddenly shifted in a weird way? Maybe the text or link moved, so you ended up clicking something else by accident. Annoying right? This is what CLS is all about. 

CLS looks at how stable your pages are. When site elements are loaded asynchronously, this messes with your site’s visual stability. This can be due to factors like unknown image/video dimensions, a third-party ad, or a font that renders smaller or larger than its fallback.

Sites should strive to have a CLS score of less than 0.1.

3. First Input Delay (FID)

FID focuses on the interactivity and responsiveness of your pages. 

When a user clicks on a button, how fast does it take them to the next step? If there’s a lag or nothing happens at all, you’ve got a problem, and Google will count this against you. These issues might be due to a large JavaScript file or a third-party code in your HTML. 

Your site should have an FID of no more than 100 milliseconds. 

Core Web Vitals & Rankings—What You Should Know

It’s important to note that the three metrics of core web vitals are just a few of the page experience signals Google will officiate by the end of August 2021. So, in addition to LCP, FID, and CLS, the search engine will also include the following into their algorithm: 

• Mobile-friendliness 
• Safe-browsing 
• HTTPS-security
• Intrusive interstitial guidelines 

Another thing to keep in mind? Core web vitals are going to become a criterion for Google Top Stories—the news results that appear at the top of search results. 

Traditionally, AMP stories (mobile-format news that offers tap-through stories) were a requirement to show up in the top stories, but this will no longer be the case. In addition to Google News inclusion requirements, you’ll need to meet minimum specifications of core web vitals to win visibility on Google Top Stories.

How Do You Fix Your Core Web Vitals?

So if you find your core web vitals aren’t up to speed, what can you do to fix those issues? 

Dive into the Google Search Console, and you’ll find a Core Web Vitals report. 

The report will illustrate your URL performance grouped by: 

• Status (poor, need improvement, good) 
• Metric type (LCP, CLS, FID)
• URL group (web pages grouped based on similar issues) 

Keep in mind, only indexed URLs appear on the Core Web Vitals report. So make sure all of your relevant pages are properly indexed. To check this, you can go to your coverage report in Google Search Console. 

Possible Issues & Solutions You Can Try

Let’s revisit the three metrics and discuss possible issues and solutions to help you stay on Google’s good side this year and on. 

1. Largest Contentful Paint (LCP)

Factors like a slow server, render-blocking CSS and JavaScript, and client-side rendering can hit your LCP pretty bad. 

Here are ways to help you mend these issues and boost your LCP: 

• Remove problematic third-party code or load it differently. One third-party script can slow a page down by 34 milliseconds. You can identify the problematic code through methods/tools like a lighthouse performance audit and waterfall chart. 

Though including third-party code is generally mandatory for sites today, you can either: 

• Get rid of the code, that is, if you know you can remove it without breaking anything (retargeting trackers, ad inserters, etc.) 
• Load it in a different way to help lessen the impact it has on your page speed. This might involve implementing lazy loading—code that loads content only if the user scrolls down your page. If you decide to do this, be sure to load the content within your viewport. That way, the Google bots can properly index them, and you won’t miss out on SEO opportunities.
• Upgrade your web host. If your site is slow or experiences a lot of downtime, it’s time for an upgrade. The better the host, the faster load times you’ll have. 
• Route users to a nearby CDN. If your page is hosted on a single server, a user who is located far away geographically will experience slower load times. Why? Their browser requests have to travel further. Using a CDN, or Content Delivery Network can minimize the physical distance between the server and user, thereby reducing load times. CDNs operate a network of servers located in different locations around the globe. 
• Remove large page elements. Use Google PageSpeed Insights to see if your page has a specific element (text, video, image, etc.) that’s slowing down your page. 
• Minimize your CSS. Characters like comments, spaces, and indentation take up space, slowing down your page speed. Reduce the bulk and remove these characters. 

2. Cumulative Layout Shift (CLS)

There are several reasons why you might have shifty layouts in your pages: 

• Image/video dimensions are not defined. Their width and height should be defined in your HTML. So dive into your code and make the necessary changes. Or, you can implement CSS aspect ratio boxes—this helps the browser allocate enough space on your page while your image/video is loading. 
• Third-party ads that resize themselves. Most ad networks and publishers support dynamic ad sizes. The problem with this is that ads can push your content further down, up, or to the side of your page. Therefore, be sure to reserve ad space on your page. For more information, check out Google’s ad optimization tips. 
• Font issues. If you’re using fonts hosted online, this can cause flashes of invisible text (FOIT). In other words, the text will be invisible to your user until the download is complete. To avoid this, use font-display values like auto, swap, block, fallback, and optional. Or, you can preload font files using , so the browser will understand they are a priority.
• Animations. Animations are fun and can offer a great user experience, but if they aren’t executed well, it can cause your content to shift abruptly. To avoid this, be sure to use the transform property in your CSS. 

Your development team can use the web-vitals JavaScript library to measure your CLS and identify where exactly you need to make adjustments. 

3. First Input Delay (FID)

If you have a log-in or sign-up page, FID plays a crucial role. You don’t want there to be any issues as people try to access their accounts. 

Here are a couple of ways to mitigate and improve your FID: 

• Minimize your JavaScript. The less JS you have, the less information the browser needs to parse through. This speeds up the time it takes to respond to user interactions. Therefore, defer any unused JavaScript files (like third-party scripts) by using async or defer functions. Or, code-split your JS by bundling them into smaller files and lazy loading them. 

• Prioritize third-party scripts. Third-party tags and analytics keep the network busy, causing interruptions. Consider lazy loading these scripts by prioritizing them. For example, you might want to load the below-the-fold ads until the user has scrolled closer to them.  

Optimize Your Core Web Vitals the Right Way—Contact Us

There’s a lot of backend work involved in core web vitals. If this makes the hairs behind your neck stand, don’t worry—reach out to Big Leap. Having enhanced the user experience for 600+ businesses like yours, you can lean on us to bolster your online potential and conquer 2021 and beyond.