Combining CSS and Javascript files

Combining CSS and javascript files successfully into one can be a bit more complicated than it seems and is not a process that is easily reproducable from one website to the next. What works for one site doesn't quite work for the other but the plugin comes with a multiplicity of settings to ensure there's an option for everyone who is trying to optimize their site by combining files together. However, configuring these options can be a daunting task, especially for non-technical users, so the plugin groups six pre-configured settings together as six Automatic Settings. Users can now just choose the best setting that works for them without worrying about the detailed granular settings.

The options that are available in this feature are as follows:

Automatic Settings

The Automatic Settings are are six pre-configured settings that automatically configure the granular settings in the Automatic Settings Group to make configuring the plugin easy. These settings determine how the CSS and javascript files are combined together respectively. The settings are represented by six buttons labelled Minimum, Intermediate, Average, Deluxe, Premium, and Optimum.

Automatic Settings

The Automatic Settings

The Automatic Settings configure the settings that enable the combining of CSS and javascript files, determine which files are combined together, minify the combined files and the HTML, and determine where the links to the combined files are placed in the HTML. The individual settings configured by the Automatic Settings are found in the Automatic Settings Group that normally appear in a collapsed section below the Automatic Settings.

HTML minification level

If Minify HTML, setting is enabled, then this setting determines the level of minification. There are three options to choose from, the first being the default setting.

  1. Basic.  All runs of whitespace outside elements are reduced to one space. If a line end is included then it is reduced to one line end instead.

  2. Advanced.  In addition to Basic minification, HTML comments are reduced and whitespaces are removed from around block elements such as <div> and undisplayed elements like <meta>

  3. Ultra.  In addition to Advanced minification, redundant HTML attributes like text/javascript are removed and quotes are removed from some selected attributes if you're not using an XHTML document. So id="login-form" becomes id=login-form.

Combine files delivery

When the css or javascript files are combined together, they can either be loaded as static files, or with the use of a PHP file to fetch the combined static content and from cache and load it on the page.

  1. Static css and javascript files.  The individual files are combined and loaded as combined static css and javascript files

  2. PHP with query.  The plugin uses a PHP file to fetch the combined css or javascript file from cache. A query is appended to the ur to provide the PHP file with information on how to retrieve the correct content. The generated link to the combined file that is inserted in the HTML will look like this on a Joomla! platform:

    /media/plg_jchoptimize/assets2/jscss.php?f=d59eb7c31bb5db3d6836588a8771c109&type=js&gz=gz&i=0

  3. PHP using url rewrite with .htaccess.  As above but the plugin uses an .htaccess file to perform url-rewriting to remove the query and make the link appears like a static file. So the link is rewritten to look like this instead:

    /media/plg_jchoptimize/assets/gz/0/a25144b9a665ba4f60e0ae89c835d961.js

    The advantage of using url-rewriting is that, besides making the link look more aesthetic, this promotes proxy caching as some DNS or proxy servers will not cache a filename if it contains a query.

  4. PHP using url rewrite (Without Options +FollowSymLinks).  As above except that an .htaccess file that doesn't contain the directive Options +FollowSymLinks is used instead as this is prohibited in .htaccess files by some servers' configuration.