Minify CSS and JavaScript

Combining CSS and JavaScript Files

Minification is the process of removing whitespace and any code that is not necessary to create a smaller but perfectly valid code file. Minifying CSS and JavaScript files improve performance by reducing payload sizes and script parse time.

JCH Optimize minifies CSS and JavaScript files when it combines them together in the Combine CSS and JavaScript files feature. The Minify CSS and Minify JavaScript settings are just two individual settings, which along with a set of collective granular settings, form the Combine CSS and JavaScript feature and can be configured using the Combine Files Automatic Settings section on The Dashboard . This can be considered the core feature of the component since several other features rely on this feature. It is highly recommended when optimizing the site with JCH Optimize that you configure this feature first and ensure it is working well with the site before enabling other features.

The Combine Files Automatic Settings.  Combining CSS and JavaScript files with JCH Optimize involves the configuration of a multiplicity of granular settings. To simplify this task, there are six automatic settings provided, each corresponding to a preset configuration of these settings. The automatic settings are Minimum, Intermediate, Average, Deluxe, Premium, Optimum. Moving from Minimum to Optimum enables more of the granular settings and provides more optimization for the site. Typically, when configuring the component, one would try each in turn, checking the site for conflicts to see which is the highest setting that works with the site.

Using the automatic settings on the dashboard to configure the combine files feature, Intermediate and any higher setting will enable the Minify CSS and Minify JavaScript settings.

Intermediate Setting
Intermediate and above enables CSS and JavaScript minification

The Combine Files Configurations.  These are a few settings, apart from the setting configured by the Combine Files Automatic Settings that affect how the Combine CSS and JavaScript feature runs. You will find these in the Combine CSS and JavaScript files section on The Options Page .

This enables or disables the Combine CSS and JavaScript files feature, effectively disabling all the settings in the Automatic Settings Groups.
Smart Combine
Combines files into several smaller files than just one to take advantage of better files delivery offered by HTTP/2 supported servers. This groups files that appear together across pages into one file to effectively utilize browser caching.
Cache lifetime

The lifetime of the combined files generated by the component and other cache generated in other processes not including Page Cache.


If you're using a separate Page Cache plugin then be sure to set this at least two times higher than the lifetime set for your Page Cache plugin to avoid links to combined files being cached on the page but have subsequently been expired and deleted.

HTML minification level

If Minify HTML is enabled, this will determine the level of minification. The incremental changes per level are as follows:

  • Basic.  Adjoining whitespaces outside of HTML elements are reduced to one whitespace; HTML comments are preserved.

  • Advanced.  HTML comments, whitespace around block elements and undisplayed elements are removed. Unnecessary whitespaces inside of elements and around their attributes are removed.

  • Ultra.  Redundant attributes such as type="text/javascript" and quotes around attributes that don't contain characters that need to be quoted are removed.

Combined files delivery

Determines how the combined files will be generated. The various options are as follows with the Static CSS and JavaScript files being the default:

  • Static CSS and JavaScript files.  Combined files are generated and loaded as static CSS or JavaScript files respectively.

  • PHP with query.  The jscss.php file is loaded with a query containing information including the cache id that will be used to load the contents of the combined files.

  • PHP using URL rewrite with .htaccess.  The URL of the combined file will appear as a static CSS or JavaScript file but will be in fact a rewritten URL to the jscss.php file, the different components of this URL providing the query information for the PHP file to retrieve the combined contents.


If you are using a server that is not configured to compress the static files then you can choose one of the PHP options to have the combined files compressed using PHP.

Use try-catch
This will wrap the content from each JavaScript file inside a try-catch block to try to isolate incoming errors from the rest of the contents of the combined file.

Excluding Files And Inline Scripts

How to Exclude Offending Files or Inline Codes

When you combine files with the Combine CSS and JavaScript files feature, sometimes it is necessary to exclude a file or script to resolve a conflict. There are settings on the CSS and JavaScript tab on The Options Page provided to exclude these files. You must however, first determine which file(s) to exclude so first read the section, Resolving Conflicts by Excluding Offending Files .


If you are experiencing trouble with a particular extension, it doesn't necessarily mean that you need to exclude the files from that particular extension. When the files are combined, any file with errors can affect the rest of combined files.

By default, when files are excluded, JCH Optimize attempts to preserve the original execution order of the files on the page by breaking the combined file around the excluded file. However, on the JavaScript tab, there is a section that allows for JavaScript files to be excluded without preserving the original execution order of the files on the page. This generally provide better optimization since combined files above excluded files are not deferred or loaded asynchronously but can break dependencies on files and break your pages.


Only exclude files without preserving the original execution order of the page if you're absolutely sure there are no dependency relationship with other files to avoid breaking your page.

When you click inside the textbox of an Exclude setting, it will normally show a drop-down list of items for you to select which one to exclude. These items are substrings of urls of files, or codes that appear in the inline <script> or <style> declaration blocks.

Drop down list in exclude setting

Drop down list in exclude setting.

If you don't see any items in the drop-down list or do not see the item you wish to exclude, you can easily add it by typing in the item in the textbox then clicking the Add item button on the right. The drop-down list is not populated on some servers,based on how it's configured but this is a minor issue since you can still exclude any file you want by adding them to the drop-down list manually.

Procedure 5.1. Excluding files and inline scripts

Using the following code as example, this article will demonstrate how to use the Exclude settings.

	<script async src=""></script>
		window.dataLayer = window.dataLayer || [];
		function gtag(){dataLayer.push(arguments);}
		gtag('js', new Date());

		gtag('config', 'UA-XXXXXXX-XX');

Here we have a JavaScript file and a declaration block of inline script. This particular one is for adding Google Analytics to your site. Google Analytics must always be excluded to work well so this example may prove useful for most people.

  1. Choose one or more of the following steps depending on what you are trying to exclude.

    • Excluding files

      1. To exclude a file, use the setting(s) called Exclude CSS/(JavaScript) files.

      2. Click in the text-box then select the url of the file you want to exclude. If the file name is too long it will appear truncated in the drop-down list with three dots preceding the truncated file url. In this particular case you'll probably see .../gtag/js.

      3. If you're not seeing this you can add it by typing any part of the url, for eg., , googletag, or gtag, then click the Add item button. Do NOT type the three dots.

    • Excluding files from a particular extension

      1. To exclude all the files from a particular extension (plugin), use the setting(s) called Exclude CSS/(JavaScript) files from these extensions/(plugins).

      2. You'll see the folder name of the extensions in the drop-down list here, or the domains of external files. In this example you should see Select the extensions or domains of files that you want to exclude. The folder name of the extension is that part of the url between two successive slashes that corresponds to the folder that all the files from this extension is stored under.

      3. Typically you can add any part of the file name that occurs between two successive slashes, representing a folder in the hierarchy of that file, to the drop-down list. Any file with this folder in their url will be excluded.

    • Excluding inline declaration blocks

      1. To exclude a block of inlined code, use the setting(s) called Exclude individual internal STYLES/(SCRIPTS) declarations.

      2. Each item in the drop-down list will be the first few words occurring in the declaration block, for eg., window.dataLayer=window.dataLayer||[.... The code will be shown minified and truncated following by three dots. Select the scripts you want to exclude.

      3. To add an inline script that is not shown in the drop-down list, you can type any substring that occurs in the script, for eg., function gtag(), dataLayer.push, or gtag('js' etc. Be sure that whatever substring you choose to use only occur in the scripts(s) you're trying to exclude. Try to avoid including any part of the code that would probably change on the next page load.

  2. Save your settings. Items that were added will no longer appear in the list on the next page load if your settings were not saved.