(+84) 463.28.7979

How WordPress Plugins Affect Your Site’s Load Time


Have you heard from developers that the more plugins you use, the slower your WordPress site gets? Well that is partially true. Some plugins add just a small query which has little to no impact on your site’s load time. Where as other plugins add jQuery and CSS on each page load (in your site’s <head></head> area). So for example if each plugin adds one jQuery file and one CSS stylesheet and you have 8 plugins like that, you just added 16 HTTP Requests. This can get really out of control when plugins start adding more than one stylesheet or jQuery files. In this article, we will show you how you can still use all the WordPress plugins you want without the additional HTTP Requests.

Note: We recommend that you at least know some PHP before diving into this tutorial.

Our Goal: Disable all Additional Scripts and Stylesheets that plugins add on each page load.

Wait a minute, Why do these plugins add these scripts and styles? Isn’t it necessary for the plugins to function properly? Glad you asked. Most likely those CSS and JavaScript codes are important to the functionality of the plugin, but we will remove it anyways to have more control on our WordPress site and make it run faster. By disabling the CSS files and JavaScripts, we can:

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 a single file (Sprite Technique).
  • Load the files only on the pages we’re using the script or style.

Disable Scripts and Styles in WordPress

The best part about WordPress is that it has a built-in system that allows us to deregister scripts and styles that are added by the plugins. The “bad part” in this situation about WordPress is that it is open-source, so the plugins are created by people in the community (Expert developers and new developers). This means that not all plugins use the correct methods for loading scripts and styles which makes our job harder. The correct method is by registering the stylesheet or scripts with the following WordPress functions: wp_enqueue_script() and wp_enqueue_style(). If your plugin author isn’t using these functions, then send them a kind email asking them to update the plugin. This is not hard, it is just a matter of a learning curve.

To figure out what scripts or styles you want to disable, you might have to dig deeper and gets your hand dirty. This means looking in the code of your plugins.

Disabling CSS (Stylesheets)

In this example, we will use a plugin called Cleaner Gallery which adds its own CSS file on each page load. First, you have to check whether the plugin is using the correct method for adding stylesheets. To do so, you would need to open the plugin file: gallery.php (for this plugin). In there, you should run a search for “wp_enqueue_style”. You will find results like this:

wp_enqueue_style( 'cleaner-gallery', CLEANER_GALLERY_URL . 'cleaner-gallery.css', false, 0.8, 'all' );

Now you know the name of the handle for the style which is ‘cleaner-gallery’. Then you would need to open your theme’s functions.php file and add the following code:

    add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
    function my_deregister_styles() {
    wp_deregister_style( 'cleaner-gallery' );
    }

You can deregister as many style handles you want within this function. So if you have more than one plugin to deregister the stylesheet for, you would do it like this:

    add_action( 'wp_print_styles', 'my_deregister_styles', 100 );

    function my_deregister_styles() {
    wp_deregister_style( 'cleaner-gallery' );
    wp_deregister_style( 'Plugin Style Handle' );
    wp_deregister_style( 'Plugin Style Handle' );
    }

Now once you have removed the stylesheets from being loaded on every page, it will affect plugin’s functionality. For example, your gallery will be BROKEN in terms of styling and organization. To fix this, you should open your theme’s style.css file, and all the way at the bottom paste the CSS codes from the plugin(s). In our example, we removed cleaner gallery stylesheet from loading, so you will now open cleaner-gallery.css which can be found in that plugin’s folder. Copy the code and paste it in your theme’s style.css file. This way not only that you would be able to customize the display of your gallery, but you will also reduce one HTTP request.

The Ideal Way

A plugin known as WP-PageNavi gives its users an option to remove the stylesheet from the Dashboard Settings Page.

WP-PageNavi Options

Most of the time, you would need to customize the display of this plugin to match your site’s color scheme. Because of that most users, ended up pasting the codes on their style.css anyways. Now the plugin author lets you deregister the stylesheet with a simple check box.

We are hoping that more and more plugin developers follow this step to make the job easier :)

Disabling JavaScripts

Some plugins also add the JavaSscript on the page for the sake of functionality. In our example, we will use the plugin Contact Form 7.

You will need to dig deeper in the Plugin files to find the script handle just like we did with the Styles. For this plugin, the script handle is ‘contact-form-7′. You will need to copy and paste the function below in your theme’s functions.php file:

    add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );

    function my_deregister_javascript() {
    wp_deregister_script( 'contact-form-7' );
    }

You can deregister multiple scripts within one function if you so desire. Once you remove the JavaScript, it will certainly affect the plugin’s functionality. You can combine JavaScripts together, but sometimes it does not work, so you must know what you are doing. You can learn from Trial and Error (like a lot of us do), but we recommend you do not do that on a live site.

Load Scripts Only on Specific Pages

Lets say that you know the Contact Form Script is necessary, and you cannot merge it with other scripts for some reason. You can load it only on the contact page if you so desire with the following function:

    add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );

    function my_deregister_javascript() {
    if ( !is_page('Contact') ) {
    wp_deregister_script( 'contact-form-7' );
    }
    }

By doing this, you will save the unnecessary script load on all the other pages that does not have the Contact Form. This is an extremely useful technique to improve site’s load time. You can use other parameters such as !is_single etc.

If you are using a lot of plugins on your site, we recommend that you open FireFox and View the Source file of your main page (Ctril + U). Then look above this area </head> and see how many plugins are adding HTTP Requests such as stylesheets and JavaScripts. Also install the YSlow Plugin on Firefox to see what can be fixed and what is your current Site Grade. Follow this tutorial above, and report back to us how much did you improve your site grade by. Have fun.

Additional Resources

Justin Tadlock
YSlow
WordPress Codex: Scripts / Styles

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>