Minification

Introduction

Minification is the process of removing all unnecessary characters from source code, without changing its functionality. These unnecessary characters usually include white space characters, new line characters, comments, and sometimes block delimiters, which are used to add readability to the code but are not required for it to execute.

NitroPack has a built-in minifier of CSS, JavaScript and HTML resources. You can access it from OpenCart Admin Panel > Nitro > Settings > Minification.

It saves the minified content in the following directories:

  • assets/css/ (for CSS files)

  • assets/js/ (for JavaScript files)

  • system/nitro/cache/pagecache/ (for HTML files)

Your PHP user must have write permissions for these directories.

The Minification panel is divided into 3 actionable areas:

minification_css
  1. Global settings that apply to the Minification functionality in general

  2. CSS, JavaScript and HTML specific settings - the options provided in this section determine the way the minifier behaves for each of these resource types

  3. Content preparation functions

Global Settings

  1. Use Minification (Enable / Disable) - This switch controls whether NitroPack will use minification or not. When this is disabled, none of the other settings on this page have any effect.

  2. Exclude external domains (Yes / No) - Setting this to Yes will override the exludes defined in the CSS and JavaScript section (explained below) and will exclude all your external-domain hosted resources from minification. If set to No, the CSS and JavaScript excludes will not be overriden.

CSS minification

minification_css

We will go through each option, provided by the NitroPack CSS minifier. The options are visible in OpenCart Admin Panel > Nitro > Settings > Minification > CSS files:

1. Minify CSS files (Yes / No) - Enable / Disable CSS minification by NitroPack

2. Combine CSS files (Yes / No) - Enabling this option will combine all your CSS files into 1 file per media type. This will increase the loading speed, since the browser will get all of the necessary CSS code in 1 request, instead of queing up and waiting on multiple requests.

This option does not combine the following types of files:

  • Files excluded in the option Exclude files

  • Files which are dynamically loaded with JavaScript after your HTML has been served to the user browser

  • Code, which is excluded in the option Exclude inline <style> tags containing the phrase

NoteThis option does not depend on the value of Minify CSS files. In other words, you can combine CSS files without minifying them.

3. Combine CSS files for media all and screen (Yes / No) - Select whether to combine CSS files from media screen and all into a single file. Because NitroPack combines the CSS files grouped by media type, by default it will put the files from screen and all into separate cache files. However media screen and all can usually be combined into a single file.

4. Improved CSS detection algorithm (Yes / No) - Many CSS resources are usually hard-coded into the template files, instead of being loaded using OpenCart's functions for the purpose, which makes them undetectable by other extensions. By enabling this option, NitroPack will scan the HTML code in order to detect the hard-coded resources and optimized them as well.

NoteNitroPack page cache must be enabled if you wish to use this option. Do this from Cache Systems > Page cache.

5. Parse import statements (Yes / No) - This will try to fetch the content of the imported with @import CSS resources and include it in the combined file.

NoteIf you want to use this option Combine CSS files must be enabled.

6. Move detected CSS to (Advanced) - In the context of this option Top refers to the beginning of the <head> section of the HTML code and Bottom to the end of the <body> section of your pages. Traditionally CSS is placed at the Top, in order to get a good looking page from the initial render. If placed at the Bottom the page will load faster, but the initial render will have no styles, so it will appear as a news article. It will be re-rendered once the CSS is loaded. Use Bottom if you want to fix render-blocking CSS reported by PageSpeed. If Bottom is selected, consider generating Base CSS in order to have a nice looking page from the initial render. For further information please take a look at this article.

7. Exclude files (Advanced) - Each file on a new line. The files you specify here will be excluded from minification and combination. This also applies to files detected with the improved CSS detection algorithm. You can also enter part of the file name. For example adding "bootstrap" will exclude all bootstrap CSS resources.

8. Exclude inline <style> tags containing the phrase (Advanced) - Use this field if you want to exclude a specific <style> tag from the minification. Each phrase on a new line. This applies to hard-coded <script> tags detected with the improved JavaScript detection algorithm. Use only phrases that uniquely identify the <style> tag that you want to exclude.

9. Position excluded styles (Advanced) - Use this option to select the position (in the final HTML) of the excluded styles relative to the combined file if you have configured excludes or the Exclude external domains option is enabled.

10. Clear minified CSS files cache - Use this button to delete all NitroPack-generated CSS cache files. These files are stored in the assets/css/ directory. Your PHP user needs write permissions to this directory in order to delete the cache files.


JavaScript minification

minification_javascript

