How to Reduce HTTP Requests with Additional WordPress Plugins

We are aware that the more plugins you use, the slower your WordPress site gets.  Depending on the nature, plugins can add a small query having no impact on your site’s load time. Whereas other plugins can add jQuery and CSS in your site’s <head></head> area. If each plugin adds one jQuery file and one CSS stylesheet and you install 6 plugins like that, you just added 12 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.

Reduce HTTP

Why do plugins add scripts and styles?

CSS and JavaScript codes are important to the functionality of the plugin which is why they add them but they can be removed to have more control on your WordPress site and make it run faster. By disabling the CSS files and JavaScripts, you can combine multiple files into a single file (Sprite Technique) or load the files only on the pages you are using the script or style.

Disable Scripts and Styles

WordPress is that it has a built-in system that allows us to deregister scripts and styles that are added by the plugins. Unfortunately, is open-source, so the plugins are created by 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.

To figure out what scripts or styles you want to disable, you might have to look in the code of your plugins.

Disabling CSS

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

How to remove Stylesheet from the Dashboard Settings

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.

Disabling JavaScripts

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.

sarah ali

sarah ali

Sarah is a passionate writer and blogger. As an early adopter, she enjoys trying out new social media and Internet tools along with WordPress plugins and Web apps.
sarah ali

3 comments

Leave a Reply

Your email address will not be published.