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

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

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

Benefits

• 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.

Trade-offs

• 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

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

• 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

🗂Useful Resources

You may find useful these guides:

• What Is Lazy Loading?
• How to Add Lazy Loading Animations For Images?

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

Still looking for an answer? Contact us!