Posted on

How WordPress Plugins Affect Your Site’s Load Time

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:

 

 

Continue Reading >>