IMPORTANTNitroPack JavaScript minification is available only on servers running PHP 5.3+. It is not available on PHP 5.2 and older.

We will go through each option, provided by the NitroPack JavaScript minifier. The options are visible in OpenCart Admin Panel > Nitro > Settings > Minification > JavaScript files:

1. Minify JavaScript files (Yes / No) - Enable / Disable JavaScript minification by NitroPack

2. Combine JavaScript files (Yes / No) - Enabling this option will combine all your JavaScript files into 1 file. This will increase the loading speed, since the browser will get all of the necessary JavaScript code in 1 request, instead of queing up and waiting on multiple requests.

This option does not combine the following types of files:

  • Files excluded in the option Exclude files

  • Files which are dynamically loaded with JavaScript after your HTML has been served to the user browser

  • Code, which is excluded in the option Exclude inline <script> tags containing the phrase

NoteThis option does not depend on the value of Minify JavaScript files. In other words, you can combine JavaScript files without minifying them.

3. Combine inline JavaScript (Yes / No) - Select whether to combine JavaScrpt inlined in <script> tags. This option is only having effect if the Improved JavaScript detection algorithm is enabled

4. Improved JavaScript detection algorithm (Yes / No) - Many JavaScript resources are usually hard-coded into the template files, instead of being loaded using OpenCart's functions for the purpose, which makes them undetectable by other extensions. By enabling this option, NitroPack will scan the HTML code in order to detect the hard-coded resources and optimized them as well. Examples of a hard-coded JavaScript resources:

<script type="text/javascript">
    $('h2').show();
</script>

<script type="text/javascript" src="http://my-domain.com/path-to-local.js"></script>

NoteNitroPack page cache must be enabled if you wish to use this option. Do this from Cache Systems > Page cache

5. Move detected JavaScript to (Top / Bottom) - Choose where to put the detected JavaScript files. In most cases it would be best to place the detected code at the bottom of the page. Chosing Bottom will help you fix render-blocking issues.

6. Defer detected JavaScript (Yes / No) - Choose whether to load your JavaScript resources asynchronously using the defer attribute. Usually deferred loading is faster, because it loads the scripts concurrently, but it may also cause dependency errors. You can try to set this option to Yes. If it causes unexpected behavior with your JavaScript, you can return the value to No. This option is visible only if Combine inline JavaScript is enabled. More information can be found here:

https://developers.google.com/speed/pagespeed/service/DeferJavaScript

7. Exclude files (Advanced) - Each file on a new line. The files you specify here will be excluded from minification and combination. This also applies to files detected with the improved JavaScript detection algorithm. You can also enter part of the file name. For example adding "jquery" will exclude all jQuery JavaScript resources.

8. Exclude inline <script> tags containing the phrase (Advanced) - Use this field if you want to exclude a specific <script> tag from the minification. Each phrase on a new line. This applies to hard-coded <script> tags detected with the improved JavaScript detection algorithm. Use only phrases that uniquely identify the <script> tag that you want to exclude.

NoteMake sure to input code, which is between the opening and closing <script> tags. For example if we have the following inline JavaScript code:

<script type="text/javascript">
    $('h2').show();
</script>

We can use only parts of the following code:

$('h2').show();

9. Clear minified JavaScript files cache - Use this button to delete all NitroPack-generated JavaScript cache files. These files are stored in the assets/js/ directory. Your PHP user needs write permissions to this directory in order to delete the cache files.


HTML minification

minification_html

This feature allows you to minify the HTML content, served by NitroPack's page cache functionality. This means that NitroPack page cache must be enabled if you need to use HTML minification. Enable it from Cache Systems > Page cache.

The content is saved in the following directory:

system/nitro/cache/pagecache/

Your PHP user must have write permissions for this directory.

The following options are available in OpenCart Admin Panel > Nitro > Settings > Minification > HTML files:

  1. Minify HTML files (Yes / No) - Choose whether to minify the HTML or not

  2. Keep HTML comments (Yes / No) - Choose whether to keep or to remove HTML <!-- --> comments. Does not apply for conditional Internet Explorer comments. More information here:

http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx

Pre-Minify resources

This feature will scan your OpenCart installtion for CSS and JavaScript resources and pre-minify the found files. This will speed up the initial page cache creation time significantly.

To start the process click the Pre-minify resources button.

Extract base CSS

This feature will scan your site's appearance and will prepare CSS which can be inlined in the HTML to provide initial styling rules when the CSS is moved to the Bottom of the pages. This means that you can move CSS to the bottom and still have nice looking website right from the first render. For more information, please read this article.

To start the process click the Create base CSS cache button.