Defer Parsing JavaScript For Slider Revolution

This is an old post and its information might be outdated. Please refer to Slider Revolution’s documentation for the most up to date information.

I think Slider Revolution is OK. I use it because it has an easy to use admin UI and a lot of transitions. I can give a client access to it and they will easily be able to add and update their slides as they need.

The major negative with Slider Revolution is that once you get under the hood, you can see what a mess the code is. The problems with the code has been brought to our attention through various bugs and patches, most recently the SoakSoak Comprimise. Keeping up to date on recent security patches and updates is always a good idea; but specifically on a WordPress plugin that is so popular, yet so poorly written, it is a necessity.

Besides the security concerns, my other main complaint with Slider Revolution is the way they add the JavaScript files.

self::addScriptWaitFor("jquery.themepunch.tools.min","rs-plugin/js",'tp-tools', $waitfor);
self::addScriptWaitFor("jquery.themepunch.revolution.min","rs-plugin/js",'revmin','tp-tools');

I am just not a fan of adding JavaScript like that, when WordPress has a built in functions for doing the same thing. The lack of using core functions like that, makes me question whether this plugin was written specifically for WordPress or if it is pieced together from php and js that is recompiled and sold to other CMS users.

Anyway… I wanted to move the js files to defer the parsing of javascript files to the footer so that they loaded later on in the users session.

The solution I came up with was to deregister the jquery.themepunch.tools.min & jquery.themepunch.revolution.min and then to re-add them using wp enqueue script.

The WordPress codex has documentation on wp enqueue script but here is an overview:
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

See that $in_footer?
That is where the magic will happen. If we set this to true the js files will be deferred into the footer where they belong.

And here is the code to add to your site as you like:


function revslider_scripts_cleanup() {
//DeRegister jquery.themepunch.tools.min
wp_deregister_script( 'jquery.themepunch.tools.min' );
//DeRegister jquery.themepunch.revolution.min
wp_deregister_script( 'jquery.themepunch.revolution.min' );
	
//Enqueue js files in footer
wp_enqueue_script('jquery.themepunch.tools.min', plugin_dir_url( __FILE__ ) . 'revslider/rs-plugin/js/jquery.themepunch.tools.min.js', array(), '',  true);
wp_enqueue_script('jquery.themepunch.revolution.min', plugin_dir_url( __FILE__ ) . 'revslider/rs-plugin/js/jquery.themepunch.revolution.min.js', array(), '',  true);
}

add_action( 'wp_enqueue_scripts', 'revslider_scripts_cleanup' );

33 Comments

Mohammad gravatar icon Mohammad

Hi
I put your code in my functions.php and nothing changed!! still in GTMetrix:

/plugins/revslider/rs-plugin/js/jquery.themepunch.tools.min.js?rev=4.6.3 (84.0KiB)
/plugins/revslider/rs-plugin/js/jquery.themepunch.revolution.min.js?rev=4.6.3 (83.5KiB)

I’m not familiar to coding so much. after nothing happened I changed the version from 4.6.5 to 4.6.3, again nothing happened!
Help me to solve this
Thanks

Reply
Rob Scott gravatar icon Rob Scott

Hi –
It is hard to say without seeing how you have RevSlider configured and how your site is set up.
I put it into a plugin when I use it so that it is separate from my theme.
Thanks for reading!

Reply
Mohammad gravatar icon Mohammad

Dear Rob
I solved the problem using cloudflare with W3 Toatal cache 🙂

Reply
Adam gravatar icon Adam

Hey Rob,

Thanks for the insightful tutorial.

I’ve followed your instructions, by adding the code to my theme’s enqueue scripts function (I’m using a customized FoundationPress theme). I’ve successfully moved the scripts to the footer, but SR doesn’t recognize them there and gives me this error: Revolution Slider Error: If you want to use the PHP function “putRevSlider” in your code please make sure to check ” Include RevSlider libraries globally (all pages/posts) ” in the backend’s “General Settings” (top right panel). Or add the current page to the “Pages to include RevSlider libraries” option box.

You can see the error here: http://han.pixelsmithdesign.com/cms/

In the SR global settings I’ve turned off “Include RevSlider libraries globally” and “Insert JavaSscript Into Footer” since they were disrupting the other scripts that I’m loading in the site.

Any insight on how to get this to work?

Thanks!
Adam

Reply
Rob Scott gravatar icon Rob Scott

I think if you want to do it this way you have to include the Rev Slider libraries globaly. You can then de-register it from certain pages, post types etc.

Thanks,

Reply
Kristis gravatar icon Kristis

Hey, i don’t have much experience with WP coding – could you please tell me/give example of where/how to put the code you’ve provided in your post?

Thanks in advance

Reply
Rob Scott gravatar icon Rob Scott

It probably depends on your specific site and circumstances. Its hard to say without knowing what you are working with.

Reply
Vincent gravatar icon Vincent

Think this is the solution I’m looking for but my programming skills are insufficient to implement this.

I would really like te defer javascript but on the homepage my rev slider block’s This script will solve that but how and where do I implement? Any help would be much appreciated.

Reply
Rob Scott gravatar icon Rob Scott

