On May 28, 2020, Google introduced Core Web Vitals (CWV), a set of new ranking signals used for assessing page experience with the website. The signals, which are a part of Google’s Page Experience Update, went into force back in June 2021, so it’s been enough time to assess the full impact of this update on user experience (UX) and SEO.

But first, let’s look at what these metrics actually mean.

What are the three Core Web Vitals?

Core Web Vitals (CWV) were created by Google to assist website publishers in optimizing page performance for site users. Publishers should care about website performance since it increases leads, sales, and advertising revenue.

Here are the three pillars of Core Web Vitals:

• Largest Contentful Paint (LCP): Measures loading performance. Represents how quickly the users see the most important or relevant piece of content when the page first loads (e.g., text element, image, video).
• Cumulative Layout Shift (CLS): measures a page’s visual stability. In other words, it’s a measure of how much your web page layout shifts in the screen’s visible area. For example, a button can move just when a user wants to click on it, resulting in the user accidentally clicking on the wrong button.
• First Input Delay (FID): measures interactivity. It’s expressed in a period of time between the user initiating their first interaction with the page (e.g., when the user has pressed on a link or clicked a button) and the browser being able to complete this task.

The image below demonstrates how Google defines CWV metrics thresholds.

How do Core Web Vitals affect rankings?

According to field data from 5.2M pages, nearly 33% of websites today are passing Core Web Vitals thresholds, which is about 10% up from the year before.

According to Searchmetrics Core Web Vitals Industry Monitor, 56% of the top 100 U.S. desktop domains pass Core Web Vitals (as of February 2022).

But the data also unfolds another big factor–heavy brand effect. It means that major brands rank highly and have good SEO visibility even if their Core Web Vitals scores aren’t as good.

Google supports this finding: “While page experience is important, Google still seeks to rank pages with the best overall information, even if the page experience is subpar. Great page experience doesn’t override having great page content”.

However, it doesn’t mean you shouldn’t strive to hit the threshold. Whether you are an e-commerce platform or a news website, chances are you’re in some tight competition with similar pages. Therefore, it comes down to a great user experience that will determine who will be ranked higher.

How Do Core Web Vitals Affect User Experience (UX)?

The road to good Core Web Vitals can differ depending on where a site is in the performance journey and how complex the site’s design is. Implementing different solutions would require different development budgets and resources and should be assessed on a case-by-case basis in your teams.

Nevertheless, the stakeholders should see website optimization as part of their long-term business strategy. Additionally, performance must be a key factor for product managers when determining the worth and viability of new product features.

For example, Vodafone ran an A/B test to improve its LCP score (the hardest CWV component to fix as it includes the most elements). By optimizing the LCP score by 31%, the company saw an 8% increase in sales, a 15% improvement in the lead to visit rate, and an 11% improvement in the cart to visit rate.

This demonstrates how a positive user experience translates into better business outcomes for website owners.

How to Measure Core Web Vitals?

There are many tools to audit and monitor your website’s Core Web Vitals. We’ll touch on the most important ones. However, depending on the size of your website, you may not want to limit yourself to just these tools.

1) PageSpeed Insights (PSI)

PSI is a tool that measures your site’s performance across mobile and desktop and shows which areas need improvement. Overall, PSI is a great tool for assessing your site’s performance at the page level.

The data in the report is pulled from two sources–field and lab.

Field data is taken from the Chrome User Experience Report (CrUX) dataset and essentially shows what is the real users’ experience with your website.

Lab data is collected in a controlled environment from Lighthouse and measures how hypothetical users may experience your website. This data can be useful for debugging.

Even if your website passes the CWV, it’s important to check the lab data tab that can unfold more complex performance issues. Keep in mind that you shouldn’t force your website to score a perfect 100. Just try your best to get good results without sacrificing the user experience.

2) Lighthouse

Lighthouse is another Google tool that best suits developers’ needs. It helps find issues in local, staging, and production environments. However, it should be used as a supplement to PSI because it doesn’t include the data from real users.

To generate a Lighthouse report, you must right-click any part of the page (or double-click on Mac) and choose the ‘Inspect’ element. Navigate to the ‘Lighthouse’ tab and click ‘Analyze page load’.

Lighthouse data include Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS). Because it’s impossible to measure First Input Delay (FID) in the lab environment, Lighthouse measures Total Blocking Time (TBT), which is closely correlated with FID.

3) Search Console

There’s a dedicated Core Web Vitals tab in Search Console to help site owners to evaluate groups of pages that require action across the entire site. The data in the report comes from the CrUX report based on real user interaction with your website. However, beware that if your website is new or doesn’t have enough reporting data, some URLs may not be included in the report.

