Minify HTML CSS JS for Magento

Compatible with both Magento v2 and Magento v1!

(Two separate versions of the extension. One for Magento v2 and one for Magento v1.)

Speed Up Your Magento Site For Free!

Works great with Image Optimizer (also FREE)!

Minification is the process of removing all unnecessary characters from source code without changing its functionality - e.g. code comments and formatting, removing unused code, using shorter variable and function names, and so on. After minification code is smaller in size which means fewer bytes will be transmitted from your server to your customer's web browsers which makes your site pages load faster. Besides small speed increase search engines (especially Google) will give you a plus in the SEO department (Search Engine Optimization). So you should Minify your code.

For Magento v2

Apptrian Minify HTML CSS JS is a very small and efficient extension. It will minify HTML code including inline CSS and JavaScript code. Merging and Minification of CSS and JavaScript files is already a built-in feature of Magento 2 and newer, therefore, our extension does not influence this functionality in any way. The extension is very easy to install and use. Compatible with FPC and Varnish cache extensions. If there is a serious error in some page code that page will not be minified. The extension will log the error and URL of the page where this error occurs so developers can track it down and fix the code.

Compatible with Breeze frontend without the need for an additional compatibility module. It works out of the box.

Compatible with Hyvä frontend without the need for an additional compatibility module. It works out of the box.

For Magento v1

Apptrian Minify HTML CSS JS is a very small and efficient extension. It will minify HTML including inline CSS and JS code. Minification of CSS and JS files is compatible with the default Magento CSS and JS file merger. There are no complex setups nor query strings on minified CSS and JS files. The extension is very easy to install and use. Compatible with FPC and Varnish cache extensions. If there is a serious error in some page code that page will not be minified. The extension will log the error and URL of the page where this error occurs so developers can track it down and fix the code.

Features

• An easy way to enable or disable HTML Minification.
• Option to set Maximum HTML Minification.
• Cache Compatibility Mode option for HTML minification.
• Option to remove important comments or not.
• An easy way to Minify CSS and JavaScript files with a button click. (This feature is only present in the Magento v1 version of the extension. Magento v2 already has a file minification feature.)

Pre Installation Instructions for Magento v2

Do the following Before you install Minify HTML CSS JS extension!

- If you are using "Expires Header" turn it off temporarily.
- If you are using CDN turn it off temporarily.
- Go to your Magento Admin and enable merging and minification of CSS and JavaScript files:
Stores > Configuration > Advanced > Developer > CSS Settings
Stores > Configuration > Advanced > Developer > JavaScript Settings
Flush and Refresh Magento cache (System > Cache Management)
Run the following command:
php bin/magento setup:static-content:deploy
- Use HTML, CSS, and JS validators to check your website. Warnings can be ignored but errors must be fixed. (Some errors can be ignored like the ones regarding HTML attributes.)
- After you fixed everything only then install and use our extension.

Pre Installation Instructions for Magento v1

Do the following Before you install Minify HTML CSS JS extension!

- If you are using "Expires Header" turn it off temporarily.
- If you are using CDN turn it off temporarily.
- Go to your Magento Admin and enable:
System > Configuration > Developer > CSS Settings > Merge CSS Files
System > Configuration > Developer > JavaScript Settings > Merge JavaScript Files
Flush and Refresh Magento cache (System > Cache Management)
- Visit the homepage, one CMS page, one category page, one product page, cart page, and checkout page and wait for all of them to fully load (do not interrupt). This is done so Magento default merger can merge CSS and JS files, and some extensions add CSS and/or JS files only on specific pages not globally.
- Use HTML, CSS, and JS validators to check your website. Warnings can be ignored but errors must be fixed. (Some errors can be ignored like the ones regarding HTML attributes.)
- After you fixed everything only then install and use our extension.

Installation Instructions for Magento v2

There are several ways you can install any Magento extension. Our extension is no different. We will show you four ways to install the extension, but you must not mix them. Choose one and stick to it.

If you do not know how to install an extension or you wish a professional to do it for you, we offer an additional installation service for a small fee.

Installation via file uploading
(If you purchased the extension on our site)

If you purchased the extension on our site then unpack .zip file from /Magento2/InstallByUploadingFiles/ directory inside your Magento root.
- Run following commands on Magento root directory:

php bin/magento maintenance:enable

php bin/magento module:enable --clear-static-content Apptrian_Minify

php bin/magento setup:upgrade

php bin/magento cache:flush

