Core Web Vitals · Lighthouse

Page Performance Handbook

A practical guide to understanding and optimizing key Lighthouse metrics: LCP, FCP, TBT, CLS and Speed Index — for developers, designers and teams who want fast, stable and enjoyable web experiences.

Largest Contentful Paint (LCP)

LCP measures the moment when the largest visible element on the page is rendered to the user. Most often this is the hero image, a large heading or the main text block. Target: < 2.5 s on mobile devices.

Diagram of an example page with its hero image outlined as the Largest Contentful Paint element, showing an LCP time of 2.1 seconds, common LCP elements such as hero images and large headings, and tips like optimizing images, removing render-blocking resources, and using a CDN. — The LCP element, in practice — select the image to enlarge it

Why LCP matters

Directly affects perceived loading speed.
Key Core Web Vitals metric for UX and SEO.
Often the main reason for a poor first impression of the page.

Common causes of poor LCP

Slow loading hero image.
Render-blocking CSS/JS.
Late discovery of resources (background-image).
Weak server response time (TTFB).
Heavy layout structure.

Optimization techniques

Optimize hero image (WebP/AVIF, responsive srcset, preload).
Critical CSS for above-the-fold content.
Defer/async JS, minify CSS/JS.
Use CDN, caching and compression (Gzip/Brotli).
Resource hints: preload, preconnect.

Flowchart of the above-the-fold loading path: DNS lookup, HTML download, critical CSS, hero image download, then render, ending with LCP recorded as complete. — Select the image to enlarge it

LCP checklist

Hero image optimized and preloaded.
Critical CSS implemented.
Render-blocking JS/CSS minimized.
Server response time under control.
Layout stable and simple.

First Contentful Paint (FCP)

FCP measures the moment when the first piece of content (text, image, SVG) appears on the screen. It marks the beginning of visual feedback for the user.

Timeline of a page load from navigation start through a blank screen to First Contentful Paint at 1.1 seconds, more content appearing at 1.8 seconds, and the hero image visible at 2.8 seconds. — Select the image to enlarge it

Causes of poor FCP

Heavy global CSS.
Too many fonts and font-face declarations.
Render-blocking scripts in <head>.

Optimization techniques

Minify and split CSS.
Use font-display: swap; and preload key fonts.
Defer/async JS, remove unnecessary scripts.

Total Blocking Time (TBT)

TBT measures how long the main thread is blocked between FCP and Time to Interactive. High TBT means the user cannot quickly interact with the page.

Main thread timeline showing two long tasks blocked for over 50 milliseconds each between FCP and Time to Interactive, with a calculation summing them to a Total Blocking Time of 325 milliseconds. — Select the image to enlarge it

Causes of poor TBT

Large JS bundle (framework + app + vendor).
Heavy third-party scripts (analytics, ads, widgets).
Complex app initialization on load.

Optimization techniques

Code splitting and lazy loading modules.
Tree-shaking and removal of dead code.
Move heavy computations to Web Workers.
Delay initialization of non-essential features.

TBT checklist

JS bundle analyzed (bundle analyzer).
Third-party scripts reviewed and limited.
Heavy tasks split into smaller ones.
Interactions responsive within the first few seconds.

Cumulative Layout Shift (CLS)

CLS measures how much the page layout unexpectedly shifts during loading. High CLS frustrates users (clicking the wrong element, content moving).

Before-and-after comparison of a page: after load, an advertisement is inserted above the existing content, pushing the image, text and button downward and causing a layout shift. — Select the image to enlarge it

Causes of poor CLS

Images without defined dimensions.
Dynamic content injected above existing content.
Ads/iframes without reserved space.

Optimization techniques

Always define width/height or aspect-ratio for images.
Reserve space for ads/iframes.
Use transform animations instead of layout changes.

CLS checklist

Dimensions defined for all visual elements.
Dynamic content added below or into reserved space.
No “jumping” layout during loading.

Speed Index

Speed Index describes how quickly content is visually displayed during page load. It looks at progressive rendering, not just a single moment.

Causes of poor Speed Index

Render-blocking resources.
Late loading of key visual elements.
Too much above-the-fold content loading at once.

Optimization techniques

Critical CSS and optimization of above-the-fold content.
Lazy loading for below-the-fold content.
Preload key resources (images, fonts).

How to perform a performance audit

Run Lighthouse in Chrome (mobile profile, throttling).
Analyze Core Web Vitals metrics and “Opportunities”.
Prioritize issues based on user impact.
Document before/after results.

Lighthouse performance report showing a score of 96 with LCP at 1.8 seconds, FCP at 1.3 seconds, TBT at 80 milliseconds and CLS at 0.03, all marked as good. — Select the image to enlarge it

Performance KPIs for teams

Define target values for LCP, TBT, CLS, FCP.
Automate testing (CI/CD, Lighthouse CI).
Track trends over time (graphs, dashboards).
Include performance in the definition of done.