Back to Community

Fixing Common Conflicts Between Speed Optimizer and Elementor

Content

Many WordPress users who build their sites with Elementor also use the Speed Optimizer plugin to boost performance. However, these two powerful tools can sometimes conflict, causing layout issues, broken functionality, or other unexpected behavior on your site. This guide covers the most common conflicts and how to resolve them.

Why Do These Conflicts Happen?

Speed Optimizer works by aggressively optimizing your site's assets (CSS, JavaScript, images) and implementing caching. Elementor, especially when using advanced features, relies on specific scripts, styles, and asset loading sequences. When optimization changes this order or defers certain files, it can break the functionality that Elementor expects to work.

Common Conflicts and Their Solutions

1. JavaScript Errors and Broken Functionality

Symptoms: Elementor forms not submitting on mobile, sliders not working, hamburger menus becoming unresponsive, or errors like "Uncaught ReferenceError: Swiper is not defined" in the browser console.

Likely Cause: The "Defer Render-blocking JavaScript" or "Combine JavaScript Files" features.

Solution: The most effective fix is to exclude specific Elementor scripts from these optimizations. You can find the exclusion settings within the Speed Optimizer's interface under the relevant tab (e.g., Frontend Optimization). Common scripts to exclude include:

  • elementor-frontend
  • swiper
  • dialog

2. Layout and Styling Issues

Symptoms: Headers, footers, or sections looking broken; custom CSS from Elementor not appearing; missing headlines (H2 tags); stretched sections or sticky menus not working.

Likely Cause: CSS combination or minification.

Solution: Disable the "Combine CSS Files" option. If the issue persists only when combination is enabled, you may need to exclude certain Elementor stylesheets from being combined within the plugin's settings.

3. Lazy Load Media Conflicts

Symptoms: Elementor galleries (like the Filterable Gallery widget from Essential Addons) appearing broken or with incorrect dimensions. Anchor links not scrolling to the correct position on the page.

Likely Cause: The "Lazy Load Media" feature.

Solution: Disable Lazy Load for images. Alternatively, you can use a code snippet to exclude specific CSS classes used by Elementor widgets from lazy loading. The following filter can be added to your theme's functions.php file:

add_filter( 'sgo_lazy_load_exclude_classes', 'exclude_elementor_classes' );
function exclude_elementor_classes( $classes ) {
    $classes[] = 'elementor-widget-class-name';
    $classes[] = 'premium-woo-products';
    return $classes;
}

4. Caching and Update Problems

Symptoms: Elementor Theme Builder not loading, site styles breaking after an Elementor update until the cache is manually purged, or changes made in Elementor not appearing on the frontend.

Likely Cause: Dynamic caching or outdated cache after updates.

Solution: Manually purge all caches after updating Elementor or Elementor Pro. For persistent issues with the Theme Builder, you may need to temporarily disable Memcached or Dynamic Caching while editing. The "Remove Query Strings From Static Resources" feature has also been known to cause issues; try disabling it if you encounter problems.

5. WebP Image Delivery Issues

Symptoms: WebP images not being served when both plugins are active.

Solution: This is a complex conflict. Ensure both plugins are updated to their latest versions. If the problem continues, you may need to choose one method for delivering WebP images—either through Speed Optimizer or through Elementor's experimental features—but not both.

General Troubleshooting Steps

  1. Identify the Problematic Setting: Activate Speed Optimizer and disable all its optimization features. Then, enable them one by one, checking your site each time, to identify which specific feature is causing the conflict.
  2. Check for Updates: Always ensure both Elementor and Speed Optimizer are running the latest versions, as updates often include compatibility fixes.
  3. Change Elementor's CSS Print Method: In some cases, changing this setting can help. Go to Elementor → Settings → Advanced and change the CSS Print Method from "External file" to "Internal embedding."

By systematically working through these solutions, you can usually find a configuration that allows Speed Optimizer and Elementor to work together harmoniously, giving you both a fast and visually impressive website.

Related Support Threads Support