php bin/magento setup:static-content:deploy

php bin/magento maintenance:disable

php bin/magento cache:flush

Installation via Composer
(If you purchased the extension on our site)

If you purchased the extension on our site and you want to install the extension via composer public and private keys. (To find your public and private keys, login to your Apptrian.com customer account and look at the My Downloadable Products section.)
- Run following commands on Magento root directory:

php bin/magento maintenance:enable

composer config --auth http-basic.packages.apptrian.com $PUBLIC_KEY $PRIVATE_KEY

composer config repositories.apptrian-minify composer https://packages.apptrian.com/minify/

composer require apptrian/minify

php bin/magento module:enable --clear-static-content Apptrian_Minify

php bin/magento setup:upgrade

php bin/magento cache:flush

php bin/magento setup:static-content:deploy

php bin/magento maintenance:disable

php bin/magento cache:flush

Installation via Composer by using artifact
(If you purchased the extension on our site)

If you purchased the extension on our site then copy .zip file from /Magento2/InstallWithComposer/ directory inside your MAGENTO_ROOT/vendor/apptrian/packages/ directory (create directory if does not exist).
- Run following commands on Magento root directory:

php bin/magento maintenance:enable

composer config repositories.apptrianartifacts artifact $(pwd)/vendor/apptrian/packages

composer require apptrian/minify

php bin/magento module:enable --clear-static-content Apptrian_Minify

php bin/magento setup:upgrade

php bin/magento cache:flush

php bin/magento setup:static-content:deploy

php bin/magento maintenance:disable

php bin/magento cache:flush

Installation via Composer
(If you purchased the extension on Magento Marketplace)

If you purchased the extension on Magento Marketplace then you must use Composer. Magento Marketplace does not allow extension downloads.
- Run following commands on Magento root directory:

php bin/magento maintenance:enable

composer require apptrian/minify

php bin/magento module:enable --clear-static-content Apptrian_Minify

php bin/magento setup:upgrade

php bin/magento cache:flush

php bin/magento setup:static-content:deploy

php bin/magento maintenance:disable

php bin/magento cache:flush

Please make sure your Magento public and private keys are in your Magento root auth.json file. Usually, people install Magento with one Magento Marketplace account (public and private keys) and then purchase an extension with another Magento Marketplace account (different public and private keys). Check the Magento Marketplace account you used to purchase the extension and make sure its public and private keys are in the Magento root auth.json file. WARNING! if you already have keys there, be very careful because maybe some other extensions are purchased with another Magento Marketplace account.

If you do not know how to install an extension or you wish a professional to do it for you, we offer an additional installation service for a small fee.

(If you purchase Installation Service please contact us via the contact form on our site and state your full name and order ID)

Installation Instructions for Magento v1

- Log in to Magento Admin
- (Optional) Disable Magento Compiler if you are using it (System > Tools > Compilation)
- Go to System > Magento Connect > Magento Connect Manager
- If you purchased an extension on our site use "Direct package file upload" and upload the .tgz file
- If you purchased an extension on Magento Marketplace use "Install New Extensions" and paste the extension URL key
- Go back to Magento Admin
- Refresh Magento cache (System > Cache Management), then log out from Magento Admin and log back in
- (Optional) Enable Magento Compiler by clicking "Run Compilation Process" button (System > Tools > Compilation)
- Enable (System > Configuration > Developer > CSS Settings > Merge CSS Files)
- Enable (System > Configuration > Developer > JavaScript Settings > Merge JavaScript Files)
- Flush and Refresh Magento cache (System > Cache Management)
- Visit several pages of your site on the frontend and wait for them to fully load. (Visit homepage, one CMS page, one category page, one product page, cart page, and checkout page. This is done so Magento default merger can merge CSS and JS files, and some extensions add CSS and/or JS files only on specific pages, not globally.)
- Click Minify button and wait for CSS/JS files to be minified.
- (Optional) If you are using Expires header for CSS and JS files remember to empty your web browser's cache.
- (Optional) If you are using CDN make sure you flush/empty the CDN cache.

If you do not know how to install an extension or you wish a professional to do it for you, we offer an additional installation service for a small fee.

(If you purchase Installation Service please contact us via the contact form on our site and state your full name and order ID)

Configuration for Magento v2

Our extension works out of the box. The only thing you need to do is to enable it in extension configuration. To do this, log in to your Magento Admin and go to:

Stores > Configuration > Apptrian Extensions > Minify HTML CSS JS

