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
wp_enqueue_script (
'plugin_1_script',
plugins_url ('/assets/fancybox/js/fancybox.js', __FILE__),
array ('jquery'),
'2.0',
true
);and the second is about such
wp_enqueue_script (
'plugin_2_script',
plugins_url ('/assets/fancybox/js/fancybox.min.js', __FILE__),
array ('jquery'),
'2.0',
true
);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.
Add to the plugin settings the option my_plugin_bootstrap_load:
function my_plugin_set_options() {
add_option('my_plugin_bootstrap_load', 1);
}Add in the settings of the plug-in the ability to change this option:
function my_plugin_options_page() {
$myPluginBootstrapLoad = get_option('my_plugin_bootstrap_load');
if ( ! isset( $_REQUEST['myPluginBootstrapLoad'] ) )
$_REQUEST['myPluginBootstrapLoad'] = false;
if ( isset ($_REQUEST['settingsUpdated']) && $_REQUEST['settingsUpdated'] == true ){
update_option('my_plugin_bootstrap_load', $_REQUEST['myPluginBootstrapLoad']);
?>
<div class="updated"><p><strong> <?php _e('Your settings are saved', 'my_plugin'); ?></strong></p></div>
<?php
}
?>
<form method="post" action="<? echo $_SERVER['REQUEST_URI'];?>">
<?php
if ($_REQUEST['settingsUpdated']){
$selectBootstrapLoad = $_REQUEST['myPluginBootstrapLoad'];
} else {
$selectBootstrapLoad = $myPluginBootstrapLoad;
}
?>
<select name="myPluginBootstrapLoad">
<option value="1" <?php echo ($selectBootstrapLoad == 1) ? 'selected' : false ;?>><?php echo __('Load Bootstrap from the site', 'my_plugin'); ?></option>
<option value="0" <?php echo ($selectBootstrapLoad == 0) ? 'selected' : false ;?>><?php echo __('Don\'t load Bootstrap', 'my_plugin'); ?></option>
</select>
<input type="submit" name="settingsUpdated" class="button button-primary" value="<?php _e('Save Changes', 'my_plugin') ?>" />
</form>
<?php
}
?>And enqueue Bootstrap, given the value of the option my_plugin_bootstrap_load:
if (get_option('my_plugin_bootstrap_load') == 1){
function enqueue_external_files() {
wp_enqueue_script( 'my-plugin-bootstrap-js', '//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js', array('jquery'), true); // all the bootstrap javascript goodness
wp_enqueue_style( 'my-plugin-bootstrap-css', '//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css' );
}
add_action('wp_enqueue_scripts', 'enqueue_external_files');
}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.
Related posts:
Youtube Embed Performance – plugin for WordPress
Youtube Embed Performance will improve the performance of your initial page load, especially if there are two or more videos embedded on the same page. I think, it’s [...]
What’s New in WordPress 5.1
WordPress 5.1 available on February 21, 2019. It have name “Betty” in honoring American jazz singer Betty Carter. WordPress 5.0 had been downloaded more than 35 million times [...]