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
|| User Site and Image Impact
| Related Settings
|| Use Cases
| Benefits and Trade-offs
|| Useful Resources
| 🎥 Video - Lazy-load Explained: How to Optimize Your Webpages for Maximum Speed
🔌 Enable the Feature
To enable this feature, navigate to WP Dashboard > Optimole.
Open the Settings tab.
Expand the Advanced accordion and open the Lazyload panel.
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
- 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.
- 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
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
You may find useful these guides:
🎥 Video - Lazy-load Explained: How to Optimize Your Webpages for Maximum Speed
Still looking for an answer? Contact us!