All options are self-explanatory and have tooltips for additional information.

After changing options make sure you refresh your Magento cache (System > Cache Management).

Configuration for Magento v1

Our extension works out of the box. The only thing you need to do is to enable it in extension configuration. To do this, log in to your Magento Admin and go to:

System > Configuration > Apptrian Extensions > Minify HTML CSS JS

All options are self-explanatory and have tooltips for additional information.

After changing options make sure you refresh your Magento cache (System > Cache Management).

Enable System > Configuration > Developer > CSS Settings > Merge CSS Files
Enable System > Configuration > Developer > JavaScript Settings > Merge JavaScript Files

Visit several pages of your site on the frontend and wait for them to fully load. (Visit homepage, one CMS page, one category page, one product page, cart page, and checkout page. This is done so Magento default merger can merge CSS and JS files, and some extensions add CSS and/or JS files only on specific pages, not globally.)

Then go to our extension config System > Configuration > Apptrian Extensions > Minify HTML CSS JS > Minify CSS and JavaScript and click the "Minify" button.

This extension is FREE, however, support is NOT

Please understand that we get more than a few emails almost every day asking for support. In most cases, problems are lack of basic Magento knowledge and not reading Installation Instructions. Due to our other projects, we do not have time to answer all of them. Because of this, we cannot provide free support for our free extensions. However, we offer very affordable support options for this extension on our site.

FAQ for Magento v2

Q: Why after enabling minification my pages are all mangled up / have missing parts?
A: You probably have errors in your HTML/CSS/JS code. One stray tag is enough to cause this behavior. Before you enable minification you must have an error-free code. Turn minification off, use the W3C validator to find errors and fix them.

Q: Why are not all CSS/JS files merged and minified?
A: First of all external(off-site) CSS/JS files will not be merged and minified. For example:
Minifying https://platform.linkedin.com/…ork?v=0.0.2000-RC8.41700-1420&lang=en_US could save 2KiB (5% reduction) after compression.
This happens if you use a Linkedin button, this file is on the Linkedin server not on your server it is their responsibility to minify it, not yours, your Magento installation nor our Minify extension.
Second, all CSS/JS must be properly included in Magento via .xml file (for example page.xml of your theme). Some extensions might hardcode link and script tags into .phtml templates, these files will not be merged by Magento default file merger (Magento does not know about them because they are not properly included) and subsequently, will not minify them.
Third, Merging and Minification of CSS and JavaScript files is already a built-in feature of Magento 2 and newer, therefore, our extension does not influence this functionality in any way.

Q: Why do Google PageSpeed Insights report that CSS/JS files are not fully minified? (1)
A: Sometimes it is because gzip compression is turned off on your server. Use your .htaccess file to enable it.

<IfModule mod_deflate.c>
    # Compress text, html, javascript, css, xml:
    AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript
</IfModule>

Q: Why do Google PageSpeed Insights report that CSS/JS files are not fully minified? (2)
A: Sometimes Google PageSpeed Insights will report that CSS/JS files are not fully minified. For example:
Minifying https://www.apptrian.com/…a/js/6a3cfa142fd20a7dc62423f1c15e4ad9.js could save 648B (1% reduction) after compression.
This is normal. Some of the CSS/JS files/libraries published by Google also have above or similar complaints from Google PageSpeed Insights.
Minifying https://apis.google.com/…/cb=gapi.loaded_0 could save 684B (2% reduction) after compression.
If Google itself cannot satisfy its own Google PageSpeed Insights testing tool, then what chance anyone else has. :-D
Rest assured your files are properly minified, by the tools recommended by Google, so just ignore these types of complaints from Google PageSpeed Insights.

FAQ for Magento v1

