Cache or Minification

In this article

Slider only show up correctly for logged in users, not for logged out users

When you are seeing differences between logged in and logged out users, that always means a cache plugin problem. Cache plugins are working that way, that you are seeing the not cached version when you are logged in, but the cached version where you are logged out. You should try to clear the cache of your website's caching plugin and if that wouldn't work, search for the name of your cache plugin in our documentation in case you find one specifically for that plugin.

We're storing one version of the slider, so if you make changes to the slider, but it doesn't show up that also happens because of a 3rd party cache. Make sure you clear your cache plugin's cache after every change you make in the slider.

WP Rocket WordPress

If you are using WP Rocket, you might experience issues with its minification which changes the loading order of our files.

πŸ’‘ Tip: You can confirm if your issue is connected to WP Rocket by temporarily deactivating the plugin or using the ?nowprocket in your URL to bypass its optimization.

To find the minification/optimization settings of WP Rocket, you have to go to your left WordPress admin menu's Settings β†’ WP Rocket β†’ File Optimization.

1
Load JavaScript deferred

This option isn't compatible with our codes, so you have to turn it off.

2
Excluded our files

WP Rocket also has an exclude option, where you should write this to the Excluded CSS Files option:

(.*)smart-slider(.*).css
	

and this to the Excluded JavaScript Files:

(.*)smart-slider(.*).js
	

You should write this to the Excluded Inline JavaScript

_N2
	

These are the places from where we are calling in our files, so this should make the minification to skip them.

3
Delay JavaScript execution

WP Rocket's Delay JavaScript execution feature will delay the loading of the slider, too. If you experience long loading times, maybe you need to interact with the page to make the slider load, then you need to exclude our files and inline codes from this feature. For this, you should add the pattern below, to the Excluded JavaScript Files field that you find under the Delay JavaScript execution setting:

(.*)smart-slider(.*).js
new _N2
this._N2
	

There are cases, when it isn't enough to exclude our codes, but the Delay JavaScript execution option has to be turned off, as its delay cannot be avoided.

4
WP Rocket CDN

WP Rocket's CDN option has a bug in its current version (2021.05.18.), that it cannot handle urls without http or https within srcsets, like this one:

<picture>
   <source srcset="//example.com/image.svg">
   <img src="//example.com/image.png">
</picture>
	

and they are adding cdn twice to the url, while it only should be added once: //cdn.cdn.example.com/image.svg

Until they will resolve it, you should turn it off at your WordPress left admin menu's Settings β†’ WP Rocket β†’ CDN β†’ Enable Content Delivery Network.

5
Remove unused CSS

The Remove unused CSS option messes up the sliders, so you should add the following to the CSS safelist field to exclude our codes:

.n2-ss-loaded
.n2(.*)
#n2(.*)
ss3(.*)
	
☝️ Note: The Remove unused CSS option of WP Rocket is currently in Beta, and it can have bigger issues so we don't support it. If it causes problems with Smart Slider, we recommend completely turning this option off until it gets stable.

WP Fastest Cache WordPress

If your Smart Slider doesn't work with the CSS and JS minification of WP Fastest Cache, then you could exclude our files from WP Fastest Cache by adding these words to the CSS and JS url containment exclusion:

smart-slider

and clear the cache of WP Fastest Cache.

JCH Optimize

Go to your Extensions β†’ Plugins, filter out the "system" plugins and move the Smart Slider 3 System Plugin plugin after JCH Optimize (in certain cases you need to move it before JCH Optimize, so you can try that too). This is the order of how codes are running on your website, and this should make JCH Optimize skip our codes.

JCH Optimize's image lazy loading

JCH Optimize could have an issue with lazy loading our images. You should go to your top admin menu's System β†’ Global Configuration β†’ JCH Optimize β†’ Media, and to the Exclude these classes list add: skip-lazy

Nitropack WordPress

Nitropack's optimization might cause problems with the slider. Visit https://nitropack.io/user/settings and go to the top Settings menupoint:

