How The Plugin Speeds Up Your Site

Let's consider that the total time to download a webpage is divided into two main sections.

  1. In the first instance, after the browser's request is received by the server, the Content Management System (CMS) generates the HTML based on the request and outputs the HTML to the browser;
  2. And the second part, the time it takes for the browser to download and parse the HTML, and download and execute the associated resource files whose links were embedded in the HTML.

The plugin reduces the time taken for the second part by intercepting the generated HTML on the server and optimize both the HTML and the files to download before it is sent to the browser. The plugin can perform several optimization techniques based on what features are configured. These optimizations minimize the number of http requests the browser makes to download the page, and reduce page size and results in faster page loading times, reduced server load and lower bandwidth requirements for your website.

The core function of the plugin is to combine CSS files and javascript files together respectively to reduce http requests so that is what will be discussed in a little detail here. The plugin offers other features such as Sprite Generator, Lazy Load Images, CDN/Cookieless domain support, Optimize CSS Delivery, and Optimize Images.

The Content Management System will generate the HTML to be sent to the browser using PHP as the server side script. 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:

Example 1.1. A typical link to a javascript file

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

JCH Optimize uses these 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:

Example 1.2. JCH Optimize generated links on various CMS platforms

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 and the browser is parsing the HTML, 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, of course, would contain the combined contents 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 about 2 seconds to optimize the page but on subsequent requests, the plugin should run in less than 100 milliseconds on an average server.