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 .

Enable
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.

[Important]Important

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.

[Tip]Tip

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. To determine which files to exclude, read the section, Resolving Conflicts by Excluding Offending Files .

[Note]Note

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.

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.

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. Consider the following example.

Example 5.1. Excluding While Preserving Execution Order

Let's examine the following CSS files that occur in the HTML source of a web page.

<link href="/media/css/joomla-fontawesome.min.css" rel="stylesheet" />
<link href="/media/css/colors_standard.min.css" rel="stylesheet" />
<link href="/media/css/template.min.css" rel="stylesheet" />
<link href="/media/css/awesomplete.css" rel="stylesheet" />
<link href="/media/css/joomla-alert.min.css" rel="stylesheet" />

Now if we excluded the /media/css/template.min.css file, then the HTML output would be:

<link rel="stylesheet" href="/media/com_jchoptimize/cache/css/79986...eec2be.css" />

<link href="/media/css/template.min.css" rel="stylesheet" />
<link rel="stylesheet" href="/media/com_jchoptimize/cache/css/79986...fc0691.css" />

1

Combined file containing contents from the /media/css/joomla-fontawesome.min.css and /media/css/colors_standard.min.css files.

2

The excluded /media/css/template.min.css file.

3

Combined file containing contents from the /media/css/awesomeplete.css and /media/css/joomla-alert.min.css files.


Excluding JavaScript Files

Like CSS files, JavaScript files, by default, are excluded while preserving execution order. Additionally, since the combined JavaScript files are moved to the bottom of the section, either the <head> or <body> depending on the settings, the excluded files will be moved to the bottom of the section too. However, you can choose to ignore execution order. 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. You can also choose not to move the JavaScript files to the bottom of the page to have them remain at their original location.

[Important]Important

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.

Procedure 5.1. Excluding files and inline scripts

Using the following code as example, this article will demonstrate how to use the Exclude JavaScript settings on the JavaScript tab on the Options page.

<script src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXX-XX"></script>
<script>
	window.dataLayer = window.dataLayer || [];
	function gtag(){dataLayer.push(arguments);}
	gtag('js', new Date());

	gtag('config', 'UA-XXXXXXX-XX');
</script> 
                        

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 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.

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

          Add item to exclude
          Add Item To Exclude
      3. When the item is selected or added, you'll see options to 'Ignore execution order' and/or 'Don't move to bottom'. Since in this particular case we're sure the file has no dependency on other files, and that the location of the file in the document is important, we select both.

        Exclude javascript ignoring execution order
        Exclude JavaScript While Ignoring Execution Order
    • Excluding files from a particular extension

      1. To exclude all the files from a particular extension, use the setting called Exclude JavaScript files from these extensions.

      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 www.googletagmanager.com. 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.

        [Tip]Tip

        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 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.

        [Tip]Tip

        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.

While the example used here is for excluding JavaScript files and scripts, the same principle can be used with CSS files and styles and any other setting that uses these multiselect options. Only JavaScript exclude settings, however, will provide an option to ignore execution order, or Don't move to bottom.