Core Web Vitals: LCP, FCP, CLS, TBT explained

What are Core Web Vitals?

Core Web Vitals are a set of metrics defined by Google to measure real user experience on a web page. They evaluate three fundamental dimensions: loading speed (LCP), visual stability (CLS), and interactivity responsiveness (INP, which replaced FID in March 2024). These metrics have become official ranking factors in Google's algorithm.

Beyond the three official Core Web Vitals, other complementary metrics are essential for a complete analysis: First Contentful Paint (FCP), Total Blocking Time (TBT), Speed Index, and Time to Interactive (TTI). TeckBlaze measures all these metrics via Lighthouse for every page of your site and compares them against Google's recommended thresholds.

Core Web Vitals are measured from real user data (field) collected by the Chrome User Experience Report (CrUX) and from lab data via Lighthouse. Both measurement types are important: field data reflects the real experience of your visitors, while lab data allows diagnosing problems in a controlled environment.

LCP — Largest Contentful Paint

LCP measures the time needed to render the largest visible element in the viewport. This element is typically a hero image, video, or large text block. LCP is the most important metric for the user's perception of speed: it's the moment when the page "appears" loaded.

Google's official thresholds are: Good if under 2.5 seconds, Needs Improvement between 2.5 and 4 seconds, and Poor if over 4 seconds. For high-performing sites, aiming for an LCP under 1.5 seconds offers a significant competitive advantage.

The main causes of poor LCP are: slow server response time (high TTFB), render-blocking CSS and JavaScript resources, slow image loading (missing modern WebP/AVIF format, unsized images, no preload), and excessive client-side rendering (heavy React hydration). To improve your LCP, start by optimizing TTFB, preload your LCP image, use modern image formats, and minimize critical CSS.

FCP — First Contentful Paint

FCP measures the time between navigation start and the first content rendered on screen (text, image, SVG, or non-white canvas). It's the first visual signal the user receives indicating that the page is loading. A fast FCP reassures users and reduces abandonment rates.

Recommended thresholds are: Good if under 1.8 seconds, Needs Improvement between 1.8 and 3 seconds, and Poor if over 3 seconds. FCP is often correlated with TTFB: a slow server automatically delays FCP.

To optimize FCP: reduce TTFB with a CDN and proper caching, eliminate render-blocking resources (synchronous CSS and JS), inline critical CSS in the HTML, use font-display: swap for web fonts, and enable Brotli/Gzip compression. TeckBlaze automatically identifies blocking resources in its Lighthouse report.

CLS — Cumulative Layout Shift

CLS measures the visual stability of the page by quantifying unexpected layout shifts during loading. A high CLS means elements move on the page without user initiation — for example, a button moving when an image loads above it, causing an accidental click.

Thresholds are: Good if under 0.1, Needs Improvement between 0.1 and 0.25, and Poor if over 0.25. CLS is a unitless metric calculated by multiplying the impact fraction by the distance fraction.

Common causes of poor CLS are: images and videos without specified dimensions (width/height), dynamic ads and iframes that insert into content, web fonts causing FOIT/FOUT (Flash of Invisible/Unstyled Text), and content dynamically injected above the viewport. To fix: always add width and height attributes on images, reserve space for ads with fixed-size containers, use font-display: optional or swap, and avoid inserting content above the fold.

TBT — Total Blocking Time

TBT measures the total time the browser's main thread is blocked by long tasks (over 50 milliseconds) between FCP and Time to Interactive. During this time, the browser cannot respond to user interactions like clicks or keystrokes. TBT is a lab proxy for INP (Interaction to Next Paint).

Thresholds are: Good if under 200 milliseconds, Needs Improvement between 200 and 600 milliseconds, and Poor if over 600 milliseconds. A high TBT indicates your page executes too much JavaScript during loading.

To reduce TBT: break long JavaScript tasks into smaller ones (code splitting), defer non-critical scripts with defer or async, remove unused JavaScript (tree shaking), avoid polyfills for modern browsers, and use Web Workers for heavy computations. TeckBlaze identifies the specific scripts contributing most to TBT in the detailed report.

Threshold summary table

Measurement tools

Several tools can measure Core Web Vitals. TeckBlaze integrates Lighthouse to automatically measure all metrics on every page of your site during the full audit. Google PageSpeed Insights combines lab data (Lighthouse) and field data (CrUX) for a complete view.

Google Search Console offers a Core Web Vitals report based on real CrUX data from your Chrome users. Chrome DevTools allows real-time metric measurement during development. The Web Vitals Chrome extension displays CWV in real time on every visited page.

For large-scale field data, the Chrome User Experience Report (CrUX) provides aggregated data by origin and URL. WebPageTest offers advanced testing with different network conditions and geographic locations. GTmetrix combines Lighthouse data with its own performance analysis.

Impact on Google rankings

Since June 2021, Core Web Vitals are official ranking factors in Google's algorithm, integrated into the Page Experience signal. This signal combines CWV with other UX factors: HTTPS, absence of intrusive interstitials, and mobile compatibility.

The ranking impact is real but moderate: CWV will never replace content relevance as the primary factor. However, with equal relevance between two results, the page with better CWV will be favored. It acts as a tiebreaker that can make a difference for competitive keywords.

Beyond rankings, good web performance has a direct, measurable impact on conversions, bounce rate, and engagement. Optimizing your Core Web Vitals is an investment that simultaneously improves your SEO and user experience.

FAQ