Plugin Conflicts & Performance Optimization

Image Hover Effects Ultimate is designed to play nicely with other WordPress plugins and themes — but occasionally conflicts arise. This guide covers how to identify and fix conflicts, and how to optimize the plugin for the best possible page load performance.

Identifying Plugin Conflicts

The Standard Conflict Test

The fastest way to pinpoint a conflict:

1. Deactivate all plugins except Image Hover Effects Ultimate
2. Check if your hover effects work correctly
3. If they do, reactivate plugins one at a time, checking after each one
4. The plugin that breaks the hover effect when activated is the conflict source

Common Conflict Sources

• Page optimization plugins (Autoptimize, WP Rocket, LiteSpeed Cache): CSS/JS minification and combining can break the plugin’s assets
• Other image plugins (Envira Gallery, FooGallery, etc.): May load conflicting jQuery or lightbox libraries
• Icon plugins: Any plugin that loads Font Awesome can conflict with the plugin’s own Font Awesome loading
• Animation plugins: Plugins that load Waypoints or Animate.css can conflict with the plugin’s own copies
• Security plugins (Wordfence, Sucuri): May block REST API calls or inline scripts the plugin uses

Fixing Common Conflicts

CSS Conflict Fix: Custom Parent Class

If another plugin or theme is overriding the hover effect styles:

1. Go to Image Hover Ultimate → Settings
2. Add a value in Custom Parent Class (e.g., iheu-wrap)
3. This increases CSS specificity for all plugin styles, making them less likely to be overridden

Font Awesome Conflict Fix

If icons look wrong or Font Awesome is loading twice:

1. Go to Image Hover Ultimate → Settings
2. Set Font Awesome Support to No
3. The plugin will use whichever Font Awesome is already loaded by your theme or other plugins

Waypoints Conflict Fix

If scroll animations don’t work or JS errors mention Waypoints:

1. Go to Image Hover Ultimate → Settings
2. Set Waypoints Support to No
3. If another plugin loads Waypoints, the plugin will use it instead

CSS/JS Optimization Conflict Fix

If using Autoptimize, WP Rocket, or similar and effects break after enabling CSS/JS optimization:

• In your optimization plugin, add the Image Hover Effects CSS and JS files to the exclusion list
• Look for files named: animation.css, style.css, oxi-jquery.js, touch.js
• Excluding these files from optimization prevents the plugin’s assets from being broken during concatenation

Performance Optimization

Image Hover Effects Ultimate is already built with performance in mind, but here are additional steps to keep your pages loading fast.

Asset Loading Strategy

The plugin only loads its CSS and JavaScript on pages where the shortcode is used, it doesn’t load anything globally. This means pages without hover effects are completely unaffected.

Disable Unused Features

Each setting you disable prevents the corresponding asset from loading:

• Font Awesome Support → No: Saves ~30–70KB if your theme already loads it
• Waypoints Support → No: Removes the Waypoints JS file if you don’t use scroll animations
• Google Font Support → No: Removes Google Fonts HTTP request if you don’t use Google Fonts

Optimize Your Images

The biggest performance impact on a hover gallery is image file size — not the plugin itself. Before uploading:

• Compress images with a tool like Squoosh or TinyPNG
• Use modern formats (WebP) where possible
• Size images to their display dimensions — don’t upload a 3000px image for a 400px thumbnail
• Use a WordPress image optimization plugin (Imagify, ShortPixel, EWWW) to auto-compress on upload

Use Lazy Loading

WordPress has built-in lazy loading for images (the loading="lazy" attribute). This is applied automatically to most images. For hover galleries below the fold, this means images only load when they’re about to scroll into view — improving initial page load time significantly.

Caching

Use a WordPress caching plugin (WP Rocket, W3 Total Cache, LiteSpeed Cache) to cache the pages containing your hover effects. Cached pages load much faster on repeat visits.

Performance Checklist

• ☐ Disable Font Awesome if theme already loads it
• ☐ Disable Waypoints if not using scroll animations
• ☐ Disable Google Fonts if not using custom fonts
• ☐ Compress all images before uploading
• ☐ Use WebP image format where supported
• ☐ Enable browser caching via a caching plugin
• ☐ Exclude plugin CSS/JS from aggressive optimization if conflicts occur