Browser Native Lazy Load

By enabling this option, you will turn off Optimole's in-built lazy loading feature, along with its customizations. The fundamental difference lies in control and customization. Native lazy loading offers a basic, lightweight solution directly supported by web browsers, while Optimole's lazy loading provides more advanced features for users who require fine-tuning and specific optimizations. The choice between them depends on the level of control and customization needed for a particular website's requirements.

🔌 Enable the Feature

To enable this feature, navigate to WP  Dashboard > Optimole.

1

Open the Settings tab.

2

Expand the Advanced accordion and open the Lazyload panel.

3

Use the toggle to  enable Browser Native Lazy Load.

🚀 User Site and Image Impact

With native lazyload in action, your website experiences a transformation. Images are loaded on-demand as users scroll, reducing initial loading times significantly. This results in a smoother user experience, especially on image-heavy websites. However, since images won't be auto-scaled, it's essential to optimize images appropriately before uploading them to maintain a seamless visual presentation.

To check if native lazyload has been applied to your images, use the Inspect tool and look for the img loading="lazy" parameter and data-opt-lazy-loaded="false" (this means that Optimole's lazy loading is turned off).

🔄 Benefits and Trade-offs

Benefits

• Being a browser-native feature, it's optimized for performance, ensuring efficient resource utilization without additional overhead.
• Implemented directly in HTML using the loading="lazy" attribute, making it lightweight, straightforward, and easy to implement without external dependencies.

Trade-offs

• Lack of customizations - unlike the native lazyload, Optimole provides extensive customization options, allowing users to exclude specific images, fine-tune loading behaviors, and integrate with other services.
• No optimizations - along with the integrated lazy loading, Optimole also provides image optimization service, ensuring the best balance between image quality and file size, further enhancing website performance.
• CDN - using Optimole's lazy loading, you have access to Optimole's CDN, delivering lazy-loaded images from geographically distributed servers.
  

🧩 Use Cases

The feature can be very advantageous for multiple use cases, such as:

• If your website simply needs basic lazy loading for images without any fancy adjustments, native lazy loading is perfect. It's a simple and effective solution for straightforward lazy loading needs without the need for complex customizations.

• If you want your website to be efficient and use fewer external resources, native lazy loading is a good choice. It doesn't rely on extra scripts because it uses the browser's built-in features.

• If you want your website to load quickly and perform well in search engine rankings, you should pay attention to Core Web Vitals, especially Largest Contentful Paint (LCP).

⚙️ Related Settings

Once activated, this feature will impact the following settings:

• Image Scaling - doc
• Lazy Load with Generic Placeholder - doc
• Bypass Lazy Load for First Images - doc
• Exclusions from Optimizing or Lazy Loading - doc

🗂Useful Resources

You may find useful these guides:

• Browser-level image lazy loading for the web

🎥 Video - Lazy-load Explained: How to Optimize Your Webpages for Maximum Speed

Still looking for an answer? Contact us!