Additionally, you may benefit from third-party RUM (Real User Monitoring) tools like Cloudflare, Akamai, and New Relic. These tools help assess your website performance because they measure your own field data. However, these are usually paid tools.

You can also take a step further and integrate these tools with Google Analytics 4 to correlate Core Web Vitals with your business metrics.

How to Optimize Core Web Vitals?

There are many ways to improve your website’s Core Web Vitals, and the best place to start is to look at suggestions in your reports.

The following sections will briefly discuss best practices when it comes to images, third-party JavaScript, and ads that you should implement regardless of your CWV score. However, this isn’t an exhaustive list, and further inspection is recommended for each website individually.

1. Image Optimization

Images take up the most website resources to download and are considered one of the biggest offenders of page speed and performance. Here are some universal image optimization tips:

● Choosing the right format

Most website owners use two universally accepted raster image formats: PNG and JPEG. In addition to these formats, modern browsers today support the new-gen formats like WebP and AVIF.

Next-gen formats offer better compression but may not be supported by all browsers. So it’s best to use WebP or AVIF images, and JPEGs and PNGs images as a fallback.

● Compressing images

Because of their large size, it’s important to compress images before uploading them to your website. Tools like TinyPNG (browser tool) or ​​Imagemin (command-line interface) reduce image size without sacrificing quality.

● Using CSS Sprites

CSS Sprites combine frequently used images like logos and buttons and generate one CSS code that loads them all at once. It helps to decrease load times because images will be downloaded as one instead of one after another.

● Replacing animated GIFs with videos

By converting large GIFs to videos, you can dramatically save on bandwidth. It’s recommended to convert GIFs into MPEG or WebM videos.

● Properly sizing images

Responsive images generate multiple versions of the same image and can specify which version will be served in HTML or CSS media queries.

You can also store images in image CDNs to always serve images in the correct size and format or use vector-based formats, like SVG.

2. JavaScript (JS) Optimization

Third-party JS scripts are often what give the website its functionality, interactivity, and different useful features. However, these scripts are often the culprit of subpar performance and can even be a security and privacy concern, too. Here are some tips to minimize the negative impact of third-party JS scripts:

1) Deferring third-party JS

When users visit a website, their web browsers need to render the site’s HTML content from top to bottom. Any JS files present on the site need to be fetched and parsed, taking extra website loading time and contributing to a subpar user experience.

We’re pretty sure your website has a ton of third-party JS files at this very moment.  Examples include social sharing buttons (e.g., Facebook, Twitter), chatbot integrations, video embeds (e.g., YouTube), and analytics scripts.

Deferring essentially means ‘postponing’ the download and parsing of JavaScript until the website’s main content has finished loading.

2) Removing render-blocking and unused JS

When website owners load new resources to the page, the browser must stop the page from rendering to load them. A way to combat this additional loading time is to leave only the essential scripts or load them asynchronously (defer).

As a rule of thumb, consider delivering your JS resources inline only if they’re critical to the first viewport (the first area of the page that the user sees without scrolling). The rest of the resources can be downloaded asynchronously.

3) Lazy-loading non-critical JS

Another optimization technique that will help improve your LCP score is lazy-loading non-critical JS. Lazy loading identifies resources as non-critical, so they don’t block the critical rendering path and load them only when needed. It’s a great way to increase the website loading speed.

3. Ads Optimization

Many website publishers rely on ad monetization to support their content creation.

However, you have to be particularly careful as ads are one of the largest offenders when it comes to layout shifts on the website, impacting your Cumulative Layout Shift score. Here are some to avoid layout shifting if you display ads.

● Reserving space for ads above-the-fold

By statically reserving space for the ad slot, you can avoid content shifting caused by ads that don’t have fixed aspect ratios declared for them in the ad tag. As a rule of thumb, you should reserve the largest possible size for the ad slot so smaller ads can also be delivered within it.

● Replacing large ads

You can replace large ads that expand outside of an ad container with, for example, native ads, which are less disruptive to user experience and less likely to cause layout shifts.

● Optimizing ad script loading logic

You can optimize ad script loading logic by prioritizing header bidding and deferring non-critical JS to cause minimum page latency. Usually, if you work with a monetization partner, they’ll be able to do this for you.

Final Words

And that’s a wrap! We hope you now have more clarity on how Core Web Vitals can impact your long-term business strategy, rankings, and user satisfaction. Remember, performance optimization is a continuous journey and not a destination, so don’t expect to see results overnight.

Pick a page with decent traffic and perform an A/B test to see how your website can benefit from optimized performance. Use the tools mentioned above to continuously monitor and audit your pages for any issues.

Finally, focus on high-quality content and relevance, especially if you’re a blogger or a news publisher. Relevance is still a deciding factor in SEO, even with Core Web Vitals being a ranking factor.