If you view the source on a WordPress site, you’ll likely see a lot of javascript and css files that are loaded by plug-ins. In most cases, those files aren’t needed on every page and can be removed.
For instance, the styling and javascripts for a contact form is usually only needed on the page where the actual contact form is. Or styling for something like WP-PageNavi might as well go in your own stylesheet rather than being loaded separately by the plug-in.
Although optimizing your plug-in scripts can take time, it’s generally worth doing. Especially if you have a large site with lots of traffic. A faster load time will give a better user experience, reduce bandwidth load, and perhaps even effect search rankings.
If you have one of the plug-ins listed below, you should be able to add the snippets to your own functions.php file to remove the styles and/or javascripts or apply them conditionally. If you have any to add, please leave a comment. For a more in-depth discussion of how this works, check out Justin Tadlock’s article about disabling scripts and styles.
Contact Form 7
// Add the Contact Form 7 scripts only on the contact page
function deregister_cf7_js() {
if ( !is_page('contact')) {
wp_deregister_script( 'contact-form-7');
}
}
add_action( 'wp_print_scripts', 'deregister_cf7_js' );
function deregister_ct7_styles() {
wp_deregister_style( 'contact-form-7');
}
add_action( 'wp_print_styles', 'deregister_ct7_styles');
cForms
The cForms plug-in actually allows you to set the pages that the script will load on through the plug-in interface. This would be the better way to do it.
// Load cForms scripts only on the contact page
function deregister_cforms() {
if (!is_page('contact')) {
remove_action('wp_head','cforms_style');
}
}
add_action( 'wp_print_scripts', 'deregister_cforms');
Page Navi
Note: There is now an option to disable the default styles from the admin panel of PageNavi. You’ll likely just want to take the PageNavi css file and append it your site stylesheet.
// Remove PageNavi CSS on all pages
function deregister_styles() {
wp_deregister_style( 'wp-pagenavi' );
}
add_action( 'wp_print_styles', 'deregister_styles');
Codebox
// Remove Codebox styles on all pages
function childtheme_deregister_styles() {
wp_deregister_style( 'wp-pagenavi' );
wp_deregister_style( 'codebox' );
}
add_action( 'wp_print_styles', 'childtheme_deregister_styles' );
Post Tabs
// Remove the Post Tabs scripts except for on selected page
function deregister_postTabs_addJS() {
if (!is_page('page-slug')) {
wp_deregister_script( 'postTabs');
}
}
add_action( 'wp_print_scripts', 'deregister_postTabs_addJS', 200);
remove_action('wp_head','postTabs_addCSS');
Calendar
// Apply Calendar CSS and Scripts Conditionally
function deregister_calendar() {
if (!is_page('calendar')) {
remove_action('wp_head', 'calendar_wp_head');
}
}
add_action( 'wp_print_scripts', 'deregister_calendar');
Smooth Slider
Remove inline css.
remove_action( 'wp_head', 'smooth_slider_css');
Fantastic.
II modified it a little to include more pages:
if (!is_page(array(‘contact’,’question’))) {
Terrific Post
Nice tips!
Hooking up actions and filters as well as embedding styles and scripts should be done carefully in order to optimize over-all performance.
The problem is not all theme and plugin developers know how to include scripts and styles properly yet. Some of them still don’t know how to use wp_enqueue_script and wp_enqueue_style, so unfortunately the technique presented in this article won’t work with all plugins out there.
I was looking for that tweak to disable WP PageNavi css file from loading when not needed, and now I found your post, I can use it. thanks!
@Devin: Thanks for this post! :) I am currently using the Post Tabs plugin, and for some reason I haven’t been able to get the CSS to display where it should? The Javascript is being deregistered correctly so it doesn’t show apart from on the correct page(slug).
If you have the stylesheet disabled, you can either load it into your default css or reload it conditionally on the pages you need it.
thank you so much for your post. This is very helpful.
@Devin: Thanks very much for your help. I have done as you’ve suggested and loaded the CSS conditionally on those pages after saving the CSS as a separate file. :)
Wow great post. Your video introduced me to cForms but now I have another reason why I might keep Contact Form 7 around. Maybe I should check out cForms on geeps though.
Hi,
What should I do to stop popover (optin form) from loading on some pages (squeeze etc.)
At the moment it’s everywhere, but I would like to kill it on some specific pages.
Thanks!
Use the conditional statements to only load it on the pages you want / need. You could use is_page(‘about-me’) or is_page_template(‘about.php’) . To make it exclude those pages you can add a ‘!’ before it. i.e. !is_page_template(‘about.php’). To read more about conditionals, check the the codex: http://codex.wordpress.org/Conditional_Tags
Can you please give the exact script I should use as I’m not familiar with a Javascript. I did modify one of the scripts above, but it didn’t work like it should. I saw the script I added just above the header of my website.
This is what I have tried to use:
function deregister_popupdomination() {
if (is_page(array(‘privacy-policy’,’contact-us’,about-us’))) {
wp_deregister_script( ‘popup_domination’);
}
}
add_action( ‘wp_print_scripts’, ‘deregister_popupdomination’, 200);
remove_action(‘wp_head’,’postTabs_addCSS’);
Thanks!
[…] scripts from loading on pages where you don’t need them.How to disable scripts and stylesOptimize Plug-in Scripts for WordPress | WordPress ThemingUse Google’s CDN copy of jQuery for the frontendFunction Reference/wp enqueue script « […]