Many plugins and themes add JavaScript and CSS files to your site. While this alone isn’t necessarily a bad thing, using several plugins that do this can bog down your site with loads of requests for these files.
The good news is that WordPress has a built-in system that allows us to deregister these scripts and styles.
Wait, don’t the plugins require this code? Probably. But, we want to take control of these files and make our sites run faster. Disabling these scripts and styles will allow us to do a few things:
- Combine multiple files into single files (mileage may vary with JavaScript here).
- Load the files only on the pages we’re using the script or style.
- Stop having to use
!importantin ourstyle.cssfile to make simple CSS adjustments.
For this exercise, I’ve chosen two popular plugins from the plugin repository: Contact Form 7 and WP-PageNavi.
The dirty truth
Not all plugins use the appropriate methods for loading scripts and styles. Some developers just drop stuff right in the header. This is usually because they’re not familar with two important WordPress functions: wp_enqueue_script() and wp_enqueue_style(). If your plugin/theme author isn’t using these functions, please encourage them to do so. It allows the rest of us to work with their code using the methods WordPress provides.
While figuring out what scripts or styles you want to disable, you might have to get your hands dirty. This means looking in code. Unless your plugin author has documented the script or style handle, you’ll need to find it.
Disabling JavaScript
For this example, we’ll be disabling the Contact Form 7 plugin’s JavaScript. The first thing you need to do is find the handle for the script. Open the wp-contact-form-7.php file in your favorite text editor and do a search for wp_enqueue_script. Doing so will turn up this bit of code:
wp_enqueue_script( 'contact-form-7', wpcf7_plugin_url( 'contact-form-7.js' ), array('jquery', 'jquery-form'), WPCF7_VERSION, $in_footer );The handle for this plugin’s JavaScript is contact-form-7. Now, you can close this file and move on.
Open your theme’s functions.php file and add this PHP in:
add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );
function my_deregister_javascript() {
wp_deregister_script( 'contact-form-7' );
}Once saved, the script will no longer load. You can deregister as many scripts as you want within this function.
Disabling styles
In this example, we’ll be disabling WP-PageNavi’s stylesheet. This is something I almost always do because I add the style rules to my theme’s style.css file.
The first thing you should do is open wp-pagenavi.php in a text editor and search for wp_enqueue_style. This will turn up this code:
wp_enqueue_style('wp-pagenavi', get_stylesheet_directory_uri().'/pagenavi-css.css', false, '2.50', 'all');And this:
wp_enqueue_style('wp-pagenavi', plugins_url('wp-pagenavi/pagenavi-css.css'), false, '2.50', 'all');What we’re looking for is wp-pagenavi, which is the handle for the style. Once you’ve found that, close the file and add this to your theme’s functions.php file.
add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
wp_deregister_style( 'wp-pagenavi' );
}That’ll disable the stylesheet for this plugin. Feel free to deregister as many styles as you want within this function.
Tips on making this work better
You’ve disabled several scripts and styles, but you need to do something with them. Here’s a list of tips on how to make use of the methods described in this tutorial:
- Append styles that you’ve disabled to the end of your theme’s
style.cssfile and edit them from there to get the look you want. - Combine several scripts into a single file and load it yourself. I would only do this for things that use the same JavaScript library. For example, I often combine scripts that are built on jQuery.
- Use conditional tags for fine-grained control over when a script or style is loaded.
If you disable something, it may cause the plugin/theme not to work correctly. Most styles can easily be added to your theme’s stylesheet so that you’re not loading a ton of stylesheets on your site. JavaScript is a different beast altogether, and I only recommend combining multiple files into one if you know what you’re doing.
Have fun with this. Experiment. Share your experience with others in the comments.
The other problem comes from plugin that, as you said in the begining of the article, don’t use wp_enqueue. We can get rid of those by removing the wp_head filter the plugin uses to append the script/style.
It would be so good if every plugins were giving you the chance to say where they are allowed to include styles and scripts. Most of them just include on every page, regardless of if the script is used or not…
Short, descriptive and sweet tip. Thanks for sharing this with us.
I figured out that, the script can be registered, only, when needed:
So it will load that script only on Contact page…
Really useful technique. I have been looking for something like this.
The solution that J Mehmett added to the script is very nice too.
Great job.
Hi Justin! Thank you for nice articles every time
To Contact Form 7 users, you can also use WPCF7_LOAD_JS constant to control JavaScript loading.
http://ideasilo.wordpress.com/2009/05/31/contact-form-7-1-10/
Takayuki Miyoshi (author of Contact Form 7)
Hi, Justin!
Sorry for offtopic)
Your widget “WordPress-o-Sphere” in sidebar — is this just text widget or some kind of plugin?
Oh this is a wonderful tip
I have many plugins so I’ve been thinking of trying to reduce the load they put on the site and this could really help. Thank you!
Thanks Justin,
That’s a good point and it’s a good idea to tidy it all up into one style sheet.
I’m trying to keep my plug-ins to a minimum and havent looked at this yet, but one link widget I had uses a remote file which is also going to slow it down. Possible I could copy that file onto my server although that would mean updating it regularly.
Thanks
Keith
This couldn’t have come at a better time. One thing that has always annoyed me about Contact Form 7 was the fact that it loaded what was only needed on the contact page onto every single page of the site. I now have exactly what I need to create cleaner and meaner WordPress based sites.
Great! Timely script for me. Just checking out my scripts and found out I need to disable some styles of my page.
Ben — You shouldn’t remove it from your theme, but use
remove_action()in your theme’sfunctions.phpif that’s the case. I would’ve mentioned it in the article, but I don’t want to promote bad practice.Ideally, plugins would allow you to choose the pages it’s loaded on.
J Mehmett — Yes, that’s the way to do it. Thanks for sharing your code with everyone.
Banago — Thanks. I’m glad you found it useful.
takayukister — That’s an interesting technique for disabling JavaScript. My hope though would be that you promote the technique mentioned above though because users would probably be more comfortable editing their theme’s
functions.phprather than theirwp-config.phpfile.brainsolid — It’s the Bookmarks widget, which is standard in my Hybrid theme. It’s also available as a plugin: Widgets Reloaded.
Gaby — I usually shy away from using several plugins that load scripts and styles, but when I do need to use them, I typically use these techniques to make sure they’re only loaded when needed.
Keith Purkiss — I’d honestly look for an alternate plugin rather than using something loaded from another person’s site.
Joe Somebody — I find this is common with a lot of contact form plugins, which is one of the reasons I picked that one out of the bunch.
Simon Wilby — I’m glad this tutorial is coming in handy for you.
Hi Justin,
Love your articles in general.
Just a question out of the scope of this article: how do you setup the “notify me of followup comments via e-mail” as you are doing below?
Are you using “http://txfx.net/code/wordpress/subscribe-to-comments/”?
It’s really useful.
But what about the others?
How could I disable them :-<
Gilbert — Yes, that’s the plugin I use. You only need to activate it, and the plugin takes care of the rest.
V.C. — How can you disable the other what? This method will work with both plugins and themes.
Hi Justin, thank for this really handy tip. Now i know how to disable the CSS from the Cleaner Gallery Plugin without commentig out every time you update your plugin.
Thank you very much.
Eduard Seifert — Yep, that’d be the way to do it.
Short, descriptive and sweet tip.
That wasvery usefull to all of us.
The good thing in WP is that it’s very friendly, has a lot of plugins and a lot of knowledge such as Justin’s. But it’s quiet confusing for beginners.
I moved from shared blogging system towards WP.
Can you refer for the beginners any simple website, beside your most important post ?
Thanks for simplifying this otherwise complex process so even a WP newbie like me can tackle this performance optimization. However, I will leave the file merge to an expert.
Very useful tip. When a project tends to evolve, a plethora of plugins tend to follow. Advice like this can make all the difference. Thanks!
This is a really great tutorial. One of my websites has become insanely slow, and I followed these instructions and it helped a lot! Thanks mate!
Thanks for great tips. I followed your instructions, changed theme and my blog loads 5 times faster
Some of the blog I frequent on a regular basis could do with reading this article. I’ll discretely pass this post onto some of them. Thanks
this is a useful techniques.thanks for a nice article i might be thinking to change my theme and this will be a very useful guide for me.
I’d add one more – use a plugin like Headspace2, it enables you to load scripts, css, or just raw head data on a post by post basis, after you’ve stopped them loading globally. So I do that with wp-polls, so the poll css is not on every page when I only need it on an occasional post.
Thanks for this Justin. I have several plugins that I have customized the styles for and now I don’t have to worry about editing their respective stylesheets every time the plugin is updated.
At the beginning I also tried out every plugin and widget available. But it really slowed down my whole page. Also it sometimes looks unprofessional if you have to many widgets and plugins. But thank you Justin for providing us with a script. That way you don’t have to uninstall everything – what I always did until now.
excellent as always !
I’m goonna check the Disabling javascript, I have to fix something around that using that snipe..
Please pardon the clueless here but: “deregister as many stylesheets as you need”
I can get one stylesheet to “de-regester” but I can not figure out the syntax to de-regester 2 stylesheets without breaking functions.php.
I guess I’m looking for an example with 2 de-regestered stylesheets.
Thanks, S
@Stefan: Did you try listing each handle as follows:
@Kim: Yes i did, whatever handle is in the second spot (cleaner-gallery in your example) is still being requested when I look in firebug at the css requests for that page.
I thought perhaps I was missing a space or something but no joy. I even swapped around the handle’s and only the first one is no longer requested.
I am trying to de-regester wp-postratings, theme-my-profile and theme-my-login, anyone of these in the first position gets de-regestered second one is still requested.
It must be my syntax though I copied the examples………hmmmm.
A great read thank you, I have only just started playing around with wordpress and your tips have come in handy,
@Stefan, did you find a solution to de-registering more than one script? I can’t figure it out either.
Of course, as soon as I ask the question, I figure it out. Very simple:
I can put in the header instead of the functions.php?
Or put the function in functions.php and add_action the header?
@Jack: You would add all of that code to your functions.php file, and it will remove the javascript from the header automatically. You don’t need to edit your header.php file at all.
Is it possible, using this method, to prevent NextGen gallery from inserting the version number into tags?
Ooh excellent post. I didn’t know that this was possible. I was always afraid to mess with the plugins for fear of breaking it altogether. Time to go mess with my site and hope I don’t break it to bad.
Nice post, for those who weren’t advanced in programming, especially web programming.
Thanks for posting this Justin. I just added the WP Navi deregister to my list of useful Thematic filters- even though it’s only sorta related. Too useful to leave off though: http://wordpresstheming.com/2009/10/useful-thematic-filters/.
This worked great: but is there a way to enable it only on certain templates instead of the exact page? For instance if I want a certain script to be allowed on single.php pages?
Thanks in advance! I’m still wrapping my head around much of this code!
@Ben for sure i’ve just done this, based on J Mehmett’s great comment (the 2nd comment)
Based on your example:
if(!is_single()){
wp_deregister_script(‘the-script’);
}
So if the page is not single.php the script will be de-registered!
Thanks for this great hack! However, when I applied it all other scripts stopt to function eventhough they where present in the head.
This appeared to be caused by the fact that plugin also wrote an extra inline script in the head. So check for extra write functions in the php.
i use contact form 7 on multiple pages ( eg: contact, addnote, feedback )
how can i do this ?
Hi!
I was thinking:
Since all your JS and CSS files are registered, Wordpress KNOWS what you need right?
So why not let WP gather all those files into on big CSS file and one big JS file automatically?
That way you’d load ONE stylesheet and ONE javascript file, and you’d never have to think about it.
It could even do some compacting before serving them (and then cache them of course)
I was actually searching for a plugin that did this, which is why I found this post.
Is it a feasible idea?
Is it already done, and if so, where?
Regards
Acebone
adding all js / css into one file will decrease the website performance
load the css & js only on the pages that you need.
Only in certain circumstances. Adding all JavaScript to a single file and all CSS to a single file will most likely increase performance because you’re making fewer HTTP requests. There are also times when this isn’t the best method. But, it’s definitely better for performance than just loading everything in separate files on every page view.
I am talking about aggregating the scripts in the queue
So you could still modify the queue on a pr. page basis. Everything would be business as usual, except wordpress would combine whatever CSS and JS is needed for the particular page
This should almost be default wordpress behaviour come to think about it
Is there any way at all to disable javascript from loading from a certain plugin if that plugin does not have a wp enqueue script handle? Or is there a tutorial somewhere that teaches you how to manually add in a handle? The plugin in question is WP Forum.
I’d like to know this as well.
I’m using a plugin that doesn’t use wp_enqueue_script and instead echoes tags in a function called
addHeaderCode(). This function is then added to the wp_head withadd_action("wp_head", array(&$this, "addHeaderCode"));When I try to do something like
remove_action('wp_head', addHeaderCode);nothing happens because the function name gets prepended with what looks to me like a session ID? (i.e. 1db0e0f7ce9..) When I include it, the action is removed.Am I doing this right? Will appreciate any help! Thanks!
I have trouble with this from the outset.
If I open wp-contact-form-7.php, there’s no
wp_enqueue_script
What’s going on?
I only wish I had found this earlier! What a great tutorial. If only authors would be more responsible about when to add scripts and styles, we wouldn’t need to resort to this method as much.
One of the most notorious for bulking up themes is NextGEN. While it’s a wonderful plugin for Wordpress, I can’t STAND that a ton of JS and CSS is added to both wp_head and wp_footer. The author also doesn’t include any method that specifies these scripts and styles only load on pages with galleries!
While this deregister method takes care of some of the unnecessary files on pages which don’t have galleries, it doesn’t take care of the version NextGEN version number, CoolIris/PicLens, and additional on-page script in the footer. Has anyone ever looked into this and how to compliment this method to take care of the rest of these scripts and styles?
I had a look through the NEXTGEN plugin and found that there is an easier way to turn off the registration of scripts:
so in your functions.php file just add
wohoo!
Is it possible that this code stopped working?
I have tried several plugins, including contact form 7 and there is no wp_enqueue_script
Thanks Justin.
Really useful stuffs around here!
Cheers.
Great guide!
I am having trouble removing some scrips and css files generated by plugins though, because they aren’t generating actual files in some cases, but just adding code to the header.
It’s annoying and I’m only having some mild success sniffing the culprits out. If you search for “wp_head” in some plugins you’ll see something like add_action(‘wp_head’, ‘somefunction’)
So in functions.php you can just repeat that, but with remove_action (and then add conditionals for when you really do want it to show).
However, some plugins are sneaky and I am having trouble finding the wp_head add actions.
Audio Player, for example is one I can’t seem to pick out.
Yup
great tips. J Mehmett’s solution solved a big problem for me. Thank you very much 
This is one of the best wordpress tutorials I have stumbled upon in a long time. I cannot believe these plugins do not have some default checking facility to see if they are needed, especially in the example of contact forms where they are often on one page, and the site could have hundreds of pages/posts. Great tips on speeding up Wordpress, I think this is going to become an operation I perform on nearly every site build from here on in. Keep up the good work Justin.
Hey Justin, I came up against something.
So I was having good results with more complex conditional versions of what you are doing with several scripts and creating a tree for a string of pages etc, the issue was this though, I was controlling certain scripts to work on the front end on certain pages, but then found the plugins didn’t have the functionality on the back on (dashboard) of wordpress, I was wondering if there is a smart way to still load the scripts you need inside the dashboard independently from the front end of whether its something only needed on is_single etc?
Cheers man.
Hello Justin
Great article , i am only having one issue , is there a possibility to register a script on multiple pages something like :
not sure about the :”
if ( !is_page('contact' , 'events' , ) ) {” rulehope you can help me
Simply amazing tutorial.
I’m running out of ideas for speeding up wordpress and this will help me to improve perfromance further. I was wondering if there is any plugin which can take care of cleaning up CSS and JS files? I got over 100 blogs and it is certainly not feasible to add these changes to each of them manually.
Dear Justin and other guys,
Firstly thank you for Can it be possible to use custom field to control loading css and js or not?
I tried but failed.
Best regards!
hello
for the “bad plugin” i tried:
but it don’t work…
any ideas ?
thank you for help
++
Billboc
Wow I had actually deleted the wp-pagenavi.css and added the CSS to Main: style.css to speed up my pages. As well as I had disabled: “Use pagenavi-css.css” from wp-admin PageNavi menu. Every thing looks good so I never checked server logs. I was surprised when I checked my apache “error.log” today it was so big as 800MB in only 2 months!!!
wp-pagenavi was reason for this mess and to get rid of that I found this article and I :
1). Started to search for: wp_enqueue_style in wp-pagenavi.php unfortunalty I couldn’t find that word in this file or directory.
2). Added this to my themes functions.php
3). I also tried to add: remove_action(‘wp-pagenavi’);
to functions.php
—-
I tried this but my server was still showing same error.log growing
Finally I had to edit file: plugins/wp-pagenavi/core.php
COMPLETLY REMOVE LINE NR 180, Looks ike:
And the error is GONE
I wonder:
1). How can I remove this action from themes functions.php instead of deleting line 180? It would be good to know since future updates for wp-pagenavi will put this line back again.
2). How to achieve 100% performances? The best way is actually to delete line 180 in wp-pagenavi/core.php? It doesn’t make any sense to define this function/action on every page to server and then telling it again to “don’t use/remove” this function/action.
You should remove every single byte which is useless if you are on a low budget server or are a professional developer to achieve and deliver BEST Performances.
Bytes makes KB´s & KB´s makes MB´s.. so on..
Thank you Justin for helping