There you should turn on Excluded Resources (Images, JavaScript, CSS, etc.). Press Add an Exclude and fill it the following way:

Asset URL/Code Resource Type Resource Relation Device Excluded Operations
SmartSlider3 Any Resource Type Any Resource Relation Any Device All Operation
_N2 Any Resource Type Any Resource Relation Any Device All Operation
smart-slider Any Resource Type Any Resource Relation Any Device All Operation

As you can see on the screenshot below:

Nitropack's image lazy loading had bugs too, so if you don't see your images loading, try to exclude their folder. Usually images are stored within the /uploads folder of the server, so you could try to exclude this word as well:
uploads

the same way as you excluded the previous words.

Cloudflare’s Rocket Loader

Rocket Loader from Cloudflare is calling in the JavaScript files after everything else has been loaded, but because of this a lot of JavaScript events are skipped, which are used by many JavaScript developers, so complex codes like ours aren't working with it, and you shouldn't use it.

But according to this article the loaded scripts can be ignored by giving data-cfasync="false" to them. Go to Global settings β†’ Framework and find Script attributes under JavaScript and write this to the field:

data-cfasync='false'

Autoptimize

Autoptimize has an option for Critical CSS. This isn't compatible with our slider, so you should turn it off.

πŸ’‘ Tip: You can confirm if your issue is connected to Autoptimize by temporarily deactivating the plugin or using the ?ao_noptimize=1 in your URL to bypass its optimization.

You can try to exclude our CSS and JS files from Autoptimize's minifications by adding our folder to the exclusion list:

Free Smart Slider 3:
wp-content/plugins/smart-slider-3/

Pro Smart Slider 3:
wp-content/plugins/nextend-smart-slider3-pro/

Autoptimize's Aggregate CSS-files? option prevents the fonticons from loading properly. To solve the problem, you should write the following to the Exclude CSS from Autoptimize: field:
fontawesome.min.css, icomoon.min.css, linearicons.min.css, materialicons.min.css, typicons.min.css

Then go to Global settings β†’ Framework and enable Async non-primary CSS to async the fonts from our end.

Litespeed cache

Litespeed cache currently (2021. December 07.) has a bug in their CSS Minify / CSS Combine code, that results in:
  • Google fonts not being called in.
  • Padding being added to the <body> element of the website, pushing all contents into a wrong display.

They had been contacted by a user about this, so until they resolve the issue, you should turn off the LiteSpeed Cache β†’ Page Optimization β†’ CSS Settings β†’ CSS Minify / CSS Combine options, or you should contact them as well.

1
Critical CSS

Litespeed cache has an option for Critical CSS. This isn't compatible with our slider, so you should turn it off.

2
Other exclusions

You can try to exclude our CSS and JS files from Litespeed cache's minifications by adding the word smart-slider to the exclusion lists:

3
Load JS Deferred

Litespeed cache's Load JS Deferred execution feature will delay the loading of the slider, too. If you experience long loading times, maybe you need to interact with the page to make the slider load, then you need to exclude our files and inline codes from this feature. For this, you should add the pattern below, to the JS Deferred Excludes field that you find under the LiteSpeed Cache β†’ Page Optimization β†’ [7] Tuning setting:

_N2
n2.min.js
smartslider-frontend.min.js
	

SG Optimizer WordPress

SG Optimizer's Combine CSS Files option has a bug, that they don't put all removed CSS file's codes within their minified CSS file, so some Smart Slider codes of your website will be missed too. Turn off SG Optimizer β†’ Frontend Optimization β†’ Combine CSS Files and it should solve the problem.

You also shouldn't use their Remove Query Strings from Static Resources option. Query strings are used by developers to tell browsers, that a given file changed. If you remove query strings and update your plugins or theme, those people who have already visited your website will get wrong files!

WP Meteor

The WP Meteor plugin mess with the loading of our codes, so you'll need to exclude everything Smart Slider related from their optimization.

