Lazy loading behavior

This Optimole feature gives you flexible control over how images are excluded from lazy loading. You can either manually skip a specific number of images at the top of each page, or enable automatic detection to exclude only those that appear above the fold (initial viewport) on both Desktop and Mobile devices. This helps ensure that critical images are visible immediately without delay. You can disable this behavior entirely or fine-tune it based on your performance needs.

🔌 Control 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

Select the desired option of how images should be lazy-loaded

• Skip Lazy Loading for First X Images (default is 2)

  Exclude a fixed number of images (starting from the top of the page) from lazy loading. This ensures they’re loaded immediately, regardless of whether they're in the viewport or not. Ideal for simple setups where content structure is consistent.

• Skip Lazy Loading for Initial Viewport

  Automatically detect and immediately load only the images visible on first screen view (initial viewport) for each device type. This option uses a lightweight client-side script to measure which images are actually above the fold and skips lazy loading for those. Optimized separately for Desktop and Mobile.

• Lazy Load All Images

  Apply lazy loading to all images on the page. This maximizes performance improvements but may delay the appearance of above-the-fold images.

🚀 User Site and Image Impact

Using this setting ensures that key images—especially those visible when the page first loads—are displayed immediately, improving perceived performance and user experience. However, excluding too many images from lazy loading can reduce the performance benefits and slow down overall page load times.

To confirm that lazy loading is skipped for specific images, right-click and inspect the image element in your browser’s DevTools. Look for the attribute data-opt-lazy-loaded —if it is set to false , the image is not being lazy-loaded.

In the example below, the first featured image is excluded from lazy loading, while the second image is still lazy-loaded:

🔄 Benefits and Trade-offs

Benefits

• Optimized above-the-fold loading – Whether you exclude the first few images or use automatic viewport detection, important visuals (e.g., banners, CTAs) will appear instantly without waiting for lazy loading.
• Flexible control – Choose between fixed image skipping or smart detection to match your site layout and performance goals.
• Improved user perception – Key content loads faster, enhancing user experience and reducing bounce rates.

Trade-offs

• Slower full-page load – Excluding too many images from lazy loading may increase initial load time, especially on slower connections.
• Inconsistent rendering across devices – With viewport-based detection, image exclusion depends on what’s visible per device. Some images may lazy load on one device but not another.
• Debug complexity – Since viewport-based exclusion is dynamic and device-specific, it may take more effort to verify what’s excluded and when.

🧩 Use Cases

This feature is ideal for scenarios where visual content needs to be displayed immediately, such as:

• Hero sections and banners placed at the top of the page that should appear as soon as the site loads.
• Call-to-action graphics or interactive UI elements (e.g., sliders, buttons) that are above the fold and must be seen or clicked quickly.
• Important announcements or alerts that are time-sensitive or user-facing.
• Pages with varied layouts across devices, where automatic detection of what’s visible (initial viewport) ensures the right images are loaded first.

⚙️ 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!