Q: After enabling "Minify HTML" I get "JSMin: Unterminated String at byte ..." on the frontend?
A: This happens when you have errors in your inline JavaScript. Examples would be:
ga('set','something', 'Women's'); un-escaped single quote
or if you have JSON object that has un-escaped new lines just before closing double quotes.
These are all errors and our extension is only exposing these errors. We wrote in our extension, you must have an error-free code if you want minification to work.

Q: Why after clicking the "Minify" button and success message, when I look at the files from my browser they are not minified?
A: You are probably using Expire Headers on CSS and JS files (Leverage browser caching). Your browser is showing you the cached (old) version of the files. To quickly check if your files are minified use Google Page Insights or a similar testing utility.

Q: Why after enabling minification my pages are all mangled up / have missing parts?
A: You probably have errors in your HTML/CSS/JS code. One stray tag is enough to cause this behavior. Before you enable minification you must have an error-free code. Turn minification off, use the W3C validator to find errors and fix them.

Q: Why are not all CSS/JS files merged and minified?
A: First of all external(off-site) CSS/JS files will not be merged and minified. For example:
Minifying https://platform.linkedin.com/…ork?v=0.0.2000-RC8.41700-1420&lang=en_US could save 2KiB (5% reduction) after compression.
This happens if you use a Linkedin button, this file is on the Linkedin server not on your server it is their responsibility to minify it, not yours, your Magento installation nor our Minify extension.
Second, all CSS/JS must be properly included in Magento via .xml file (for example page.xml of your theme). Some extensions might hardcode link and script tags into .phtml templates, these files will not be merged by Magento default file merger (Magento does not know about them because they are not properly included) and subsequently, our Minify extension will not minify them.

Q: Why do Google PageSpeed Insights report that CSS/JS files are not fully minified? (1)
A: Sometimes it is because gzip compression is turned off on your server. Use your .htaccess file to enable it.

<IfModule mod_deflate.c>
    # Compress text, html, javascript, css, xml:
    AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript
</IfModule>

Q: Why do Google PageSpeed Insights report that CSS/JS files are not fully minified? (2)
A: Sometimes Google PageSpeed Insights will report that CSS/JS files are not fully minified. For example:
Minifying http://www.apptrian.com/…a/js/6a3cfa142fd20a7dc62423f1c15e4ad9.js could save 648B (1% reduction) after compression.
This is normal. Some of the CSS/JS files/libraries published by Google also have above or similar complaints from Google PageSpeed Insights.
Minifying https://apis.google.com/…/cb=gapi.loaded_0 could save 684B (2% reduction) after compression.
If Google itself cannot satisfy its own Google PageSpeed Insights testing tool, then what chance anyone else has. :-D
Rest assured your files are properly minified, by the tools recommended by Google, so just ignore these types of complaints from Google PageSpeed Insights.

Q: When I click the "Minify" button in extension configuration I get a "Connection reset" error?
A: If you are on Windows you must set your Apache properly. (It is a common problem when working with long regular expressions in PHP). You need to increase Apache's stack size. The best way to alter the Apache's stack size is using the ThreadStackSize directive in the Apache's configuration file. Here is how to do it.

In your Apache httpd.conf file uncomment #Include conf/extra/httpd-mpm.conf like this.

# Server-pool management (MPM specific)
Include conf/extra/httpd-mpm.conf

Then in conf/extra/httpd-mpm.conf file set ThreadStackSize to 8388608. Something like this:

<IfModule mpm_winnt_module>
    ThreadStackSize 8388608
</IfModule>

It sets Apache's stack size to 8 MB, so it is the same as a default value on Linux.

Q: After clicking the "Minify" button I get a white screen in the web browser?
A: Delete all files in the following directories: media/css, media/css_secure, and media/js then visit several pages of your site on the frontend and wait for them to fully load. (Visit homepage, one CMS page, one category page, one product page, cart page, and checkout page. This is done so Magento default merger can merge CSS and JS files, and some extensions add CSS and/or JS files only on specific pages, not globally.) After you do this click the "Minify" button again and wait for it to finish.

Q: After clicking the "Minify" button my site is all mangled up or not working?
A: You probably have errors in your CSS and/or JS files. Delete all files in the following directories: media/css, media/css_secure, and media/js then visit several pages of your site on the frontend and wait for them to fully load. (Visit homepage, one CMS page, one category page, one product page, cart page, and checkout page. This is done so Magento default merger can merge CSS and JS files, and some extensions add CSS and/or JS files only on specific pages, not globally.) After you do this use CSS and JS validators to check your code and fix errors before you try to minify again. Just before you want to try minification again repeat the process of deleting files in media/css, media/css_secure, and media/js directories and visiting several pages on your frontend.

A Word From the Author

Thank you very much for your interest in Minify HTML CSS JS extension. You can rest assured that by choosing this extension you are getting a high-quality product despite the fact it is free. The same professional approach, dedication, and care are invested in this product as if it is paid one. If you find this product useful and want to say "thanks" you can do that by rating it and writing a short review about it on Magento Marketplace. Also, you can like, share and follow us on Facebook, Pinterest, and Twitter.

If you have any questions about extension or Magento in general feel free to contact us.