Dr. Google or How I Learned to Stop Worrying and Love Core Web Vitals

Core Web Vitals. What are they and why do they matter? I’m sure you’ve heard the term numerous times by now, but it’s super important because a few months ago, Google announced that Core Web Vitals will become an official ranking signal in May 2021 as part of a more robust page experience ranking. Core Web Vitals is pretty much the cornerstone component of the page experience score, so let’s take a deep dive into what it is and how you can improve your Core Web Vitals.

Core Web Vitals are a set of real-world, user-centered metrics that quantify key aspects of the user experience. In non-Google speak, they are designed to measure how real users experience the speed, responsiveness, and visual stability of your site.

Core Web Vitals are made up of three specific page speed and user interaction measurements: largest contentful paint, first input delay, and cumulative layout shift. Those are fancy terms, so let’s break down all three of the Core Web Vitals and what improvements you can make to them. 

Loading - Largest Contentful Paint (LCP)

This is the time it takes for a page’s main content to load. It’s important because it’s measuring how long it takes a page to load from the point of view of an actual user. This focuses on what it’s like for your users to open a webpage and begin interacting with it.

There are a few ways to check your LCP score: Google PageSpeed Insights, Lighthouse directly, or perhaps most intimately, Google Search Console.

All of these tools are useful in explaining how a page performed and opportunities to improve it. With GSC, however, you can see the LCP results from your entire site as opposed to analyzing page-by-page.

Google breaks down their specific LCP guidelines into three buckets: Good, Needs Improvement, and Poor. 

Ideally, you want every page on your site to hit LCP within 2.5 seconds for best results.

A tough feat no doubt, and a real challenge for developers, but there are ways to improve your pages. Here are a few tips:

• Images. Having dozens of high-res imagery on your page will absolutely negatively affect your LCP. Throwing them on a CDN isn’t enough. It’s a good start, but images need to be optimized and sometimes removed from a page. If it’s not necessary, or adds nothing to your page, remove it.
• If you’re running tons of third-party scripts and apps on your pages – you’re in for a rude awakening. Each of these third-parties will most likely inject a number of scripts and dependencies on your page. Some are optimized better than others, but some can really drag down performance. For a thought exercise, Americaneagle.com can help you review what third-party apps you can possibly remove or recreate to reduce dependencies.
• Get a better web host. This is kind of a no brainer, but having your site on a better server will result in faster load times.
• Lazy-load it all! Lazy-loading is the practice of only loading images when a user scrolls to that image. Implementing this is important on all modern sites and can significantly speed up your site.
• Remove unused elements (do you really need that old CSS file from your previous site?) and minify CSS/JS as much as you can.

Interactivity - First Input Delay (FID)

This measures the time it takes for a page to become interactive. When a page is loading, how long does it take for it to respond to clicks, scrolls, or keyboard inputs? If your page has a lot of thread-blocking scripts, it’ll delay user interaction.

First Input Delay is super important to Google because again, it takes into account how real-life users interact with your site. Google also has a specific guidelines for an acceptable FID:

Therefore, the goal is for something to happen on a page in 100 MS or less. This is a less important metric for content-only sites as there isn’t a lot of expected interaction beyond scrolling. However, this is super important for E-Commerce sites or Account portals where the user would need to interact with a login page, sign up page, or interact with a shopping cart.

Let’s be honest, no one wants to wait to start typing in their username and password to login, so the quicker real users can begin interacting with elements, the better FID score.

Some brief tips on how to improve First Input Delay:

• Defer that JS! While JS is loading and all of those network requests are being made, users will most likely not be able to interact with your page. Defer any JS that is unnecessary for users to start interacting. It’s important to deliver smaller JS payloads.
• Similar to LCP, if your page is littered with third-party scripts, that’s going to affect FID. Remove any non-critical scripts.
• Use efficient cache policies to load content on your page faster. If a browser is able to cache some of the main-thread JS scripts, then it won’t need to make a network request the next time that user visits your site.

Visual Stability - Cumulative Layout Shift (CLS)

This measures visual stability – the amount of unexpected layout shift of visual page content. To put it another way, if you have dozens of elements on your page move around as the page loads, then you’ll have a high CLS.

For example, if you have a dynamic banner ad or header at the top of the page that is injected in after page load, this will push the content that was rendered during page load further down on the page. Now your users have to re-learn where links, images, and content are located. Or worse, even click on something by mistake. This will frustrate a user and increase bounce rates! All content and elements need to be stable as a site renders. 

Again, Google measures in a Good, Needs Improvement, and Poor metric for CLS. Pages should maintain a CLS of less than 0.1 for best results. The CLS score is based on an impact fraction * distance fraction metric. Impact fraction measures the instability of elements between two frames while distance fraction measures the distance those unstable elements have moved in the viewport.

There are a few ways to account for a good CLS:

• Set explicit widths and heights to image elements. Browsers will know how much visual space that element will take up on the page and reduce layout shifts.
• Set reserved spaces for dynamic elements like banner ads or elements coming in after page render. If a dynamic element does not have a reserved space, you run into the potential of that element pushing the rest of your page’s content down.

It’s important to note that not ALL layout-shifts are bad. It’s only bad if the user isn’t expecting it. User-initiated shifts are generally fine and often necessary for interactive elements.

Let's Improve Your Core Web Vital Score!

Americaneagle.com loves talking Core Web Vitals, so if you want to improve your Core Web Vitals score, please contact us and let’s chat.