Core Web Vitals: What They Are, And Why It’s ‘Vital’
November 2023
#Monetization
If you’ve heard the term “Core Web Vitals” thrown around online, your first thought was that it definitely sounded important — anything “core” is usually pretty critical, and the term “vitals” pops up in day-to-day life mostly in TV hospital dramas — but the term, by itself, doesn’t really get into the specifics of what it’s talking about. To the uninitiated, it could mean any number of Important Internet Things, and if you were afraid to ask, we’ve got the answers for you right here.
Simply put, your Core Web Vitals (CWV) are performance metrics Google uses to measure your site’s health. It’s a measure of how well your site functions and what sort of experience a user can expect, so that Google can factor that into how highly they can recommend your page on the Search Engine Results Page (SERP).
Things like how fast a page loads, how stable it is, and how it responds to user inputs all factor into Google’s Core Web Vitals score. The better the score, the more comfortable Google feels vouching for you in search results. Google web crawlers automatically scan your site to collect this data, and since 2021, Core Web Vitals have been part of the Google search algorithm. If you want to play on Google’s court — which, of course, we all do, given their current dominance over the industry — we have to play by their rules.
Your CWV score isn’t just a component of search-engine results — it's also a measure of how your users will interact with your website. Pages that load slowly will suffer from high bounce rates, as impatient users bail before the content you’ve worked so hard on has a chance to load. Pages that don’t respond quickly will be frustrating and sluggish to use. Plus, visually-unstable pages are frustrating to navigate, as anyone who has gone to click on something only for an ad to push everything half an inch to the left can attest. CWV also measure how mobile-friendly your site is, which is something to strive for even if Google weren’t measuring it.
Basically, there’s no reason not to check your vitals, and improve them any way you can.
By The Numbers
There are three main components of your Core Web Vitals Score:
Largest Contentful Paint:
LCP measures how long your site’s content takes to load on the page, particularly the biggest components like your images, videos, and text. Like we said earlier, a slow loading time creates a poor user experience and increases bounce rate. Google recommends an LCP below 2.5 seconds.
First Input Delay:
FID clocks how long it takes for your page to respond when a user interacts with it for the first time — interactions like link clicks, JavaScript actions, and button taps. Much like LCP, a poor FID score makes for a poor user experience. Google’s preference is an FID that comes in below 100 milliseconds.
Cumulative Layout Shift:
It’s happened to you: you’ve gone to click or tap on something on a website, but at the last second, the page shifts and you end up clicking on the wrong thing. Or a picture pops in and moves the paragraph you were reading several inches further down. It’s incredibly frustrating, and that’s what CLS measures: how long it takes for your pages layout to solidify while loading . Google wants a CLS score at or below 0.1.
First Contentful Paint:
The FCP measures how long it takes for anything at all to load on your page. The longer a loading page sits on a white void, the more unsettling it is for users — so Google recommends an FCP of 1.8 seconds or less. While less important than the other three we just went over, you can see how something like that would affect the user experience
The first step to improving your CWV score is obviously finding out what your current score is. There are several ways to figure that out. Google’s developer tools provide you several options for that, including:
- Chrome User Experience Report - this is a report that collects data from users, providing it through tools like PageSpeed Insights and Google Search Console.
- Chrome Web Vitals Extension - this identifies CWV while you’re browsing the web or working on your site, but it also allows you to compare your scores with other sites — including your competitors. You can see how that would be valuable.
- Semrush - everybody’s favorite search engine marketing tool also allows you to apply the Site Audit tool to see your LCP and CLS scores.
Improving Your Core Web Vitals
Okay, so you’ve learned what Core Web Vitals are, and, more importantly, you’ve gone out and used one of the available tools to figure out what your Core Web Vitals are. The next step is improving on those numbers. So, how do you do that?
Depending on your setup, some things may ultimately be out of your control — it’ll depend on things like what kind of platform you use for your website (WordPress, Shopify, etc.) and who you’re using for your web hosting. So let’s have the wisdom to accept the things we cannot change, and focus on the things we can:
First/Largest Contentful Paints, First Input Delay:
The tricks used to improve your LCP timing should also, ultimately, improve your FCP timing, because a lot of them depend on the same things to function. Your First Input Delay, too! So the majority of items in this section are three-for-one deals, and a great place to start.
One of the first things to check out is your web hosting. If your website is loading particularly slowly, you might want to start thinking about a switch to dedicated hosting rather than a shared server.
Another suggestion Google makes for this type of situation is a Content Delivery Network (CDN). The further away a user is from the server where your site is hosted, the longer it can take to load. CDN services distribute your content among many servers around the world, so that site content loads quickly regardless of location.
Caching your website content can also speed up several website processes, including faster content paints and less input delay. Caching your static HTML content means it doesn’t have to be loaded fresh each time someone checks out your page. Caching will function differently depending on your hosting - WordPress has available plugins to accomplish it, and other platforms may have adjustable settings you can get under the hood with. This won’t work with Facebook or other third-party services, but most others should work.
Speaking of WordPress plugins, if you’re running your site through WordPress you’re going to want to make sure that you’re only running the processes you need. If you’re not using a particular plugin anymore, axe it. Make sure you’re running the latest version of any plugins that remain, and make sure that those are necessary for the site experience that you want. Bloated code loads more slowly on the user end.
Consider any processes that may be running on your website that can be turned off or better optimized for performance. On a WordPress website, for example, you can reduce the number of processes handled by your database by removing outdated or unused plugins.
Something else you can optimize is the image files used on your website - both in and behind the content, if you’re using a photo in the background of your layout. Today’s digital cameras can take pictures of a truly staggering size — resizing images so that they aren’t much bigger than necessary for your site layout is a good way to speed up loading times. General images should be in a jpeg format, while logos can get away with being a less-intensive format like a .PNG or .SVG file. You might also want to explore WebP images, a lesser-known format that is becoming increasingly popular because of its ability to load high-quality images with less lag.
Some tools to help you with image optimization include:
- EWWW Image Optimizer
- TinyPNG
- Imagify
- ShortPixel
- Semush
Lazy loading is another way to speed up how quickly your website loads. Essentially, rather than attempting to load the entire page all at once, lazy loading loads the page in a rolling fashion as the user scrolls down the page, only popping your elements in once they’re needed.
And, lastly, you’re going to want to optimize your fonts. It’s good visual-design practice in general to limit yourself to only a couple of fonts — like one font for headlines, and one font for body text. It produces a nice, clean look. But when you’re optimizing your page loads, it has an added benefit: speeding up your loading times. If you’re using unusual fonts, then your website text can’t load for a user until the font files themselves have finished loading. Using the sort of common fonts people are likely to have stored locally on their computers will speed up this process.
Cumulative Layout Shift
Obviously, accelerating your page loading with the tricks we’ve already talked about will also help expedite how quickly your site layout stabilizes, but there are some things to consider. Some people address slow-loading fonts, for example, by utilizing “fallback fonts” that pop in while the more-complex font files load — and that can create layout shifts as page fonts change size and shape.
So, be selective about what fonts you’re using, as it can affect CLS as well as the other features.
But one of the key ways to correct your CLS is to optimize your page’s CSS (cascading style sheets) functionality. To optimize your CSS code, you need to “minify” your CSS, which involves removing unneeded elements from your stylesheet. Google recommends “csso” and “CSSnano” to minify your CSS, or another tool like “CSS Minifier.”
You’ll also want to check your CSS for render-blocking resources. Certain scripts can cause loading hiccups that prevent your users from seeing content. CSS Minifier and the other tools can help you out there as well.
First Input Delay
While a lot of FID issues are improved by the general page-speed improvements we listed higher up, one way to address FID specifically is to optimize your JavaScript plugins and other third-party scripting.
Minifying your JavaScript involves removing unnecessary characters from your scripts, eliminating code your site isn’t using, and transferring code you don’t need for the first page load to a preloaded resource until you need it. You’ll notice that a lot of the strategies for improving your website’s functioning involve similar philosophies: streamlining what you need, removing what you don’t, and not deploying parts of your site until it’s needed.
Google Chrome DevTools’ Coverage feature can be used to identify any code that can be set aside until needed. To minify your JavaScript, try UglifyJS.
And lastly, you can look into Deferred JavaScript Loading, which will eliminate additional render-blocking elements, which should make your JavaScript load more-quickly and allow users to provide inputs faster.
Check Again
Your user experience is a key component of where you land in site rankings and search results, clearly, but it’s also a key component of your users’ experiences on your site. So an important thing to remember with these sorts of optimizations is that they’re not a one-and-done situation. You’re going to want to set up a schedule, perhaps quarterly, to check on your site performance and make sure nothing needs to be adjusted.
Performing site maintenance at regular intervals makes sure your users are having the best experience possible - which translates into more revenue for you. That’s why Insticator’s Commenting 2.0. and Content Engagement features are specifically designed with Core Web Vitals in mind, so that your widgets load quickly and seamlessly, guaranteeing the best experience possible. If you’d like to learn more about how we can improve your user experience, check out our homepage.
Written by
Sean Kelly, Senior Content Writer
Sean Kelly is a Senior Content Specialist, St. Louis-based engagement expert with 20 years of experience in content writing, and 8 years in adtech.
Written by
Sean Kelly, Senior Content Writer
