Some features are only available in the Pro version. Visit the downloads page to see the feature comparison between the Free and Pro version.
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.
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...
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_optimizeAt 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.
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
fparameter carries the id of the cache file,
gzdetermines whether the contents should be compressed with gzip for optimized download, and
dindicates 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.
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 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.
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.
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.
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
The plugin offers six pre-configured Automatic settings to make configuring the plugin easy. The settings are called Minimum, Intermediate, Average, Deluxe, Premium, and Optimum. The level of optimization increases as you go from left to right but the risks of conflicts also increase. Just try different ones and choose the highest one that works for your site without creating conflicts. Remember Optimum may not work for everyone so if that doesn't work try Premium or Deluxe instead.
The Automatic Settings automatically configure the settings in the Automatic Group. Don't try configuring these granular settings manually as you'll likely to break your website if you don't know what you're doing. If you're having trouble please try using the Automatic Settings before submitting for support. The following table indicate how the Automatic Settings configure the settings in the Automatic Group.
|Combine CSS files||Yes||Yes||Yes||Yes||Yes||Yes|
|Exclude all extensions||Yes||Yes||No||No||No||No|
|Replace @import in CSS||Yes||Yes||Yes||Yes||Yes||Yes|
|Include PHP and external files||Yes||Yes||Yes||Yes||Yes||Yes|
|Include Inline CSS styles||Yes||Yes||Yes||Yes||Yes||Yes|
There are some Utility Settings to perform some useful functions to ensure the plugin works smoothly and to further speed up your website. Some of these options may not be available depending on the framework you are using.
The settings in this group are automatically configured by the Automatic settings. Do not attempt to change these setting manually to configure the plugin. They generally would be in a collapsed div but are still made available because they are useful in troubleshooting an issue.
These settings are only available in the Pro version.
document.writefunction are ignored.
Your server configuration may prevent the plugin from creating these multi-select option lists, or the plugin for some reason may not be able to find the links. This does not adversely affect the operation of the plugin and in these cases text-areas are provided for you to type in the urls of the files you want to exclude. Comma separate multiple entries.
Selecting files for exclusion does not prevent them from showing on the page. It merely excludes them from the aggregation process so they are not combined with the rest of the files. The original link will not be altered.
This setting requires that your server is configured with url rewriting in order to work. The auto option tries to detect if this is enabled and will automatically use rewriting to remove the query section of the link to the combined file to promote proxy caching if you're using CDN. If you're sure your server supports this and it works then you should select yes. If not, select no. Auto is selected by default.
Url to the combined file without url rewriting:
Url to the combined file using url rewriting:
If you're not configuring the plugin and in 'production mode' keep this option off to optimize your site.
If you're not trying to debug the plugin to find errors keep this option off to avoid creating a huge log file.
The published order of the plugin is important and can in some instances determine how well the plugin performs with other third party component. To see the published order, filter for system plugins in Plugin Manager. The plugin should be low in the order with only the system cache plugin and a few select plugins under. Read this FAQ knowledgebase article on more information on how this plugin should be ordered.
This is an experimental feature that may not work on your site. It will be improved in future releases so use cautiously for now and enable only after you've finished configuring your site to see if it works for you. If you're experiencing issues with your site not displaying correctly, disable this feature first before requesting support.
Please note that even though the image appears in the exclude options list and therefore was selected for inclusion in the sprite by the plugin, there's no guarantee that it actually made it to the sprite. For eg. the file could be corrupted and therefore could not be manipulated by the image library installed on your server. In these cases the image declarations will be left untouched in the CSS. You'll have to check the image in Media Manager or in the CSS file to confirm which images are in fact included in the sprite.
Front-end optimizations refer to modifications you make to the HTML and files downloaded by the browser to make your web page download faster. These actions generally result in reduced http requests by the browser, smaller page sizes and ultimately, shorter page load times. This is very important for website owners who are interested in retaining visitors to their site as research has shown that visitors tend to leave the site if the page takes more than 4 seconds to download.
As a rule of thumb, every 10 http requests adds one second to your download time. Using a CMS, it is not unusual to see a website requiring approximately 100 http requests as the website grows and the administrator adds plugins to provide more features and pages expand to boast numerous images. JCH Optimize provides an easy way to do these optimizations automatically, which otherwise would be tedious and error-proned to do manually, without making any changes to your original code or files. With an easy-to-configure interface, the plugin makes faster websites a reachable goal for even non-technical users.
This is a relatively over-simplified explanation of how the plugin works but it gives the general idea. Combining files can be considered the core feature of the plugin and this feature is available in both the Free and Pro versions. The other optimization features are performed in a similar manner, where the HTML is intercepted in the CMS and regular expressions are used to identify the areas of interest to do modifications to the HTML before it is sent to the browser.
These optimizations may sound time-consuming of themselves and one would wonder if they are actually gaining on one end but losing on another. Well the plugin uses state of the art techniques that were developed in house to perform these optimizations at blazing speed. Additionally the plugin caches time-consuming tasks so the optimizations are not done on every page load. Typically it would take 2-3 seconds to optimize the page but on subsequent requests, the plugin should run in less than 100 milliseconds on an average server.