Hi Vincent-
There is an option in the revslider settings at the top of the main RevSlider page called GLOBAL SETTINGS.
Once in the global settings you should see an option for Include RevSlider libraries globally.

Reply
Vincent gravatar icon Vincent

found it.
should these be on or off?
i put it in the footer right?

after that can I defer javascripts?

(really not a programmer sorry)

Reply
Rob Scott gravatar icon Rob Scott

If you are trying to put it on one page, then it should be off.
I guess you could add it to the footer. I would probably put it in something related to functions though.

Reply
Vincent gravatar icon Vincent

Right now, only the homepage has a revolution slider. I want to defer parsing JavaScript for the whole website. What global settings do I need in RS and where do I put your script? thnx!

Rob Scott gravatar icon Rob Scott

I quit using rev slider because it is such a mess, and I am not exactly sure the answer to your question. You can’t defer the parsing of JS if the page does not have the JS on it.
I add the script as a plugin to separate it from theme functions. You could add the script to your homepage template and that might work, but it would probably be about the worst place you could add it.

Thanks,

Jeff gravatar icon Jeff

Hi Rob,
Thanks to share this piece of code. I put your code in my functions.php but I have now the 2 scripts in header and in footer. I used this code :
//Charger jQuery
function bbx_enqueue_scripts() {
wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'bbx_enqueue_scripts' );

//Nettoyer RevSlider
function revslider_scripts_cleanup() {
//DeRegister jquery.themepunch.tools.min
wp_deregister_script( 'jquery.themepunch.tools.min.js' );
//DeRegister jquery.themepunch.revolution.min
wp_deregister_script( 'jquery.themepunch.revolution.min' );

//Enqueue js files in footer
wp_enqueue_script('jquery.themepunch.tools.min', plugin_dir_url( __FILE__ ) . 'revslider/rs-plugin/js/jquery.themepunch.tools.min.js', array(), '', true);
wp_enqueue_script('jquery.themepunch.revolution.min', plugin_dir_url( __FILE__ ) . 'revslider/rs-plugin/js/jquery.themepunch.revolution.min.js', array(), '', true);
}

What I ‘ve done wrong ?
You can have a look at : http://www.e2creunion.re
Thank you.

Reply
Aswin gravatar icon Aswin

Hi , i also added the code and found the script included in the header and footer , the de-register is not working , any clues 🙂

Reply
Rob Scott gravatar icon Rob Scott

Hi Aswin –
The Slider Revolution plugin has changed significantly since this was written. I would refer to their documentation as I think there is an add to footer option now.

Thanks,

Reply
Piet gravatar icon Piet

Hi Rob, thanks for your initiative.
Unfortunately the code you gave is no longer working. To test your snippet I let the proper enqueueing out, so I just added the clean up part (DeRegister the scripts). But the scripts are still loaded, with or without that snippet.
I even tried setting a different priority (both higher and lower), but no joy either.
Apart from ditching the plugin ;), do you have any (other) suggestions?

Reply
Rob Scott gravatar icon Rob Scott

Hi Piet-
I haven’t used revolution slider in a while. I wish I could provide more insight with your problem.
I think there is an option in the plugin that is for including the js files globally, which might need to be enabled in order to deregister them. Sorry I cant help more, I haven’t used the plugin since they have undergone some major changes to their code.

Reply
tavakol gravatar icon tavakol

which versions? what about essential grid? i have the same problem with essential grid plugin also. thanx

Reply
tavakol gravatar icon tavakol

hello
Just wanna say what is wrong with theme punch? i also have essential grid installed and they load 120 kb of js combined. render blocking js. i have tried to defer them, put theme in the footer, load them asyncronously, and also your code . each time the whole plugin stops working. . i was thinking if all these codes are jquery? what kind of jquery? since jquery is alirady loaded by wordpress. its a different jquery? is there any way to cut theme? minify them or something to cut their size?

Reply
Stefan gravatar icon Stefan

I wonder if we would still need to implement your discovery as of now 10/11/2017.
I am using revslider on my website at https://mediaprowebdesign.ie
I see that under global settings we have the option to load files in the footer and deffer java script. However gtmetrics still scores low if slider is enabled and good when it is disabled.
Any further plugin combinations to fix this?
Cheers.

Reply
Rob Scott gravatar icon Rob Scott

I am not sure. This post is from 2015. I have not used revolution slider since early 2016. I remember thinking there was way too much bloat and the plugin seemed like a port of PHP slider, meaning a lot of it was not done “the WordPress Way”. For me it made more sense to migrate to the Eazy Flickty Slider plugin that I developed using Flickity.js by David Desandro.

Reply
Dharmin gravatar icon Dharmin

i lose my revolution slider while i have checked” Let Autoptimize also extract JS from the HTML ” option i am usie Autoptimize plugin and wp faster cache plugin

Reply
Barış Dayak gravatar icon Barış Dayak

jquery.themepunch.tools.min.js and jquery.themepunch.revolution.min.js

https://www.barisdayak.com/ I want slider codes to run on this page.
I want to remove the code from other pages.
is it possible? help please

Reply
Zia Ahmad gravatar icon Zia Ahmad

It just made everything to disappear from my webpage except background images and header and footer.
What is your thought on it?
Yeah, but the error from GtMetrix got solved.

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *