publication logo

Core Web Vitals And Their Impact On SEO

Improving Your Site Performance by Adhering to Core Web Vitals Will Rank You Higher on Google Search Results

author profile

Parthi Loganathan

May 02 2022

9 mins read

You're the head of the marketing department at your company. Leads are slowing, and you're looking for ways to improve your website's ranking to capture more traffic.

You know how important SEO is. Recently, you've heard of something cryptic called "Core Web Vitals" from Google.

Let's demystify them for you and show you how they impact your website's search rankings.


What Are Core Web Vitals?

‎Co‎re Web Vitals is a new set of ranking factors for Google's search algorithm, so it's important for website owners, developers, and marketers like you to understand them.

On May 28, 2020, Google announced Core Web Vitals as a set of metrics that look at the quality of user experience on the web. These three metrics measure your website's performance, stability, and interactivity.

  1. LCP: How fast does a page load?
  2. FID: How soon can a user interact with a page?
  3. CLS: How stable is a page when a user scrolls and clicks?


Why Are Core Web Vitals Important?

Websites compete for attention. It’s crucial to have a website that's both easy on the eyes and easy to use.

For example, if your website has a lot of competition on SERPs (search engine results pages), and your Core Web Vitals score is lower than your competitor's, your website will rank below them assuming everything else is equal.

You want to rank higher. You deserve it.

Beyond Google rankings, paying attention to your Core Web Vitals improves your website's overall user experience. That helps your website visitors who might be visiting on slow networks from their phone while traveling for example. You don't want to lose a customer because they couldn't load your site.

TL;DR? High scores Core Web Vitals get you leads.

Going to the source, check out this video from Google Chrome Developers on Core Web Vitals and SEO:


Most Websites Have Bad Web Vitals — You Can Stand Out!

Wondering how many businesses have taken care of their Core Web Vitals? We sampled blog and marketing pages of 231 Series-A companies and ran the Lighthouse benchmarking tool on them to measure their Core Web Vitals.

76.1% of the sites we tested needed to improve their web vitals. A few hours of engineering could get them to rank higher on Google and stop losing customers to competitors.

76.1% of sites sampled had poor web vitals
‎‎

Deep Dive on the Three Core Web Vitals Metrics

Understanding the technical aspects of the three Core Web Vitals metrics is essential for any marketer who wants to improve their website's ranking and user experience. Let's take a closer look at LCP, FID, and CLS.


1. Largest Contentful Paint (‎LC‎P)

Every website page has a lot of different elements—images, texts, videos, widgets, etc. Each of these elements varies in size and load time. To see how well-optimized your page is, you need to check the Largest Contentful Paint (LCP).

The LCP measures how long it takes for the largest element on your page to load. A good LCP should take 2.5 seconds or less. A high LCP score means Google thinks your website visitors are likely to have a bad experience since it takes time to load your page.


LCP Score on PageSpeed Insights

How Can You Improve Your LCP?

Handle or Remove Third-Party Scripts

  • Third-party ‎sc‎ripts are commonly used for analytics and tracking. Some tracking is necessary for your business, but too many of these scripts can hurt your LCP. These might be social media plugins, analytics tracking, or ad scripts.
  • Consider using a Content Delivery Network (CDN) to serve static resources like images, CSS, and JavaScript files. CDNs are part of a network of servers located around the world that can deliver content faster by caching static resources on their edge servers, which are physically closer to the user.

‎Op‎timize Your Images

  • Images are often the largest files on a page and have long load times.
  • Optimize your images by using responsive images and file formats like WebP.
  • Use the right types of images. Raster graphics images are made of tiny squares or pixels. They get blurry when you zoom in. These images are jpg, gif, and png files. Vector graphics images are mathematical curves like lines, shapes, and points. These images don't get blurry when you zoom in because they're not made of pixels. These images are SVG files. You may want to use raster graphics for bigger and more detailed images and vector graphics for smaller images, like icons for web pages.
  • Compress your images. Images come in different file sizes, slowing web page load times. By compressing your images, you can decrease the file size and make them load faster.

Watch this 12-minute video from WPBeginner to optimize your image for web performance without losing quality.


Optimize Your ‎CS‎S

  • Optimizing your CSS will improve your LCP.
  • You can optimize CSS by minifying it, which means stripping out comments and spaces in your CSS file. Less code and less render-blocking mean faster load times.

Here's a video from Google Search Central about improving your LCP:


How To ‎Me‎asure Your LCP

To measure your LCP, you can use Google's PageSpeed Insights tool. This tool gives your website an overall performance score out of 100 and provides specific tips on how to improve your LCP.

Here's an example of what PageSpeed Insights look like when you test a URL.


PageSpeed Insights Core Web Vitals Assessment


PageSpeed Insights Performance Score


PageSpeed Insights Metrics

It is important to note that your LCP score is only one part of your overall performance score to get a higher ranking. You should also focus on other metrics such as First Input Delay (FID) and Cumulative Layout Shift (CLS).


2. First Input Delay (‎FI‎D)

When you go to a specific webpage, the first thing you want to do is interact with it. Whether it's clicking a button, a link, or a checkbox, you want to be able to do something.

And it's a drag when the page seems frozen or unresponsive, right? You wouldn't want that for your users.

That's where FID metrics come in. FID, also called Input Latency, measures the time it takes from when a user first interacts with your page to when the browser can respond.

A good FID score is 100 milliseconds or less. If it takes longer than 100 milliseconds for the page to respond to your first interaction, the page will get a poor FID score.


FID Score on PageSpeed Insights

How Can You Improve Your FID?

FID is affected by a few different factors, including the speed of the user's device, the size and complexity of your webpage, and your JavaScript code.

There are a few things you can do to improve your FID:

Use ‎Co‎de Splitting

  • Loading lots of code blocks your main thread (browser process), resulting in JavaScript load. This can hurt your page's responsiveness, increasing your FID. 
  • Code splitting is a technique that allows you to split your JavaScript code into smaller pieces so that the browser can load them separately.
  • This way, only necessary code is loaded, and the page responds faster to user interactions. You can use Webpack to break your code into smaller chunks.

Load Third-Party Scripts Asynchronously Or Drop Them

  • Having too many third-party scripts can delay your own scripts from executing. It's best to remove any script that's not critical to the page. Load the ones you do need asynchronously so that they're not blocking.

Accept Suggestions from ‎Pa‎geSpeed Insights

  • Google's PageSpeed Insights tool provides feedback on your FID score. So it's a good idea to take note of its recommendations to improve your page's performance metrics.


PageSpeed Insight

3. Cumulative Layout Shift (‎CL‎S)

Scrolling through a page can be a nightmare when it jumps around. We've all been there, and it's ugly.

That's what CLS metrics measure.

CLS or Cumulative Layout Shift is a visual stability metric that measures how stable your page is when a user scrolls down or clicks through different sections of the page.

If you have elements on your page that are constantly moving around as it loads, it will have a high CLS score.

A good CLS score is 0.1 or lower. A score higher than 0.1 is unstable, and Google will likely rank that page lower in the SERP.


CLS Score on PageSpeed Insights

How to Improve Your CLS Score

There isn't a silver bullet for improving your CLS score. You can do some things to improve your chances of scoring higher.


Set Attribute ‎Di‎mensions to Your Images and Videos

  • Images and videos are often a large part of your page, which is why it's important to set their dimensions, so the user's browser reserves space for them.
  • If you don't set the dimensions, the browser will have to wait until it loads the image before it can render the page, which may cause sudden jumps or shifts.
  • Here's a code example of how to set specific dimensions for your images:

Image Dimensions Code

Reserve a Specific Space for ‎Ad‎s

  • Don't let ad networks dictate the space they occupy on your page. Instead, choose where you want the ad to appear and reserve that space in advance by designating height and width elements. This will prevent the browser from jumping around as it loads ads.

Make Your Page ‎La‎yout as Simple as Possible

  • The more elements you have on a page, the more complex your layout becomes. This makes it harder for a browser to render the page in an orderly fashion, resulting in a high CLS score.
  • Minimalist designs that prioritize functionality are often the better choice when you're optimizing your page for speed.

Here's a video from Elegant Themes to improve your CLS score.


Conclusion

As a marketer, your job doesn't end with creating a great piece of content. You also need to work on optimizing page speed and layout so that users can access it quickly and easily.

Google's launch of the Core Web Vitals metrics is a great opportunity for you to improve your page's performance and, as a result, its SERP ranking.

If you feel like your content isn't ranking as high as it should, analyze your page's Core Web Vitals: the CLS, FID, and LCP numbers. The culprit stealing your SERP performance may be found hiding in there. Talk to your engineering counterpart to address these technical SEO issues and get your site ranking high on Google.

At Letterdrop, we've done a lot of the hard work to help our customers host performant blogs that have high scores across Core Web Vitals. In fact, this blog is hosted on the Letterdrop platform. If you want help with your blog's performance, talk to us!

Read more posts like this in your inbox

Subscribe to the newsletter