📄 5. Speed Optimization: Native Lazy Loading & LCP

Beyond image compression, the way images are loaded is critical for performance. This JaJuMa WebP Optimized Images extension includes a native lazy loading feature that serves as a powerful tool for improving perceived load speed and a key Core Web Vital: the Largest Contentful Paint (LCP).

⚙ 5.1 What is Lazy Loading and Why Does It Matter for LCP?

Lazy loading is a technique that instructs a web browser to defer the loading of certain resources until they are actually needed. For images, this means they are only downloaded from the server when a user scrolls down the page and they are about to enter the viewport.

This has a direct and positive impact on your LCP score. By preventing the browser from downloading all images at once, you free up network bandwidth to prioritize loading the critical, visible content at the top of the page. This significantly improves initial page load times and can reduce the "Resource load delay" for your LCP element.

The extension implements this using the loading="lazy" attribute, a modern, browser-native method that does not require extra JavaScript libraries.

This feature, combined with the next-gen format conversion, is what makes the WebP Optimized Images extension such a powerful tool for improving Core Web Vitals.

⚙ 5.2 Enabling Native Lazy Loading

To activate this feature, navigate to the Native Lazy Loading configuration section:
JaJuMa > WebP Image Optimization > Native Lazy Loading

• Enable Native Lazy Loading:
  • Yes: Adds the loading="lazy" attribute to the <img> tags handled by the extension.
  • No: Disables the feature.

⚙ 5.3 The Blacklist: How to PREVENT Key Images from Lazy Loading

While lazy loading is beneficial for off-screen images, it can be detrimental to performance if applied incorrectly.

⚠️ Warning: You should never lazy load your Largest Contentful Paint (LCP) element.

The LCP element is typically the main hero banner on a homepage or the primary product image on a product page - an image that is "above the fold" and immediately visible. Lazy loading this image would tell the browser to delay loading it, which directly harms your LCP score.

The Native Lazy Loading Blacklist is the tool to prevent this. It allows you to exclude specific images from having the loading="lazy" attribute applied.

• How it works: You can add a comma-separated list of strings or Regular Expressions. If any part of an <img> tag's HTML matches an entry in the blacklist, it will not be lazy-loaded.
• Practical Examples:
  • Exclude a logo by filename:

    logo\.png

  • Exclude all images within the main product gallery:

    product-image-photo

  • Exclude a specific hero banner by its CSS class:

    homepage-hero-banner

  • Exclude multiple items:

    logo\.png,homepage-hero-banner,product-image-photo

By correctly using the blacklist, you ensure that critical above-the-fold content loads as quickly as possible, while still gaining the performance benefits of lazy loading for all other images down the page.

📞 Need Help?

Having trouble with the setup? Check our Troubleshooting, FAQ & Best Practices for common solutions.

Still have questions or need help verifying your system requirements? Our expert team is here to assist. Please don't hesitate to contact our support team for personalized assistance.