Lazy Load with Generic Placeholder
By default, for lazy loading, we use a low-quality representation of the image being lazy-loaded.
If this behavior is not desired, you can toggle this option ON. This will replace the low-quality image with a generic placeholder.
| 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 Lazy Load with Generic Placeholder.
🚀 User Site and Image Impact
The default lazy load placeholder is transparent, which means that until the images are loaded, you cannot see exactly where the image appears. Using the color options for the placeholder, you can adjust the color and obtain a visible placeholder.
🔄 Benefits and Trade-offs
- Enhanced appearance of your website - instead of empty places on the page, users will see the colored placeholder.
- Hint on where images will appear - even if you're not using the colored placeholder, the default one will emphasize the presence of images.
- Inaccurate size - if this option is enabled could cause wrong size calculation for the final optimized images with some themes.
🧩 Use Cases
- Websites with Many Images - websites that feature numerous images, such as e-commerce platforms, galleries, or portfolios, can significantly benefit from lazy loading.
- Long-Scrolling Pages - websites with long-scrolling pages, like articles or social media feeds, can use lazy loading to optimize the loading of images below the initial viewport.
- Multimedia-Rich Websites - websites that include multimedia elements, such as videos, slideshows, or interactive graphics, can use lazy loading to prioritize the loading of visible content while delaying the loading of off-screen multimedia elements until the user scrolls to them.
⚙️ Related Settings
- Scale images & Lazy loading - doc
- Bypass Lazy Load for First Images - doc
- CSS Background Lazy Load - doc
You may find useful these guides:
- Website Speed Optimization: How to Do It in 2023 #Step-by-Step
- Lazy Loading Images: Complete Guide Plus 3 Ways to Implement It
🎥 Video - Lazy-load Explained: How to Optimize Your Webpages for Maximum Speed
Still looking for an answer? Contact us!