Disable scripts loading in head section in Joomla!

WebTechRiser.com > Joomla 3.0 > Disable scripts loading in head section in Joomla!

When a Joomla! powered website loads it’s 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 is 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, 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 a HtmlDocument object, $doc. By iterating the _scripts array in the $doc object variable, we will use 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 $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 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. Also, 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 JSs 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 newer Bootstrap version (version 3.3.7), you need to resort t this trick.

After all, Google values a website that loads faster. The less JavaScript files a webpage loads, the less it blocks the page to render. According to Google Insight, it recommends to remove 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 page. You can Like our Facebook and follow our Twitter page to get notifications about new tutorials.

Category Joomla 3.0
Tag:

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.