BugWP logo BugWP
Back to Community
Home / Community / Plugin → Litespeed cache

Troubleshooting LiteSpeed Cache Lazy Load Issues: Common Problems and Solutions

31 threads Sep 16, 2025 Plugin → Litespeed cache

Content

LiteSpeed Cache's lazy loading feature is a powerful tool for improving website performance by deferring the loading of off-screen images and iframes. However, users often encounter issues where lazy loading doesn't behave as expected. Based on community reports and solutions, here are the most common lazy load problems and how to resolve them.

1. Lazy Load Not Working or Applying Incorrectly

Problem: Lazy load doesn't activate, or certain elements don't lazy load when they should.

Why it happens: This can occur due to conflicts with other lazy load implementations (from your theme or other plugins), or because LiteSpeed Cache automatically disables lazy loading for logged-in administrators.

Solution:

  • Check for conflicts: Disable lazy loading in your theme (e.g., Woodmart) or other plugins, leaving only LiteSpeed Cache's implementation active.
  • Test as a visitor: LiteSpeed Cache disables optimization features for logged-in admins. Test your site in an incognito/private browser window to see lazy loading work correctly.
  • Verify settings: Ensure "Lazy Load Images" and/or "Lazy Load Iframes" are actually enabled in LiteSpeed Cache > Page Optimization > Media Settings.

2. Excluded Images or Iframes Are Still Lazy Loaded

Problem: You've added exclusions (via classes, URIs, or the Viewport Images setting), but elements are still being lazy loaded.

Why it happens: The VPI (Viewport Images) list may need time to generate. Exclusions might not be correctly formatted, or there could be a conflict with how your page builder outputs code.

Solution:

  • Wait for VPI: The VPI service, which automatically handles above-the-fold images, takes time to generate its list of images to exclude from lazy loading.
  • Check exclusion syntax: Ensure you are using the correct format in the "Lazy Load Image Excludes" or "Lazy Load Iframe Excludes" fields. You can often use partial URLs or class names.
  • Use the metabox: For individual pages/posts, use the "LiteSpeed Cache" metabox in the WordPress editor to add specific image exclusions via the "Viewport Images" setting.
  • Consider a filter hook: For advanced users, the litespeed_media_lazy_img_excludes filter hook can be used for more dynamic control over exclusions.

3. Layout or Sizing Issues with Lazy Loaded Elements

Problem: YouTube embeds or other iframes don't maintain their correct aspect ratio (e.g., 16:9) when lazy loaded. Images might also appear resized.

Why it happens: LiteSpeed Cache replaces the original element with a placeholder. If this placeholder doesn't have the correct dimensions, it can cause a layout shift when the real element loads.

Solution:

  • Disable CSS options: Try disabling "CSS Minify" and "CSS Combine" in Page Optimization > CSS Settings. Purge all caches after making changes.
  • Check responsive placeholder: Ensure the "Responsive Placeholder" setting is enabled to help maintain aspect ratios.
  • Exclude problematic elements: If the issue persists, consider excluding the specific iframe or image from lazy loading entirely using the methods mentioned above.

4. Sliders or Dynamic Content Not Loading Immediately

Problem: Content in sliders (like Revolution Slider) or tabs only loads after a user scrolls or interacts with the page.

Why it happens: Lazy loading assumes these elements are off-screen and defers their loading, which breaks sliders and tabbed content that need to load immediately.

Solution:

  • Exclude JavaScript files: Add the slider's JavaScript to the exclusion lists. Go to Page Optimization > Tuning > JS Exclude / JS Defer Exclude and add a unique identifier for the script (e.g., rev for Revolution Slider).
  • Exclude by class: If the issue is with images inside a slider, try adding the slider's container class to the "Lazy Load Image Excludes" field.

General Troubleshooting Steps

If you encounter any lazy load issue, always follow these steps first:

  1. Generate a Report Number: This is crucial for debugging. Go to LiteSpeed Cache > Toolbox > Report, click "Send to LiteSpeed", and provide the generated code when seeking help.
  2. Purge All Caches: After changing any setting, always purge all caches to ensure your changes take effect.
  3. Test with Defaults: Temporarily disable all other CSS/JS options in Page Optimization to see if a conflict is causing the problem.

Lazy loading is a complex feature that interacts with your theme, other plugins, and specific page content. By methodically testing and using these common solutions, you can resolve most issues and improve your site's loading performance.

Related Support Threads Support