If your Core Web Vitals report flags Largest Contentful Paint, you are looking at the most common performance failure on the web — and one of the most fixable. To improve Largest Contentful Paint, you need to find your LCP element, understand which of the four LCP sub-phases is slow, and attack it directly. This guide gives you 12 actionable tips organized by cause, so you stop guessing and start cutting seconds off your load time.
First: Identify Your LCP Element and Its Bottleneck
Before changing anything, find out what your LCP element actually is. Run PageSpeed Insights and check the diagnostics — it names the element (usually a hero image, background image, or large text block) and breaks LCP into four sub-phases: Time to First Byte (server), resource load delay, resource load time, and element render delay. Each phase points to different fixes, and optimizing the wrong phase wastes your effort.
A useful rule: if TTFB is more than 40% of your LCP time, fix the server first. If the LCP element is an image that loads late, fix discovery and delivery. Work through the tips below in the order that matches your bottleneck.
Tips 1-3: Fix the Server Response
1. Cut TTFB with better hosting and caching
Every millisecond of server delay is added directly to LCP. Move to hosting with modern PHP (8.2+), enable server-level page caching, and add Redis object caching. Well-configured caching alone can take TTFB from 1200ms to under 200ms.
2. Use a CDN with edge caching
Serve your HTML from edge locations near visitors with full-page CDN caching (such as Cloudflare APO). This is especially powerful for geographically distributed audiences — a visitor in another continent no longer waits for a round trip to your origin server.
3. Enable early hints or server push alternatives
HTTP/2 Server Push is deprecated, but 103 Early Hints (supported by Cloudflare and others) let the server tell the browser about critical resources while the HTML is still being generated. This overlaps server time with resource discovery and can shave hundreds of milliseconds off LCP.
Tips 4-7: Optimize the LCP Image
4. Preload your LCP image
Add a preload hint for the hero image in your head: the browser then discovers it immediately instead of waiting for CSS or JavaScript to reveal it. This is the single highest-impact image fix when the LCP element is discovered late. Only preload one image — preloading several dilutes the benefit.
5. Serve modern formats at the right size
Convert the hero to WebP or AVIF, compress aggressively (quality 75-85), and serve it at exactly its display dimensions. A 300KB JPEG hero replaced by an 80KB AVIF at the right size can cut a full second off LCP on mobile.
6. Never lazy-load the LCP image
This is the most common LCP mistake on WordPress sites. Lazy loading defers the image until scroll, which directly delays LCP. Exclude your hero image from lazy loading in your optimization plugin and verify with a waterfall chart that it starts downloading immediately.
7. Use fetchpriority=”high”
The fetchpriority attribute tells the browser this image matters most, so it gets bandwidth priority over below-the-fold assets. Combine it with preload for maximum effect on the critical image.
Tips 8-10: Remove Render Blocking
8. Inline critical CSS
If stylesheets block rendering, the LCP element cannot paint until CSS downloads and parses. Inline the critical above-the-fold CSS and defer the rest — most premium optimization plugins generate this automatically. Verify the improvement in the “reduce render-blocking resources” audit.
9. Defer non-critical JavaScript
JavaScript in the head delays everything, including LCP rendering. Defer or delay non-essential scripts so the browser can paint content first. Be careful with scripts the LCP element depends on — test visually after each change.
10. Optimize web fonts
When the LCP element is text, slow fonts delay it. Use font-display: swap, preload your primary font files, and subset fonts to only the characters you need. Consider system font stacks for body text — they render instantly with zero downloads.
Tips 11-12: Advanced Wins
11. Fix client-side rendered LCP elements
If your LCP element is injected by JavaScript (common with page builders and sliders), the browser must download, parse, and execute JS before discovering it. Replace JS-rendered heroes with server-rendered HTML where possible, or at minimum preload the underlying image so discovery does not wait for script execution.
12. Reduce DOM size and main-thread work
Massive DOMs (thousands of nodes from page builders) slow down rendering of everything including LCP. Simplify layouts, remove hidden elements, and break long pages into sections. Less DOM means faster style calculation, layout, and paint.
FAQ
What is a good LCP score in 2026?
Under 2.5 seconds is good, 2.5-4 seconds needs improvement, over 4 seconds is poor. These thresholds apply to the 75th percentile of real users in field data.
Why is my LCP fine on desktop but poor on mobile?
Mobile devices have slower CPUs and networks, so the same page takes longer. Mobile is also what Google uses for ranking — always optimize for the mobile result first.
Can a background image be the LCP element?
Yes, and CSS background images are discovered late, which hurts LCP. Convert critical background heroes to regular img tags with preload, or preload the background image explicitly.
How quickly will LCP improvements show in Search Console?
Lab tests improve immediately, but the Core Web Vitals report uses 28-day field data, so allow 2-4 weeks for the official status to flip to green.
Conclusion
Improving Largest Contentful Paint is a diagnostic exercise: identify the element, find which sub-phase dominates, and apply the matching tips — server fixes for slow TTFB, preload and format fixes for late images, critical CSS for render blocking. Most sites can reach under 2.5 seconds with tips 1-8 alone. If you would rather have specialists diagnose and implement it, Degates SEO services deliver exactly that: measured LCP improvements, verified in field data, without breaking your design.