Back to Community

Mastering Autoptimize's Lazy Load: Common Issues and How to Fix Them

43 threads Sep 16, 2025 PluginAutoptimize

Content

Autoptimize's image lazy loading is a powerful feature for boosting your site's performance. However, configuring it can sometimes lead to unexpected behavior. Based on community discussions, here are the most common lazy load issues and their solutions.

1. Images Not Loading at All

If images fail to appear when lazy loading is enabled, the cause is often a conflict.

  • Theme or Plugin Conflict: Some themes may not properly call the wp_footer() hook, which is essential for the lazy load script to load. Check with your theme developer. Other plugins that modify images (like Imagify) can also cause output buffer conflicts. A common fix is to add this line to your wp-config.php file: define('AUTOPTIMIZE_INIT_EARLIER', true);
  • Critical CSS: If you use critical CSS, it might contain rules that hide lazy-loaded images. Regenerate or manually remove any CSS that sets display: none; or opacity: 0; on image elements.

2. Controlling Which Images Are Lazy-Loaded

You often don't want every image to be lazy-loaded. Critical, above-the-fold images like logos and heroes should load immediately.

  • Lazy-load from nth image: This global setting tells Autoptimize to skip lazy loading for the first 'n' images on a page. If your logo is the first image and your hero is the second, set this to '3' to lazy-load everything from the third image onward.
  • Exclude by Class or Filename: In the Lazy-load exclusions field, you can add classes or filenames. To exclude a specific image, use its filename (e.g., hero-banner.jpg). To exclude a type of image, use its class. For instance, to exclude WordPress featured images, try wp-post-image. To manually exclude an image output by a theme function, add the skip-lazy class: <?php the_post_thumbnail( 'medium', ['class' => 'skip-lazy'] ); ?>

3. Lazy Load Timing and Sensitivity

The default configuration prioritizes initial page load performance, which can sometimes cause images to load a bit late, resulting in a blank space as you scroll.

  • Adjust the Configuration: Autoptimize uses the lazysizes library, which is highly configurable. You can use a PHP filter to make images load sooner. Adding this code to your theme's functions.php file changes the 'loadmode' and 'expand' parameters for a smoother experience:
    add_filter( 'autoptimize_filter_imgopt_lazyload_jsconfig', function() {
        return 'lazySizesConfig.loadMode = 1; lazySizesConfig.expand = 400;';
    });
    
    You can experiment with the expand value (e.g., 400 or 600) to load images when they are several hundred pixels away from the viewport.

4. Conflicts with Other Plugins and Features

Lazy loading is a common feature, so conflicts can occur.

  • WordPress Native Lazy Load: When Autoptimize's lazy load is active, it automatically disables WordPress's native lazy load to prevent conflicts. You cannot use both simultaneously.
  • Gallery and Slider Plugins: Plugins that create galleries, sliders, or justified grids often need images to be loaded immediately to calculate layouts properly. Lazy loading can break these features. The best solution is to exclude these pages from lazy loading entirely using a code snippet that checks the page ID or if a specific shortcode is present.
  • WebP Conversion Plugins: Plugins that convert images to WebP and use the <picture> tag method can conflict. The define('AUTOPTIMIZE_INIT_EARLIER', true); fix often resolves this.

5. Lazy Load on Specific Devices or Pages

The plugin's settings are global. Implementing device-specific (e.g., mobile-only) or page-specific lazy loading is complex because it requires your page cache to serve different HTML to different devices. This is generally not recommended without advanced caching configuration.

By understanding these common scenarios, you can effectively troubleshoot and tailor Autoptimize's lazy loading to work perfectly with your site's unique setup.

Related Support Threads Support