How to Improve Largest Contentful Paint (LCP)
What drives LCP, how to find your LCP element, and the highest-impact fixes for getting it under 2.5 seconds on mobile.
7 min read - Updated 2026-06-15
Use this guide as a compact release reference, then validate the same breakpoints in Sizzy with synchronized devices and screenshot evidence.
Find your LCP element first
You can't optimize what you haven't identified. LCP is usually a hero image, a heading, or a large block of text above the fold. Use Lighthouse or the DevTools performance panel to see exactly which element is the LCP candidate on mobile, since it can differ from desktop. Optimizing the wrong element wastes effort.
LCP is often a hero image or large heading
Use DevTools/Lighthouse to identify the exact element
The mobile LCP element may differ from desktop
Confirm before optimizing anything
Attack the four LCP phases
LCP breaks into TTFB, resource load delay, resource load time, and render delay. Improve server response and caching for TTFB, preload the LCP image and avoid lazy-loading it, serve it in a modern format at the right size, and remove render-blocking CSS/JS that delays paint. Most wins come from the LCP resource itself.
Reduce TTFB with caching and a CDN
Preload the LCP image; never lazy-load it
Serve modern formats (WebP/AVIF) at the right size
Eliminate render-blocking CSS and JS
Validate under mobile conditions
LCP targets are hardest to hit on mobile networks, so test there. Throttle the network, load at a real mobile width, and confirm the LCP element paints quickly. Sizzy's throttling and mobile viewports reproduce the constrained conditions where LCP actually fails, so your fixes reflect real-user performance.
Throttle to a mid-range mobile network profile
Measure at real mobile widths
Confirm the LCP element loads in the critical path
Re-measure after each change to verify the gain
Release checklist
The LCP element is identified on mobile, not assumed.
The LCP image is preloaded and not lazy-loaded.
Render-blocking resources are minimized.
LCP is validated under throttled mobile conditions.
Frequently asked questions
What is a good LCP time?
A good Largest Contentful Paint is under 2.5 seconds for most real users. Between 2.5 and 4 seconds needs improvement, and over 4 seconds is poor. LCP marks when the largest above-the-fold element finishes rendering.
Why is my LCP slow even though my site feels fast?
Your fast device and connection mask the problem. LCP is measured on real users' devices, which are often slower phones on mobile networks. Test with throttling at mobile widths to see the LCP your users actually experience.
Should I lazy-load my hero image?
No. The LCP element should never be lazy-loaded, since that delays the very paint LCP measures. Eagerly load and ideally preload the hero image, and lazy-load only below-the-fold media.
Related guides
Benji
Your life OS
The companion app that keeps every area of your world in sync.
Zero to Shipped
Ship products, not side projects
The ultimate Next.js boilerplate for building and launching real products.
DMX
Mindful Twitter/X
The intentional X client for macOS. Reclaim your attention span.
Sotto
Voice-to-text for macOS
Speak naturally. Type instantly. 100% local & private.
Passlock
Password manager with willpower
Lock passwords with time delays, word challenges, or hand the keys to someone you trust.
Glink
Changelogs that slap
Beautiful changelogs and roadmaps for your product.
JoinRepo
GitHub access control
Monetize your GitHub repositories with ease.
Tubely
YouTube Studio for Mac
Manage multiple YouTube channels in one native app.
JustWrite
Distraction-free writing
A minimal writing app that helps you focus on what matters.