About JCH Optimize

JCH Optimize is an add-on plugin for use on some Content Management Systems (CMS) that performs several front-end optimizations to speed up your website. These optimizations include, combining css and javascript files into one to reduce http requests, minifying the combined files and HTML to reduce page size, generating sprite from select background images to further minimize http requests, lazy loading images, providing CDN support for static resources, optimizing CSS delivery, and optimizing images. Some of these features are only available in the Pro version of the plugin. JCH Optimize is currently available for websites running on Joomla!, WordPress, Magento, and Drupal.

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.

How it Works

A Content Management System will generate the HTML to be sent to the browser using some server side script like PHP. The plugin intercepts the generated HTML in the CMS before it is sent to the browser and optimizes it, then sends it to the browser. It uses Regular Expressions to find the links to the CSS and javascript files in the HTML and removes them. An example link to a javascript file would look like this:

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

JCH Optimize uses the links to access the contents of these files and after minifying the contents, it combines them all in one file respectively and saves them in cache. The plugin generates a link to access the cached file and inserts this link in the HTML in place of the links it previously removed. The generated link by JCH Optimize might differ slightly based on the CMS it is running on. The following shows what the javascript links might look like based on the CMS used. The CSS links would be similar:

Joomla!

<script src="/media/plg_jchoptimize/assets/gz/1/0/2ee14a780ae90820956b94bd8e8ced79.js"></script>

WordPress

<script src="http://localhost/wp-content/plugins/jch-optimize/assets/wp-content/plugins/gz/1/0/3238d2219d061b694aa587964e1c391f.js"></script>

Magento

<script src="/js/jch_optimize/assets/gz/30/0/1b6d7e1158492ee20c302713697fb8e9.js"></script>

Drupal

<script src="/sites/all/modules/jch_optimize/assets/sites/all/modules/nz/30/0/d5971aff44c89a0657dbced470282ab7.js"></script>

Now when the HTML is sent to the browser, it encounters only one link for the CSS files and one link for the javascript files. It uses these links to access the combined file that was generated by the plugin. The combined file, ofcourse, would contain the combined content of all the files that were previously on the page. So by making only one http request, as opposed to several for the individual files, the download time of the page is optimized.

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.