Bypass Lazy Load for First Images
This Optimole feature allows users to exclude a specified number of images from lazy loading on every page. This feature prevents lazy loading from being applied to images located above the limit, ensuring a seamless content display. Users can set the number of images to exclude, with the option to disable this feature by setting the value to 0.
| 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.
Insert the number of images that you want to be excluded.
🚀 User Site and Image Impact
Using this setting helps you prevent potentially important images from not being displayed as the user opens the page. Excluding multiple images from lazy loading, however, might impact the website's loading speed and cause potential delays.
To verify if lazy loading is no longer applied to those images, use Inspect and check if data-opt-lazy-loaded is set to false.
In the example below, you can see that the first featured image is excluded from lazy loading, while the second one is not:
🔄 Benefits and Trade-offs
- Above-the-fold content - excluding critical images (such as banners or headings) ensures that these elements load immediately.
- Immediate visibility - users can see important content without waiting for images to load.
- Delayed Image Loading - images excluded from lazy loading will load conventionally, potentially causing slower overall page loading times.
- User experience inconsistency - the user experience can be inconsistent if some images load lazily while others load traditionally.
🧩 Use Cases
- Critical images like logos, banners, or call-to-action graphics placed above-the-fold.
- Images used in interactive elements, buttons, or sliders that users need to see immediately for a seamless interaction.
- Images accompanying urgent announcements, alerts, or notifications.
⚙️ Related Settings
- Exclusions - 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!