WP plugins, reconnecting JavaScript vs Single Load Only.

In this post I want to discuss one of the problems with WordPress plugins and themes – reconnecting JavaScript. Also I propose solve this issue via “Single Load Only” technology. Connecting the script several times leads to its re-execution, i.e. productivity issue . In addition, this can lead to unpleasant side effects – such if this script binds some action to a click on a certain element, when pressed this action will be executed several times.

That’s main cause why WordPress developers recommend using the wp_enqueue_script function. It connects the JavaScript file if it was not previously connected. It mean you can call it several times, and the script will be inserted only once. But in practice, everything is not so rosy – I repeatedly met sites that downloaded the same script many times. Why is this happening? I can assume several causes, but especially relevant it three only.

Reconnecting JavaScript, causes of problems:

1 – direct connection between head tags.
The site owner reads the manual for the script and does step-by-step what wrote script author.
Almost all manuals say “Insert the <script> tag into the page header (between <head>’ and </head>)”.
From the point of view of the author of the script, everything is correct because he writes the instruction for all sites, and not specifically for WP. But as a result, this JavaScript can be connected two or more times.

2 – use of low-quality or old themes and plugins.
I saw old low-quality templates and plugins, in which the JavaScript files are connected via echo:echo ‘<script> … </script>’;
Particular attention should be paid to templates downloaded not from the WP repository.

3 – using different IDs in wp_enqueue_script function.
The first parameter of the wp_enqueue_script function is $handle, it must be unique.
For example, you have two or more plugins that use fancybox, and both plugins use the wp_enqueue_script function:
the first one will have code such

The authors of each of the plugins did everything correctly, but as a result, we will load the file js twice. Fancybox is specified for example only, a similar problem will be with any popular library.

Solution, Single Load Only:

How to avoid such duplication of scripts?
I think we can give the site owner the choice – need downloading the script or not.
Let him decide – and if he sees when viewing the html-code that a file is loaded twice, it should be possible to disable duplication.
How to achieve this? I’ll give an example for bootstrap.

If you have any questions or suggestions about reconnecting JavaScript, I will be glad to any comments. And in conclusion I propose to name this approach in the development of plugins SLON. This is Ukrainian word, it mean Elephant, also it abbreviation of Single Load Only.