Optimizing the Largest Contentful Paint in 2026

Understanding the Largest Contentful Paint

The Largest Contentful Paint (LCP) is a key metric in Google's Core Web Vitals. It measures the time it takes for a user to see the largest visible element on the screen (known as the LCP candidate). Google recommends that the LCP be under 2.5 seconds to deliver an optimal user experience. Optimizing the LCP is, however, the last link in the page rendering chain. Before the LCP candidate element loads, the server must have responded, and the critical path elements must have been loaded and executed by the browser.

The basics of image optimization

Optimizing images remains a simple yet powerful lever. In 2026, many sites still load oversized or uncompressed images. It's a basic, almost elementary problem. Use modern formats like AVIF or WebP, compress your images, and adapt the size with HTML attributes like srcset to serve the most appropriate version for each screen.

<img src="image.jpg" srcset="image-480w.jpg 480w, image-800w.jpg 800w" sizes="(max-width: 600px) 480px, 800px">

Scripts and styles: async, defer, and beyond

The async and defer attributes for scripts are essential. They allow non-critical scripts to be deferred, preventing them from blocking page rendering. For CSS, focus on tree-shaking: extract and load only the critical CSS needed for the initial render.

<link rel="preload" href="styles.css" as="style">
<script src="script.js" defer></script>

💡 Tree-shaking reduces the size of JS and CSS files by eliminating unused code, which is essential for fast rendering.

Reducing the weight of your scripts is one thing, but optimizing third-party scripts is unfortunately not within your control. Choose your vendors based on the quality of their scripts. It's not uncommon to encounter performance issues after installing a third-party script due to a code problem or data collection overhead. In 2026, during an audit carried out for a luxury client, I noticed that Heap, acquired by Contentsquare, was blocking page transitions for half a second while retrieving customer data.

⚠️ Even if a third party tells you otherwise, nothing justifies loading their resources without an async attribute. Their sole goal is to be loaded first, in order to perform operations on the page as quickly as possible. If their infrastructure slows down or goes down, your site could remain blank for several seconds. It is also not recommended to load a third-party script with defer. In the event of an outage, the DOMContentLoaded event would be delayed and could break certain features of your site.

Advanced and custom optimizations

In 2026, advanced optimizations are becoming the norm for those who truly want to perform. Use fetchpriority to prioritize the loading of critical resources, and preload to tell the browser which critical resources are needed early in the page load.

<link rel="preload" href="large-image.avif" as="image" fetchpriority="high">

These techniques require fine-tuned expertise to be implemented effectively. A web performance audit carried out by an expert can reveal bottlenecks specific to your site.

TTFB: the foundation of all optimization

The Time to First Byte (TTFB) is often overlooked, but as long as the server doesn't respond, the browser is blocked. Optimizing TTFB starts with efficient server-side code and well-thought-out CDN configurations. Optimizing server response time therefore becomes the priority, in parallel with optimizing what happens on the client side.

• Well-configured CDN: Deliver content from servers close to the end user.
• Performant server code: Reduce request processing time.
• Effective caching: Use aggressive caching for static resources.

Varied levers for an optimized LCP

Improving the LCP requires diverse actions, ranging from image optimizations to fine-grained server-side adjustments. Every site is different, and the levers to activate vary depending on the context. A thorough analysis and a tailored action plan remain the best approaches to guarantee a high-performing LCP in 2026.