Introduction

JCH Optimize is a Joomla! plugin written to optimize web pages by combining external CSS and JavaScript files and even background images. This has the benefit of reducing http requests to fetch and render web pages as an http request has to be made for each resource file. By reducing the amount of these requests, which is expensive in terms of the time it consumes, the download time for the webpage is reduced and the user experience enhanced. Additionally there are options to minify CSS and JavaScript files to even reduce download time further, as minification effectively reduces file size and required bandwidth by removing unnecessary comments and whitespaces. All this happens on the fly without affecting the original files so you can keep them in an 'easy-to-read' form for easy maintenance.

This plugin does not make any changes whatsoever to existing files. Any persistent change observed after the plugin is disabled or uninstalled is as a consequence of caching. In this case the original state of the website can be easily restored by flushing your Joomla!, browser, CDN and third party cache.

Combining External Resources

JavaScript Files

This plugin is called on the Joomla! onAfterRender event. At this stage the component would be already processed and all the modules and templates rendered and the HTML fully prepared to be output to the browser. The plugin makes extensive use of Regular Expressions to search for the various components of the HTML to process and modify to give the desired effect. First, all urls to external script files are removed from the HTML. These would be in script declarations such as...

<script type="text/javascript" src="/templates/beez/javascript/md_stylechanger.js"></script>

Scripts that are in comment blocks, including if blocks, and those that are specified to be excluded in the plugin parameters are not removed. An id is generated using a hash that is based on the names of the urls removed and the parameters set in the admin section.

Cache

The contents of each files are read and combined together in one file and, if this option is set in the parameters, they are minified. This file is cached and is identified using the id generated above. The lifetime of the cache is the same as that set in global configurations for file caching. The next time the page reloads, the plugin will search for this cached file using the id first. If the file exists and is still valid, the file will be returned rather than spending the time again to generate it. You can find the cache file in the plg_jch_optimize folder.

/path/to/website/base/cache/plg_jch_optimize

At this location, the cache is available for maintenance from the admin site using the Cache Manager. You can delete the entire cache folder or purge expired cache from the tools menu.

Aggregated File URL

With everything going well so far, the browser still need to access this file for download so a link must be placed in the HTML to point to this file. The file in cache wouldn't be available for download from this location so instead a file is used to access it using the Joomla!'s API and make the contents available for download. This file is /plugins/system/jch_optimize/assets/jscss.php. This is the file that must be included in the page source HTML so, a query is appended to the url to pass information to the file regarding the information it is to access to provide for the browser. This link is placed either at

• the first found javascript link that was removed
• the last found javascript link that was removed, or
• the bottom of the page directly before the ending body tag

If everything went well, then if you viewed the source code of your web page you should see empty spaces where the file urls were and you should see a link looking like the one below at one of the above selected locations.

< script type="text/javascript"
src="/plugins/system/assets2/jscss.php?f=9acd7fbbb5367946c27893235b1fd83f&amp;type=css&amp;gz=gz&amp;d=30" ></script>

The f parameter carries the id of the cache file, type indicates whether it is a JavaScript file or CSS file, gz determines whether the contents should be compressed with gzip for optimized download, and d indicates the lifetime of the cache file in days. If your server has the mod_rewrite module loaded you can make use of the htaccess option to have a more aesthetic looking url.

 <script type="text/javascript"
src="/plugins/system/jch_optimize/assets/gz/30/bf82248fa6fb8873a36129174656c66e.js" ></script>

CSS Links

A similar process is done for the css files with the exception that a little bit more processing has to be done with these files. CSS tends to have a lot of background images defined and the urls are likely to be relative to the original CSS files. All these urls then have to be corrected relative to the root of the site so the images can be correctly referenced from wherever the cache file is placed.

Additionally W3C specifications stipulate that @import declarations should be placed at the very top of CSS files so these are reordered appropriately in the aggregated CSS file. There is also an option to aggregate the contents of these imported urls if these files are internal so that http requests can be further minimized.

The URL is placed directly below the title element.

<title>Welcome to the Frontpage</title>
< link rel="stylesheet" type="text/css"
href="/plugins/system/jch_optimize/assets/gz/30/d792de74e4b0bbf53a04bb78dfb691140.css" />

The Sprite Generator

The plugin also has the option of combining background images in a sprite to further reduce http requests for individual background image files. This was achieved with slightly modified code from this online CSS sprite generator.

Requirements

In order for it to work you have to have the following PHP extensions installed and loaded:

• EXIF
• GD or IMAGICK

You can check your phpinfo() to see if these are installed. If not, even when you select this option the plugin will work but there'll be no sprite generation. This feature will be unavailable.

How it works

The plugin scans the combined CSS file for suitable background images to combine in the sprite. Suitable images would be background images with the no-repeat attribute set and having the default background position. That means background position of "left top", "0 0", or any combination of these values.

There are also options to exclude these images if they are diaplayed incorrectly. The multi-select option list used for the exclude settings makes it easy to find the images you want to exlude. Additionally you can include other images that were not included by default. The multi-select include option lists the other images with no-repeat attributes. Spriteme is an excellent tool that can assist in determining the images that can be optionally included in the sprite.

How to know if it's working

The sprite image files are created under the images directory from which they can be accessed using the Media Manager in the admin backend. The sprites are created and kept in a jch-optimize folder. From here images no longer used can be deleted. Additionally, you can check the combined CSS file by accessing the respective url in the page source to see the name of the sprite that replaced the background images in the file. You can identify the name of the sprite from a csg- prefix.