Core Web Vitals on mobile: what to fix first

Largest Contentful Paint

LCP measures when the biggest visible element finishes rendering. On mobile it is nearly always a hero image, a web font or a slow first response. Preload the LCP image, serve it in a modern format at the size it is actually displayed, and never lazy-load it.

• Preload the hero image and set fetchpriority high.
• Serve fonts with a swap fallback so text paints immediately.
• Remove render-blocking scripts from the critical path.
• Cache the HTML response at the edge where possible.

Cumulative Layout Shift

CLS is caused by content that arrives after the first paint and pushes everything down. Reserve space for every element whose size you know in advance — images, embeds, advertising slots — using fixed dimensions rather than min-height, and inject late content below the fold.

Interaction to Next Paint

INP measures how quickly the interface responds to taps. Long JavaScript tasks are the cause: heavy hydration, oversized bundles and synchronous work in event handlers. Split bundles by route, defer third-party scripts until after interaction, and break long tasks into chunks that yield to the main thread.

Third-party scripts

Analytics, chat widgets and advertising libraries are the usual reason a fast site measures slow. Load them after the page is interactive, never in the critical path, and audit periodically — abandoned tags accumulate and each one costs real milliseconds on a mid-range phone.

Frequently asked

Do Core Web Vitals affect ranking directly?

They are a real but small ranking signal. Their larger effect is on conversion: slow mobile pages lose users before content matters.

Why is my lab score good but field data poor?

Lab tests run on one simulated device and connection. Field data aggregates real users on slower phones and networks, which is what search engines use.