Optimizing scripts and styles automatically is a double-edged sword

Published in WordPress.

Watch our video

There is a better version of your web

Share this post

Surely you have heard in some corner of the Internet a guru talking about the importance of WPO. In addition to checking the meaning of this acronym, you may have thought that the advice of that guru is the key to optimizing your website and finally boost its performance.

I will not be the one to question it. WPO is important, but you also have to be extremely careful when putting into practice some of the advice experts out there provide, no matter how smart that person is.

In WordPress, it is common to read that there are a series of plugins that you must install to improve the performance of your website. An SEO plugin here, a cache plugin there, a security plugin is always necessary… In short, the typical talk to teach WordPress beginners that looks like a Pokémon video game: gotta catch ’em all (the plugins)!

Common sense, even though it is the least common of the senses, tells us that in WordPress we must use the least possible number of plugins to cover the maximum number of functionalities that we need. It is not necessary to install all the existing plugins. In fact it is not a recommended practice. Optimizing your website is more complex than installing a simple plugin.

Beware of miraculous plugins in WordPress

But continuing with the previous topic of WPO, a very popular type of plugin in WordPress that which improves the speed of your website by minifying and combining scripts and styles. In most cases, these plugins are sold as the silver bullet for achieving 100 on website performance meters. Among its supposed advantages we have the following:

  1. They minify CSS styles and JavaScript scripts to reduce their size so that it takes less time to download them.
  2. They combine all the CSS styles and JavaScript scripts so that your visitors only load a single CSS file and a single JavaScript script, reducing the number of requests they have to make to the server.
  3. They put async and defer tags so that the web does not wait for the scripts to load and the execution continues.
  4. They remove unnecessary elements, such as emojis.
  5. They allow applying lazy loading of images to further reduce the loading time of your website.

Ok, that is perfect. But if you are one of those who install and activate an auto-optimization plugin without reading the fine print, I am sorry to tell you that the chances of your website breaking are very high.

Using WordPress plugins to add and minify scripts can be a double-edged sword.
Using WordPress plugins to combine and minify scripts can be a double-edged sword.

Auto-optimization plugins may seem like a panacea, but they can also end up turning your website into a minefield. And yes, you will not leave there without stepping on one and bursting some part of your website.

The reason is easy to explain. WordPress plugins that combine and minify JavaScript scripts in a single file may not maintain the order of execution of these scripts, which causes many errors.

If we review the correct way to enqueue scripts in WordPress, we have to go to see the definition of the wp_enqueue_script() function:

wp_enqueue_script( 
   string $handle, 
   string $src = '', 
   string[] $deps = array(),
   string|bool|null $ver = false,
   bool $in_footer = false
)

The third parameter of this function is a list of dependencies, which is nothing more than the name of other scripts that the script we are enqueuing needs for its proper operation. This means that, by the time a script runs, all its dependencies must be already loaded in the site.

The order in which the scripts are enqueued is important, and so are the dependencies. WordPress takes care of creating a correct order if we use the wp_enqueue_script function, making sure that the scripts are loaded on the page as they should.

The problem is that if we use a plugin that minifies and combines JavaScript files, the JavaScript file resulting from the combination may not respect the order of execution and dependencies that we have defined. And this is what makes your JavaScript code not work.

If we take into account that every day we find more JavaScript on our WordPress websites to implement functionalities, installing this type of plugins and activating them like crazy can be very problematic.

My website does not work. Who is the one to blame?

As WordPress plugin developers, it is our duty to be careful and try to have minimal impact on the functionality of other plugins. However, quite often we come across users of our plugins who complain that installing one of our plugins breaks their website.

After a thorough investigation, many times the problem arises because they’re using these optimization plugins that combine scripts and result in JavaScript errors when our plugin runs. Also keep in mind that since all the JavaScript on the web is merged into a single script, if there is a failure that stops the execution of that script, no other script will work either.

The consequent waste of time exchanging messages until we get the user to give us access to their installation to finally see that the problem is the usage of a plugin to auto-optimize is terrible. That’s why if you are reading this and you have a WordPress website I would like you to be aware that plugins for auto-optimizing scripts and styles are a double-edged sword if you don’t configure them properly.

Settings screen of the Autoptimize plugin for WordPress, from where you can exclude scripts and styles.
Settings screen of the Autoptimize plugin for WordPress, from where you can exclude scripts and styles.

The solution is to exclude from the minification and combination process any script that doesn’t work with the auto-optimization plugin. Something that is not difficult to do if you know what scripts to include. But the problem is that users of these auto-optimizing plugins rarely do this.

As a self-protection measure, plugin developers have to include compatibility filters in their code to exclude their scripts from the default combination and minification these other plugins do. Something that in addition to taking time, is not always possible to achieve.

Use auto-optimization plugins with great care

After this article I don’t want you to get the false belief that I am a hater of auto-optimizing plugins. Their success is a clear identifier that they are useful and that they solve a problem for people. Even we have activated the auto-optimization plugin that SiteGround provides on our own website.

But keep in mind the following: if we use these types of plugins, we cannot just simply activate them. We have to test them thoroughly on our website to be able to configure them correctly according to our specific conditions. Every time we install a new plugin, we must double check that the minification/combination process works and the website is still responsive.

By being a bit responsible and taking care, the problems that you are going to encounter minifying and combining scripts and CSS styles with auto-optimizing plugins can be reduced considerably.

Featured image of Markus Spiske on Unsplash.

Leave a Reply

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

I have read and agree to the Nelio Software Privacy Policy

Your personal data will be located on SiteGround and will be treated by Nelio Software with the sole purpose of publishing this comment here. The legitimation is carried out through your express consent. Contact us to access, rectify, limit, or delete your data.