---
title: "The Vitality of Core Web Vitals"
description: "Core Web Vitals were introduced by Google in 2020 as unified guidance for web UX, and their loading, interactivity, and visual stability metrics became one factor in ranking systems after rollout from mid-June through the end of August 2021. The article explains LCP, FID, and CLS, including how LCP identifies the largest visible element, FID measures delay before the browser responds to a first interaction, and CLS sums unexpected layout shifts. It gives good and poor thresholds of 2.5 seconds and 4 seconds for LCP, 100 milliseconds and 300 milliseconds for FID, and 0.1 and 0.25 for CLS, with intermediate scores needing improvement. Recommended improvements include updating dependencies and tree-shaking unused library code, preloading critical assets, improving server response time, lazy-loading below-the-fold content, compressing images, and reserving image space to prevent shifts."
---

# The Vitality of Core Web Vitals

[Shopify](https://yomu.fyi/company/shopify) · 2023-10-18 · Nov 4, 2021

**Type:** Tutorial

## Summary

Core Web Vitals were introduced by Google in 2020 as unified guidance for web UX, and their loading, interactivity, and visual stability metrics became one factor in ranking systems after rollout from mid-June through the end of August 2021. The article explains LCP, FID, and CLS, including how LCP identifies the largest visible element, FID measures delay before the browser responds to a first interaction, and CLS sums unexpected layout shifts. It gives good and poor thresholds of 2.5 seconds and 4 seconds for LCP, 100 milliseconds and 300 milliseconds for FID, and 0.1 and 0.25 for CLS, with intermediate scores needing improvement. Recommended improvements include updating dependencies and tree-shaking unused library code, preloading critical assets, improving server response time, lazy-loading below-the-fold content, compressing images, and reserving image space to prevent shifts.

## Context

Google incorporated Core Web Vitals into its Search ranking systems as one factor during a rollout that began in mid-June 2021 and finished at the end of August. The article notes that ranking also depends on query meaning, page relevance, source quality, context, and settings, while only four percent of websites in an April 2021 study had good scores across all three metrics.

## Approach / What changed

The article defines the current Core Web Vitals metrics—Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift—explains their measurement behavior and thresholds, and presents improvement strategies. These include updating libraries, using tree-shaking, preloading critical assets, reviewing server response time, lazy-loading suitable content, compressing images, and specifying image dimensions or aspect-ratio boxes.

## Takeaways

- LCP tracks how quickly the largest element in the visible page area renders; a good score is 2.5 seconds or less, while a poor score is above 4 seconds.
- FID measures the delay between a user's first interaction and the browser becoming ready to respond; the good threshold is 100 milliseconds or less, and the poor threshold is above 300 milliseconds.
- Specifying image dimensions or aspect-ratio boxes lets the browser reserve space while images load, helping prevent unexpected layout shifts and improve CLS.

**Tags:** [Caching](https://yomu.fyi/topic/caching), [Monitoring](https://yomu.fyi/topic/monitoring), [Performance](https://yomu.fyi/topic/performance), [Refactoring](https://yomu.fyi/topic/refactoring)

- Source: [Shopify](https://shopify.engineering/core-web-vitals)
- Source URL: https://shopify.engineering/core-web-vitals
- Ingested by Yomu: 2026-08-30T15:28:40.195Z

[Read original post](https://shopify.engineering/core-web-vitals)