Optimole Docs

Appearance

Compatibility with W3 Total Cache ​

This guide explains how to configure Optimole and W3 Total Cache to work together without conflicts. Both plugins optimize website performance, but overlapping features — especially around image optimization, lazy loading, and next-gen formats — can cause broken images, duplicate processing, or slower load times.

Overview of Overlaps ​

Optimole and W3 Total Cache both include features that handle images and lazy loading. When both plugins try to manage the same tasks, they can conflict and degrade your site's performance instead of improving it.

The most common overlaps include:

  • Image optimization — Optimole handles image compression and resizing automatically through its CDN. W3 Total Cache also includes image optimization options that can interfere with this process.
  • Lazy loading — Both Optimole and W3 Total Cache offer lazy loading for images. Running both at the same time can cause images to fail to load or load incorrectly.
  • Next-gen image formats — Optimole automatically serves images in WebP or AVIF based on the visitor's browser. W3 Total Cache can also attempt to convert and serve WebP images, causing duplicate processing.
  • CDN delivery — Optimole delivers optimized images through its own CDN. If W3 Total Cache is also configured to handle image delivery through a separate CDN, the two can conflict.

📝 Note: The recommended approach is to let Optimole handle all image optimization, lazy loading, and next-gen format delivery, while W3 Total Cache focuses on page caching, minification, and other non-image performance features.

Follow these steps to configure both plugins for optimal performance.

Step 1: Disable W3 Total Cache Lazy Loading ​

Since Optimole includes its own lazy loading feature, you should disable lazy loading in W3 Total Cache to avoid conflicts.

  1. In your WordPress dashboard, navigate to Performance > User Experience.
  2. Locate the Lazy Loading section.
  3. Uncheck Process HTML image tags to disable image lazy loading in W3 Total Cache.
  4. Click Save Settings.

⚠️ Important: Running lazy loading from both plugins at the same time can cause images to not load at all, or to load with visual glitches. Always use only one plugin for lazy loading.

Step 2: Disable W3 Total Cache WebP Handling ​

Optimole automatically detects the visitor's browser and serves images in the best format, including WebP and AVIF. You should disable W3 Total Cache's WebP features to prevent duplicate format conversion.

  1. Navigate to Performance > Browser Cache.
  2. Look for settings related to WebP or next-gen image formats, such as Rewrite URL for WebP or similar options in the Media & Other Files section.
  3. Make sure any WebP-related rewrite or conversion settings are disabled.
  4. Click Save Settings.

Step 3: Disable W3 Total Cache Image Optimization ​

If you are using any image optimization feature within W3 Total Cache, disable it so that Optimole handles all image compression.

  1. Navigate to Performance > General Settings.
  2. Review the available modules and ensure that any image optimization features are disabled.
  3. If you are using the W3 Total Cache CDN module for images, make sure it does not conflict with Optimole's CDN delivery. You can either exclude image file types from W3 Total Cache's CDN configuration or disable the CDN module for media files.
  4. Click Save Settings.

Step 4: Verify Optimole Settings ​

Ensure that Optimole's image optimization features are active and handling your images.

  1. Navigate to Optimole > Settings.
  2. Under General, confirm that Enable Optimole Image Handling is turned on.
  3. Open the Advanced accordion and select the Compression panel.
  4. Verify that a compression mode is selected (Speed Optimized, Quality Optimized, or Custom). This ensures Optimole is actively optimizing your images.

If you are using the Custom compression mode, confirm that Automatic Best Image Format Selection is enabled so Optimole serves WebP or AVIF when supported by the visitor's browser.

Step 5: Configure CSS & JS Handling ​

W3 Total Cache includes CSS and JS minification and combination features that work well for most sites. In most cases, you should let W3 Total Cache handle CSS and JS minification and keep Optimole's Serve CSS & JS Through Optimole feature disabled to avoid conflicts.

However, if you find that your CSS or JS files contain image references that need optimization, you can test enabling Optimole's CSS & JS feature:

  1. Navigate to Optimole > Settings.
  2. Open the Advanced accordion and select the Compression panel.
  3. Set the compression mode to Custom.
  4. Toggle Serve CSS & JS Through Optimole on.
  5. Clear all caches (see Step 6) and test your site's performance.

💡 Tip: Only enable Serve CSS & JS Through Optimole if you notice that images referenced within CSS or JS files are not being optimized. If W3 Total Cache's minification is already working well for your site, there is no need to enable this setting.

Step 6: Clear All Caches ​

After making configuration changes, clear the caches in both plugins and at the server level to ensure the new settings take effect.

  1. In W3 Total Cache, navigate to Performance > Dashboard and click Empty All Caches.
  2. In Optimole, navigate to Optimole > Settings > General and click Clear Cached Images. If you have Serve CSS & JS Through Optimole enabled, also click Clear cached CSS & JS.
  3. If your hosting provider has server-level caching, clear that cache as well.

Testing and Verification ​

After applying the configuration changes, verify that everything is working correctly.

Check Image Optimization ​

  1. Open your website in a browser and right-click on any image.
  2. Select Open image in new tab (or similar option depending on your browser).
  3. Look at the image URL — if Optimole is handling images, the URL will contain your Optimole CDN domain (e.g., i.optimole.com).

Test Site Speed ​

  1. Run a performance test using a tool like Google PageSpeed Insights or GTmetrix.
  2. Check that the results no longer flag issues related to next-gen image formats (since Optimole is handling this).
  3. Compare the results with any previous test scores you may have saved.

Troubleshooting ​

If you experience issues after making these changes:

  • Images not loading — Verify that Optimole is connected and active by checking the Optimole dashboard in your WordPress admin. Make sure Enable Optimole Image Handling is turned on under Optimole > Settings > General. Also confirm that W3 Total Cache's lazy loading is fully disabled.
  • Duplicate image processing — If images appear to be processed twice or load slowly, double-check that W3 Total Cache's WebP conversion and image optimization features are all disabled.
  • CSS or JS conflicts — If enabling Serve CSS & JS Through Optimole causes layout issues, disable it and let W3 Total Cache handle CSS and JS minification instead.
  • Old content still showing — Clear all caches again, including your browser cache, and wait a few minutes for changes to propagate through the CDN.

📝 Note: W3 Total Cache is a third-party plugin with many advanced configuration options. If you experience issues specific to W3 Total Cache settings not covered in this guide, consult the W3 Total Cache documentation or their support team.

  • Automatic Best Image Format Selection — doc
  • Serve CSS & JS Through Optimole — doc
  • Clear Cached Resources — doc
  • Exclusions from Optimizing or Lazy Loading — doc
  • Compatibility with LiteSpeed Cache — doc
  • List of Verified Compatible Products — doc

Still looking for an answer? Contact us!

Copyright (c) 2026 Optimole