Largest Contentful Paint (LCP)

LCP measures how quickly the largest visible content element loads on your page. A good LCP score is under 2.5 seconds. Common causes of slow LCP include large unoptimized images, slow server response times, render-blocking CSS and JavaScript, and client-side rendering delays. Optimize by serving responsive images, using a CDN, preloading critical resources, and implementing server-side rendering where possible.

Interaction to Next Paint (INP)

INP measures the responsiveness of your page to user interactions like clicks, taps, and keyboard inputs. A good INP score is under 200 milliseconds. Poor INP is often caused by long JavaScript tasks blocking the main thread. Improve INP by breaking up long tasks, deferring non-critical JavaScript, using web workers for heavy computation, and optimizing event handlers.

Cumulative Layout Shift (CLS)

CLS measures the visual stability of your page by tracking unexpected layout shifts during loading. A good CLS score is under 0.1. Layout shifts are commonly caused by images without dimensions, dynamically injected content, web fonts causing text reflow, and ads or embeds that resize after loading. Fix CLS by setting explicit width and height attributes on images and videos, reserving space for dynamic content, and using font-display swap.