Optimizing Largest Contentful Paint: Lazy vs. Eager Loading

eb performance optimization has come a long way, particularly in how we handle image loading. One of the key metrics in modern web performance is Largest Contentful Paint (LCP), which measures the time it takes for the largest visible element (often an image or a block of text) to load and render. Optimizing LCP is crucial for delivering a fast and smooth user experience.

The Evolution of Image Loading

In the past, browsers had complete control over how they prioritized and downloaded resources. Developers had little say in whether an image loaded immediately or later. This led to the rise of various lazy loading plugins, which aimed to delay the loading of offscreen images to improve initial page load performance.

However, managing lazy loading manually often required additional JavaScript, which sometimes introduced rendering delays or conflicts with browser heuristics. Fortunately, modern browsers introduced the loading attribute for images, allowing developers to specify loading behavior directly:

<img src="image.jpg" loading="lazy" alt="Example image">


Shopware and Default Lazy Loading

Recognizing the benefits of lazy loading, Shopware has implemented it by default for:

• CMS elements that contain images.
• Media elements in the product listing.

This means that out-of-the-box, most images in Shopware-powered stores are loaded lazily, reducing initial page load times and bandwidth consumption.

The Problem: LCP Elements Should Not Be Lazy-Loaded

While lazy loading improves performance in many cases, it can negatively impact LCP when applied incorrectly. The LCP element—often the hero image or main product image—should not be delayed, as this would slow down the user’s perceived page speed.

To optimize for LCP, images that are likely to be the largest visible content should not use lazy loading. Instead, they should be explicitly set to eager loading to ensure they load as soon as possible:

<img src="hero-image.jpg" loading="eager" alt="Hero Image">


A Simple Solution: Configurable Eager Loading Plugin

To make LCP optimization easier, we’ve developed a simple Shopware plugin that allows you to set an eager loading attribute on cms-element-image. With this plugin, you can configure the eagerness of the LCP image without modifying templates manually, ensuring that the most important image loads as early as possible.

This approach provides developers with precise control over image loading behavior, improving LCP without relying on workarounds.

Combine with Instant Navigation for Even Faster LCP

In addition to setting eager loading, you can further enhance LCP performance by leveraging our Instant Navigation Plugin. This plugin allows you to preload the LCP source of a specific page, giving the browser a heads-up that this media is crucial for rendering the LCP. By preloading the image, the browser can prioritize it even more effectively, ensuring near-instant rendering.

Action Plan: Remove Obsolete Lazy Loading Plugins & Optimize LCP

1. Audit Your Website for Legacy Lazy Loading Plugins

If your Shopware store has old lazy loading plugins installed, they may now be redundant or even harmful. Since Shopware already provides built-in lazy loading, these plugins should be reviewed and removed where unnecessary.

2. Ensure Critical LCP Images Load Eagerly

• Identify the largest visible image on key pages (homepage, product pages, landing pages).
• Use our Eager Loading Plugin to configure cms-element-image loading behavior.
• Explicitly set loading="eager" for these images to prevent lazy loading delays.

3. Use Instant Navigation for Preloading

• Implement our Instant Navigation Plugin to preload the LCP image source on the next page.
• Ensure that the browser knows which image will be crucial before the navigation happens.

4. Test and Monitor Performance

• Use tools like Google PageSpeed Insights or Lighthouse to analyze LCP scores.
• Check the loading behavior of images in Chrome DevTools (Performance tab).
• Ensure eager-loaded images are being downloaded early in the request waterfall.

Conclusion

Optimizing LCP is critical for web performance, and while lazy loading helps reduce unnecessary resource loading, it should not be applied to key images that impact page rendering speed. With Shopware now handling lazy loading by default, we must:

1. Remove outdated lazy loading plugins that are no longer needed.
2. Manually set LCP images to eager loading or use our Eager Loading Plugin for precise control.
3. Combine with Instant Navigation to preload LCP images for even faster rendering.

By implementing these changes, Shopware stores can achieve faster load times, better user experiences, and improved SEO rankings.