Core Web Vitals: How Your Business Can Prepare for Google’s Next Ranking Factors

Google has identified three new signals to recognize positive website user experiences (or lack thereof). These signals, known as the Core Web Vitals, are being incorporated into Google’s algorithm in May 2021. Noble Studios has everything you need to know to keep your site experience optimized for long-term success.

What Are the Core Web Vitals?

In early 2020, Google announced Web Vitals, its newest set of ranking factors. Within these new metrics, there is a particular subset of metrics to focus on known as the Core Web Vitals. According to Google, “Core Web Vitals are a set of real-world, user-centered metrics that quantify key aspects of the user experience.” Essentially, the Core Web Vitals are intended to measure important aspects of real-world user experiences on the web (ex. page load, interactivity, and page stability). So far, Google has identified three core web vitals to focus on:

• Largest Contentful Paint (LCP): How fast the page loads. “Good” is <2.5 seconds.
• First Input Delay (FID): How fast the page becomes interactive. “Good” is <100 milliseconds.
• Cumulative Layout Shift (CLS): How visually stable the page is. “Good” is <0.1.

In May 2021, Google will update its algorithm to incorporate the three Core Web Vitals with its existing page experience signals as ranking factors: mobile-friendliness, safe-browsing, HTTPS security, and intrusive interstitial guidelines. Although the Core Web Vitals aren’t directly influencing page rankings now, the page experience update is only a few months away. And many of the updates needed to improve Core Web Vital scores can be time and labor-intensive. Now’s the time to start reviewing performance on your site - or working with an agency like Noble Studios who focuses on SEO services - and get a jump start on making Core Web Vitals improvements.

Largest Contentful Paint (LCP)

We know that Google has been looking at site speed for a while now. It's a key aspect of creating a positive user experience. One study found that the anxiety from mobile speed delays is similar to that of watching a horror movie. Yikes. But that's where LCP comes in. Largest Contentful Paint (LCP) measures the time it takes for the largest piece of visible content to load on a page. An example could be a hero image block. Google recommends that LCP should occur within 2.5 seconds of the page starting to load.

First Input Delay (FID)

Have you ever clicked something, but nothing happened? Or it took a long time for anything to happen? That's a poor user experience. First Input Delay (FID) measures the time between a user’s first interaction on a page and its ability to respond to that interaction. For example, the time it takes between a user clicking a link to when the browser processes the interaction and opens the link. The shorter the delay, the better your FID score and overall user experience. Note: Because FID is based on real user interactions out in the wild, it cannot be simulated in a lab. Some tools will use a different metric, Total Blocking Time (TBT) to predict FID in the lab.

Cumulative Layout Shift (CLS)

We’ve all experienced a time when a page loads, we go to click on something, and suddenly the page content shifts, causing you to accidentally click something else. I can't count the number of times I've accidentally clicked an advertisement while scrolling through an article on my phone because the content shifted. Cumulative Layout Shift (CLS) measures visual stability and quantifies the amount of unexpected layout shifts on the page. To provide a good user experience, pages should maintain a CLS of less than 0.1. To arrive at the CLS score of a page, the following formula is used:

• layout shift score = impact fraction * distance fraction

The impact fraction is the total percentage of a viewport that is impacted from a layout shift, and the distance fraction is the percentage of how far content shifted in a viewport. If a layout shift changed content placement for 75 percent of the viewport, and content moved down only 25 percent of a viewport, the layout shift score can would be .75 * .25 = 0.1875. View Google’s example here.

Why Are the Core Web Vitals Important to SEO?

As soon as May 2021, Google will incorporate the Core Web Vitals as key ranking factors in its algorithm, so ensuring your website is performing at optimal speeds and performance levels before the rollout is essential to maintaining your pages’ ranks on the SERP. Perhaps even more important, the Core Web Vitals were created as measurements of the user experience on your website. Optimizing for these factors makes for a more satisfied, engaged, and loyal audience.

How Do I Improve Core Web Vitals?

When it comes to analyzing and improving your Core Web Vitals, Google recommends checking the performance of 75 percent of all your pages to ensure the majority of users who visit your site have a great UX. Tips for improving each of your Core Web Vitals are listed below.

How Do I Improve LCP?

Remember, LCP measures how long it takes the largest piece of above-the-fold content to appear on a page. So to improve it, you’ll want to focus on identifying and optimizing whatever is blocking that content from loading. Here are a few examples of ways you can improve Largest Contentful Paint:

• Speed up server response times. Before a browser can load any of the content on your page, it has to first receive that content from the server. The longer the server response time, the longer your LCP. Focus on optimizing your server, implementing caching, and pre-connecting to essential third-party requests.
• Remove render-blocking JavaScript and CSS. Identify any non-critical JavaScript and CSS files on each page. Why? Linking to external scripts and stylesheets causes the HTML parser to pause when it is trying to render the page. By removing, deferring, or inlining non-critical files, you can speed up load time for the most important content on the page.
• Speed up resource load times. CSS and javascript files aren’t the only elements that can impact page speed. Heavy images, videos, or text blocks placed above-the-fold have a direct impact on the largest contentful paint. For faster results, ensure media files are optimized, text files are compressed, and important resources are preloaded.

How Do I Improve FID?

The primary cause of poor First Input Delay is heavy JavaScript execution. Basically, when your browser is too busy loading a bunch of JavaScript in the main thread, it can’t respond to the things the user is doing (like clicking on buttons). So, what types of JavaScript optimizations can help improve FID?

• Reduce it. Reduce the amount of JavaScript that loads on a single page. Period.
• Break it up. Break up long tasks (50 ms or more) into smaller tasks that don’t try to run at the same time.
• Run it in the background. Use a web worker to run JavaScript on a background thread rather than blocking the main thread.
• Defer it. Defer unused JavaScript to reduce execution time.

How Do I Improve CLS?

Cumulative Layout Shift measures the amount that content on the page is changing positions unexpectedly. Why does this happen? Not all of the elements on a page load at the same time. For example, you might start to see text appearing before a large image or video. But if space wasn’t “reserved” for these slower-loading elements within the code, then it has to push, or “shift,” the position of previously loaded content in order to fit on your page. This is a layout shift. To stabilize the content on your page, follow these simple tips:

• Add dimensions to images and videos. By including width and height attributes on image and video elements, you can reserve the space for an image until it has loaded.
• Add dimensions to embeds & iframes. Embeddable widgets like YouTube videos, Google Maps, etc. often cause layout shifts when they are loaded. To fix, find the height of the embedded object after it is loaded, then create a placeholder that reserves the necessary amount of space.
• Avoid dynamically injected content. Avoid inserting new content above existing content that causes a shift in the layout of the page.
• Reduce font changes. Fonts are often large files that take time to load. When web fonts are downloading and rendering, they may cause layout shifts. To minimize, preload key web fonts or use the Font Loading API to reduce the time it takes to get a font.

Need Help Improving Core Web Vitals On Your Website?

The clock is ticking to improve the Core Web Vitals on your website before they begin to impact your search rankings. To get started optimizing your site’s UX and SEO, contact Noble Studios and we’ll help your site performance get better every day.