When a Joomla! powered website loads its front-end, its template itself loads some jQuery-based .JS files from the core of Joomla. It includes jQuery and jQuery-dependent scripts. We will be able to find out which scripts are loading in the templates with the “_scripts” array variable of the HtmlDocument object using var_dump.
These scripts are loaded in the <head> section of the template. Generally, Joomla! loads the <head> where “<jdoc: include type=”head” />” line is encountered in the template.
In this tutorial, we will look today, at how to disable or remove all, or some of these scripts.
First, we will specify the scripts that you want to exclude in a PHP array. Tailor the list as you need.
$dontInclude = array(
JURI::root(true).'/media/jui/js/jquery.js',
JURI::root(true).'/media/jui/js/jquery.min.js',
JURI::root(true).'/media/jui/js/jquery-noconflict.js',
JURI::root(true).'/media/jui/js/jquery-migrate.js',
JURI::root(true).'/media/jui/js/jquery-migrate.min.js',
JURI::root(true).'/media/jui/js/bootstrap.min.js',
JURI::root(true).'/media/system/js/core-uncompressed.js',
JURI::root(true).'/media/system/js/tabs-state.js',
JURI::root(true).'/media/system/js/core.js',
JURI::root(true).'/media/system/js/mootools-core.js',
JURI::root(true).'/media/system/js/mootools-core-uncompressed.js',
JURI::root(true).'/media/system/js/caption.js',
);
Now, let us declare an HtmlDocument object, $doc. By iterating the _scripts array in the $doc object variable, we will use the “foreach” loop to unset each unwanted script in order to disable (remove) them.
$doc = JFactory::getDocument();
foreach($doc->_scripts as $key => $script){
if(in_array($key, $dontInclude)){
unset($doc->_scripts[$key]);
}
}
This prevents those scripts from being loaded in Joomla! <head>.
At this point, if you examine the $doc->_scripts array, the output of the variable will be shown, and you will see that you have disabled the scripts as we expected.
There is a shortcut to get the $doc->_scripts variable. It’s just:
$this->_scripts
Below is the output of $this->_scripts in a fresh install of Joomla! 3 website:
array(7) {
["/testj380/media/jui/js/jquery.min.js"]=> array(2) { ["type"]=> string(15) "text/javascript" ["options"]=> array(6) { ["version"]=> string(4) "auto" ["relative"]=> bool(true) ["detectDebug"]=> bool(false) ["framework"]=> bool(false) ["pathOnly"]=> bool(false) ["detectBrowser"]=> bool(true) } } ["/testj380/media/jui/js/jquery-noconflict.js"]=> array(2) { ["type"]=> string(15) "text/javascript" ["options"]=> array(6) { ["version"]=> string(4) "auto" ["relative"]=> bool(true) ["framework"]=> bool(false) ["pathOnly"]=> bool(false) ["detectBrowser"]=> bool(true) ["detectDebug"]=> bool(true) } } ["/testj380/media/jui/js/jquery-migrate.min.js"]=> array(2) { ["type"]=> string(15) "text/javascript" ["options"]=> array(6) { ["version"]=> string(4) "auto" ["relative"]=> bool(true) ["detectDebug"]=> bool(false) ["framework"]=> bool(false) ["pathOnly"]=> bool(false) ["detectBrowser"]=> bool(true) } } ["/testj380/media/system/js/caption.js"]=> array(2) { ["type"]=> string(15) "text/javascript" ["options"]=> array(6) { ["version"]=> string(4) "auto" ["relative"]=> bool(true) ["framework"]=> bool(false) ["pathOnly"]=> bool(false) ["detectBrowser"]=> bool(true) ["detectDebug"]=> bool(true) } } ["/testj380/media/jui/js/bootstrap.min.js"]=> array(2) { ["type"]=> string(15) "text/javascript" ["options"]=> array(6) { ["version"]=> string(4) "auto" ["relative"]=> bool(true) ["detectDebug"]=> string(1) "0" ["framework"]=> bool(false) ["pathOnly"]=> bool(false) ["detectBrowser"]=> bool(true) } } ["/testj380/templates/protostar/js/template.js"]=> array(2) { ["type"]=> string(15) "text/javascript" ["options"]=> array(6) { ["version"]=> string(4) "auto" ["relative"]=> bool(true) ["framework"]=> bool(false) ["pathOnly"]=> bool(false) ["detectBrowser"]=> bool(true) ["detectDebug"]=> bool(true) } } ["/testj380/media/jui/js/html5.js"]=> array(2) { ["type"]=> string(15) "text/javascript" ["options"]=> array(7) { ["version"]=> string(4) "auto" ["relative"]=> bool(true) ["conditional"]=> string(7) "lt IE 9" ["framework"]=> bool(false) ["pathOnly"]=> bool(false) ["detectBrowser"]=> bool(true) ["detectDebug"]=> bool(true) } }
}
And, after removing selected scripts, it looks like the below:
array(2) {
["/testj380/templates/protostar/js/template.js"]=> array(2) { ["type"]=> string(15) "text/javascript" ["options"]=> array(6) { ["version"]=> string(4) "auto" ["relative"]=> bool(true) ["framework"]=> bool(false) ["pathOnly"]=> bool(false) ["detectBrowser"]=> bool(true) ["detectDebug"]=> bool(true) } } ["/testj380/media/jui/js/html5.js"]=> array(2) { ["type"]=> string(15) "text/javascript" ["options"]=> array(7) { ["version"]=> string(4) "auto" ["relative"]=> bool(true) ["conditional"]=> string(7) "lt IE 9" ["framework"]=> bool(false) ["pathOnly"]=> bool(false) ["detectBrowser"]=> bool(true) ["detectDebug"]=> bool(true) } }
}
Why would I exclude these scripts?
Caption.js is among the script that loads automatically. If “mootools-core.js” is loaded, it takes up 81.9 KiloBytes. If you do not need the caption of the image in your Joomla! template, then it’s safe to remove caption.js. And, all the functions of mootools-core.js can be done by jQuery. Disabling these JavaScript scripts will save you some bandwidth. Your site will load faster. Google does not like slower sites.
Joomla 3 ships with Bootstrap version 2.3.2. In case you want to use the newer Bootstrap version (version 3.3.7), you need to resort t this trick.
After all, Google values a website that loads faster. The fewer JavaScript files a webpage loads, the less it blocks the page to render. Google Insight recommends removing render-blocking JavaScript and other files.
I hope that you may find this tutorial useful.
Every tutorial published on this website is posted on the Facebook and Twitter pages. You can Like our Facebook and follow our Twitter page to get notifications about new tutorials.
Leave Your Comment