Optimize Plug-in Scripts for WordPress

sweepingIf 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');

About Devin

I am a developer based in Austin, Texas. I run a little theme shop called DevPress and help manage a WooCommerce shop with Universal Yums. Find me on twitter @devinsays.

12 Responses

  1. 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.

  2. @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).

  3. @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. :)

  4. david

    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!

  5. david

    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!

Leave a Reply