To test if it's actually WP Meteor that causes the problem, add ?wpmeteordisable after the URL where you see the problem. The sliders should load normally afterwards.

Go to WP Meteor β†’ Exclusions tab, turn on "Exclude scripts matching regexp from optimization", and write the following URLs to the field:

☝️ Note: Make sure you replace https://yoursite.com/ in the URL examples below with your site URL.
Smart Slider Free
https://yoursite.com/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/n2.min.js
https://yoursite.com/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/smartslider-frontend.min.js
https://yoursite.com/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Slider/SliderType/Simple/Assets/dist/ss-simple.min.js
https://yoursite.com/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Slider/SliderType/Simple/Assets/dist/smartslider-backgroundanimation.min.js
https://yoursite.com/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Widget/Arrow/ArrowImage/Assets/dist/w-arrow-image.min.js
https://yoursite.com/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Widget/Bullet/Assets/dist/w-bullet.min.js
Smart Slider Pro
https://yoursite.com/wp-content/plugins/nextend-smart-slider3-pro/Public/SmartSlider3/Application/Frontend/Assets/dist/n2.min.js
https://yoursite.com/wp-content/plugins/nextend-smart-slider3-pro/Public/SmartSlider3/Application/Frontend/Assets/dist/smartslider-frontend.min.js
https://yoursite.com/wp-content/plugins/nextend-smart-slider3-pro/Public/SmartSlider3/Slider/SliderType/Simple/Assets/dist/ss-simple.min.js
https://yoursite.com/wp-content/plugins/nextend-smart-slider3-pro/Public/SmartSlider3/Slider/SliderType/Simple/Assets/dist/smartslider-backgroundanimation.min.js
https://yoursite.com/wp-content/plugins/nextend-smart-slider3-pro/Public/SmartSlider3/Widget/Arrow/ArrowImage/Assets/dist/w-arrow-image.min.js
https://yoursite.com/wp-content/plugins/nextend-smart-slider3-pro/Public/SmartSlider3/Widget/Bullet/Assets/dist/w-bullet.min.js

If excluding the URLs does not make any difference, contact the developers of WP Meteor, because that means their exclusion doesn't work properly.

W3 Total Cache

The image lazy loading of W3 Total Cache could fail loading our images, so you should turn this option off. You can find it at Performance β†’ General Settings β†’ under User Experience as "Lazy Load Images".

WP Super Cache

This option of WP Super Cache can create issues about our files being called in:

Settings > WP Super Cache > Advanced > Late init

so you should leave it turned off.

Jetpack

Jetpack's image optimization options can cause various errors:

  • Jetpack processes all your HTML codes, which requires a lot of memory. This memory could be reached when many sliders are being used on one page.
  • Jetpack's image lazy loading often fails on different browsers, so our images won't load in that case either.
  • Jetpack's image lazy loading fails to load base64 encoded images, which is used for example at arrows and other controls.
  • Jetpack's "speed up image load times" option can make images not to load at all.

So you should go to Jetpack β†’ Settings β†’ Performance β†’ turn off the "Enable Lazy Loading for images" and "Speed up image load times" options.

Workaround for wrong base64 images
It's a known Jetpack issue that the data URI is stripped from base64 images. They have a workaround, which is adding the following code to your child theme's functions.php file or via a plugin called Code Snippets:
/*
 * Add 'data' for based64 enconcoded images for wp_allowed_protocols()
 * With this, Jetpack Lazy Images will not strip out "data" in the "src" attribute https://github.com/Automattic/jetpack/blob/6.8/modules/lazy-images/lazy-images.php/#L166
 */

add_filter( 'kses_allowed_protocols', 'htdat_kses_allowed_protocols', 10, 1 );
               
function htdat_kses_allowed_protocols( $protocols ) {
  $protocols[] = 'data';
  return $protocols;
}

Ionos Performance

Ionos Performance is not compatible with Smart Slider, so you should make sure it is deactivated on your Plugins list.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.