By this point in the book, our sample site will have quite a good load of JavaScript and CSS files. Each file request requires time and adds to the overall site load time. Now our site has over 20 CSS files, and more or less the same number of JavaScript files.
What can be done to reduce the number of calls? Well, as developers, we could pack our JavaScript and CSS files in as few files as possible. But as we are using lots of third-party extensions, and as it will be quite a huge task to try to pack these files, we should search for another option.
A good option will be to use a plugin like the JCH Optimize plugin, which we can find in the Joomla! Extensions Directory at the following URL:
http://extensions.joomla.org/extensions/site-management/site-performance/12088.
Once installed, this extension can be found under Extensions | Plugin Manager:
Just enable the plugin and then click on it. To edit its options, we are going to see which options are available (just the basic ones). First take a look at the next image:
Let's talk a bit about each option.
|
Option |
Description |
|---|---|
|
Combine CSS Files |
This option will merge all CSS files into just one file, so there's only one file to request. |
|
Combine JavaScript Files |
Works the same as the previous option, but for JavaScript files. |
|
GZip JavaScript and CSS |
If we have the zlib library installed in our server, our JavaScript and CSS files will be compressed so that they download faster. |
|
Minify CSS |
This will remove whitespace and comments from our CSS files. This is useful while developing, but not so useful in production. |
|
Minify javascript |
Works the same but for JavaScript files. |
|
Minify HTML |
Just the same as in the previous options, but for the resulting HTML code. |
|
Defer javascript |
This can be used with a bit of care, as the defer attribute indicates that our JavaScript code is not creating any elements, so it can be interpreted later. In our site, the jCarousel plugin, for example, created some HTML that would give us some problems. For our site we are not going to use this option. |
|
Put javascript at bottom |
This option places our JavaScript code at the end of the site. |
Once enabled, this plugin will greatly improve the load time of our site. For example, if we take a look at the source code with the plugin disabled, we can see something like this:
<link rel="stylesheet" href="/modules/mod_littlecontact/css/ styles.css" type="text/css" />
<link rel="stylesheet" href="/modules/mod_tinynews/css/ styles.css" type="text/css" />
<link rel="stylesheet" href="/modules/mod_slider/scrollable.css" type="text/css" />
<link rel="stylesheet" href="/modules/mod_tinyphotos/css/ jquery.jcarousel.css" type="text/css" />
<link rel="stylesheet" href="/modules/mod_tinyphotos/css/tango/ skin.css" type="text/css" />
…
<script type="text/javascript" src="/plugins/system/scjquery/js/ jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="/plugins/system/scjquery/js/ jquery.no.conflict.js"></script>
<script type="text/javascript" src="/plugins/system/scjquery/js/ jquery-ui.min.js"></script>
<script type="text/javascript" src="/plugins/content/ppgallery/res/ jquery.prettyPhoto.js" charset="utf-8"></script>
<script type="text/javascript" src="/modules/mod_littlecontact/js/ littlecontact.js"></script>
...
Well I've reduced this code a lot, but, as commented on before, we have almost 40 file loads. After we enable the plugin, external file loads will reduce a lot, and if we check the source code while the plugin is enabled, we will see the following code:
<link rel="stylesheet" type="text/css" href="http:///plugins/system/JCH_Optimize/jscss.php?f=db0e623db9e07ff434eb6e98be2f1193&type=css"/>
<script type="text/javascript" src="/plugins/system/JCH_Optimize/jscss.php?f=a01fc003c676df3d78713c979090db9f&type=js"></script>
These are two temporary files that will contain all the other CSS and JavaScript files, minified, and if the option is enabled, gzipped.
Of course, care must be taken when using this plugin as sometimes errors may occur. So you will need to try different options or exclude some files. Just try it! You will find it's a great tool.