BugWP logo BugWP
Back to Community
Home / Community / Plugin → Autoptimize

Understanding and Troubleshooting Autoptimize Lazy Loading Issues

19 threads Sep 16, 2025 Plugin → Autoptimize

Content

Lazy loading images is a powerful optimization technique that can significantly improve your site's loading times. The Autoptimize plugin provides a robust implementation of this feature. However, users sometimes encounter issues where images don't lazy load as expected, or certain types of images aren't compatible. This guide will help you understand the most common lazy loading challenges and how to resolve them.

Common Lazy Loading Scenarios and Solutions

1. Background Images Not Lazy Loading

Problem: A frequent issue occurs with background images, particularly those set in CSS rather than inline HTML. Users report that div elements with background images continue to load immediately, affecting performance scores.

Why it happens: Autoptimize's lazy loading functionality primarily targets <img> tags. It cannot lazy load background images that are defined in external CSS files. The plugin can only handle background images when they are set directly in the style attribute of an HTML element (e.g., <div style="background-image:url('image.jpg');">).

Solution: If your background images are defined in CSS, consider these approaches:

  • Modify your theme or page builder to use inline styles for critical background images.
  • Use a dedicated lazy loading solution specifically designed for CSS background images.
  • For important above-the-fold images (like hero images), avoid lazy loading them entirely to prevent negatively impacting Largest Contentful Paint (LCP) metrics.

2. Excluding Images from Lazy Loading

Problem: Users need to prevent certain images from being lazy loaded, such as featured images or important content that should load immediately.

Solution: Autoptimize allows you to exclude images by class name:

  • Navigate to Autoptimize settings → Images
  • In the "Lazy-load exclusions" field, enter class names without the preceding dot (e.g., use skip-lazy instead of .skip-lazy)
  • Add the class directly to your <img> tags (e.g., <img class="skip-lazy" src="image.jpg">)

Important: Class-based exclusions only work for attributes within <img> tags. They cannot exclude background images set on div elements.

3. Conflicts with Other Lazy Loading Systems

Problem: Some users experience issues where images have both loading="lazy" (from WordPress core) and Autoptimize's lazyload class, potentially causing conflicts.

Why it happens: WordPress includes native lazy loading functionality. When both systems are active simultaneously, they can interfere with each other.

Solution: Disable WordPress core lazy loading by adding this code to your theme's functions.php file:

add_filter('wp_lazy_loading_enabled', '__return_false');

Also check if other plugins (like Elementor) have their own lazy loading settings that might need adjustment.

4. Images Not Loading on Specific Devices

Problem: Some users report images not displaying on iPhones or iPads when lazy loading is enabled, while working fine on other devices.

Solution: This typically indicates a conflict with your theme or other plugins rather than a general Autoptimize issue. Test by:

  • Checking if the problem occurs on a default WordPress theme
  • Disabling other plugins temporarily to identify conflicts
  • Testing on different devices and browsers to isolate the issue

5. Google PageSpeed Insights Still Recommends Deferring Images

Problem: Even with lazy loading enabled, Google PageSpeed Insights might still suggest "deferring offscreen images."

Why it happens: This can occur for several reasons:

  • Google's tool may not recognize the lazy loading implementation
  • Some image formats (like <picture> tags) might not be properly handled
  • Background images that cannot be lazy loaded are still being flagged

Solution: Focus on actual user experience rather than just PageSpeed scores. If your images are loading as expected when users scroll, the lazy loading is working correctly.

When to Seek Additional Help

If you've tried these solutions and still experience issues, consider:

  • Creating a staging site to test plugin conflicts safely
  • Checking your browser's developer console for JavaScript errors
  • Reviewing your server error logs for any related issues
  • Testing with only Autoptimize active to isolate the problem

Remember that lazy loading is just one optimization technique. While valuable, it's important to balance it with other performance considerations like proper image compression, efficient caching, and critical CSS optimization.

Related Support Threads Support