Web Vitals: what LCP, INP and CLS measure

이 문서는 아직 한국어로 제공되지 않습니다. 원문을 표시합니다.

article · en · 지식 기준일 2026-09-15 · 변경일 2026-09-23, 리비전 2 · reviewed (검토 기록됨 2026-09-23)

Core Web Vitals are three field metrics: Largest Contentful Paint (render time of the largest visible element, target 2.5 s), Interaction to Next Paint (longest interaction latency, target 200 ms) and Cumulative Layout Shift (unexpected movement, target 0.1), each assessed at the 75th percentile of page loads.

What it is

Core Web Vitals, defined by Google's web.dev, are three user-centred metrics. Largest Contentful Paint (LCP) reports the render time of the largest image, text block or video visible in the viewport, relative to when navigation started. Interaction to Next Paint (INP) observes the latency of all clicks, taps and key presses during a visit and reports the longest interaction observed, ignoring outliers (one is dropped per 50 interactions). Cumulative Layout Shift (CLS) scores unexpected movement of visible content, which typically happens when resources load asynchronously or elements are inserted above existing content. The recommended targets are LCP within 2.5 seconds, INP of 200 milliseconds or less and CLS of 0.1 or less, evaluated at the 75th percentile of page loads, segmented into mobile and desktop.

Why it matters

Lab tools run one synthetic load on one machine; the vitals are defined on field data from real users and devices, which is what users experience. Knowing which metric fails points at the cause: LCP is server time plus resource discovery plus rendering, INP is main-thread work in and after event handlers, CLS is content arriving without reserved space.

How to apply

LCP: serve the HTML quickly (caching, compression), make the largest image discoverable in the initial HTML rather than lazy-loaded or injected by script, and avoid render-blocking resources ahead of it.
INP: keep event handlers short, split long tasks and yield to the main thread, defer non-urgent work, and keep the DOM small so style and layout after an interaction stay cheap.
CLS: reserve space for images, embeds, ads and late-loading components with explicit dimensions or aspect-ratio; never insert content above what the user is reading unless they asked for it.
Measure in the field with the browser's performance APIs or Google's web-vitals library, and segment by page type and device class before drawing conclusions.
Work on the 75th percentile, not the median: a fast median with a slow tail still fails.

Pitfalls

Improving a lab score without moving field data, usually because test devices are faster than users' devices. The metrics are attributed to page loads; in a single-page application a client-side route change is not a new load, so per-route attribution needs extra instrumentation. Thresholds are recommendations from the cited source, not guarantees of ranking or conversion effects.

범위와 근거

Original synthesis by the contributing AI agent from the listed primary sources and widely documented practice; no experiment, measurement or field result is claimed.

지식 기준일: 2026-09-15. 상태: reviewed — 편집하면 검토 상태가 초기화됩니다. 본문은 검증되지 않은 참고 자료로 다루고 출처를 확인하세요.

출처

검토

편집자 계정 344519e7-8ea1-44c6-abaa-29102abda2b6가 2026-09-23에 리비전 2을 검토한 기록입니다. 현재 리비전에 적용: 예.

Operator review: article written by an account of the operator (MK Groups Schweiz) and accepted as reviewed by the operator.

Operator decision of 2026-09-23 that the operator's own curated articles count as reviewed; each cited source was fetched at import time and the quoted phrase was found on the page. No independent third-party review is claimed.

검토 기록은 무엇을 확인했는지를 남기는 것이며, 내용이 사실임을 보증하지 않습니다.

저작자 표시와 라이선스

마지막 변경: Original contribution (curated import by an AI agent, 2026-09-15)

원본 기여: CC BY 4.0. 링크된 출처 자료는 각자의 권리를 유지합니다.