JS & CSS Compressor + Image Optimization

Customers don't like slow sites.
Studies say that customers leave a website if a page hasn't loaded in 4 seconds. Keep your users engaged by providing a fast performing Magento store.

Search engines don't like slow sites.
Website speed is a ranking factor in Google search.

The Solution

Performance optimization of websites is one of the biggest trends in e-commerce. Many brands are investing in performance optimization, as they know for sure that store performance impacts the shopping experience and overall satisfaction of customers.

JS & CSS Compressor + Image Optimization is a powerful Magento extension for reducing number of requests sent to a web server, image optimization, JS and CSS files merge and minification. Moreover, it supports GZIP, has HTML minify feature, image lazy load, defer parsing of Javascript and merge of image files. Improve your Google PageSpeed and GTMetrix score with Compressor extension — hundreds of happy store owners use Compressor on their live stores. See the full list of features below.

Did you know?

This product is a bundle of two standalone modules, which can be purchased separetely:
• Image Optimizer ($99)
• JS/CSS/HTML Compressor ($119).
You save $69 dollars when purchase this bundle extension!

Image Optimizer

According to httparchive.org, 64% of the page bytes are images. So it is obvious that image optimization is the key way to significantly improve performance of web pages. Image Optimization is a process that reduces file sizes and eliminates excess information. As a result, files have smaller size and are loaded faster. Image Optimizer can work in lossy or lossless modes (image optimization process with or without quality loss).

“JS/CSS Compressor + Image Optimization” extension uses server utilities which are recommended by GTMetrix service. These utilities apply sophisticated algorithms to optimize images so to decrease file sizes.

In addition, our extension has an important feature of image backup in 'media' and 'skin' folders. The backup of images starts before the process of image optimization. If necessary, you can exclude specific images from the optimization.

Image Optimization features

• Optimize JPEG, PNG and GIF images
• Merge images (new and unique feature)
• Lazy load of images
• Set image dimension
• Serve scaled images
• Advanced management of image optimization
• Automatic backups of images
• Check image optimization status

Optimizing Javascript and CSS

Optimization of CSS and Javascript files are the key ways to speed up Magento store performance. An average Magento themes has 150+ of included Javascript and CSS files. Optimization of those files reduces number of requests and decrease file sizes. As a result, it dramatically speeds up Magento speed.

Javascript optimization

• Minify Javascript files
• Merge Javascript files
• Defer Parsing of Javascript
  (fix "render blocking content" issue)
• Inline small Javascript
• Exclude specific Javascript files
• Add 'Expires' headers

CSS optimization

• Minify CSS files
• Merge CSS files
• Inline small CSS
• Exclude specific CSS files
• Defer parsing of CSS
• Add 'Expires' headers

Merge of Javascript and CSS files

When a user opens a page of your website, his browser downloads many page resources: HTML document, Javascript and CSS files, images, fonts and so on. The more files a page has, the slower it loads.

The Merge functionality of the extension allows combining all Javascript and CSS files from the page into one single JS/CSS file. When files are merged, a browser performs only one request to a server to download JS or CSS file of the page, instead of making hundreds of requests. Surely, such optimization significantly accelerate full page loading time.

Minify Javascript and CSS

Time spent on loading JS/CSS files depends on file size: the less the file size is, the faster page load becomes.

Compression allows reducing JS and CSS file sizes by eliminating comments, line breaks, tabulation and space symbols which are not necessary for a browser to ‘read’ the code. Thereby, page loading time decreases without affecting code quality and logic.

Defer Parsing of Javascript and CSS

While rendering HTML document, a browser is downloading resources (JS, CSS and images) the way they appear in the HTML DOM.

Google PageSpeed service recommends moving declaration of JS/CSS to the end of the body, which is called Defer Parsing of Javascript/CSS. As a result, a user will see page content faster. However, we don’t recommend providing defer parsing of CSS (moving them to the end), as a visitor will see a blank page without stylesheets first, and only then a browser will apply CSS code to the HTML document

Inline small CSS

Loading of CSS or JS file has 3 stages:

1. Send a request to server;
2. Wait for the request to be processed at server;
3. Receive response from the server;

It’s better to insert content of small CSS/JS files right into HTML document as they start working only on the 3rd stage. As a result, a page will load faster.

Merge of Images

2.2.0 version of Compressor extension has been enhanced with "Merge of Images" feature. It does not affect page appearance in any way, but it speeds up Magento store by reducing number of image download to one. It's hard to believe, but it works. Instead of making dozens of requests to download each image on product page, a browser will make only one request to download a single image file.

Other features, support and refund policy

• Magento Enterprise FPC support
• Varnish support
• Lifetime free support, bugfixes and extension updates
• Free installation service
• The code of the extension is open - it’s easy to make compatibility with 3rd-party extensions
• 30-day money back guarantee

Image Lazy Load

Lazy load is a technology which allows holding over image loading until a user scrolls to a certain image. The usage of Lazy load improves overall page performance, which works for long pages and catalogues.

Set Image Dimension

Set Image Dimension option is used to add height or weight image attributes if they are absent. It allows avoiding unnecessary repainting of a web-page and rendering pages faster.

Serve Scaled Images

Serve Scaled Images option enhances website performance through saving many bytes of data. It is very useful for mobile devices as such an option allows downloading re-scaled images instead of full-resolution image version.

PotatoCommerce is GTmetrix official partner
for Magento performance optimization.
Learn More →

Questions & Answers

Is Compressor compatible with Redis and Full Page Cache?

Yes, our extension works with Redis for Magento which is used to accelerate work of Magento stores with different types of cache.
Full Page Cache is used to prepare generated cached content and thus, decrease Time to First Byte (TTF). Full Page Cache is a perfect supplement for any store and works with Compressor like a charm.

Is Compressor compatible with CDN?

Our “JS/CSS Compressor + Image Optimization” extension does not work directly with CDN. However, the extension can work with CDN the following way: after the extension have optimized images, you just need to Flush CDN Cache (or upload images to CDN manually if your CDN does not support automatic synchronization).

If you are using Amazon S3 CDN provider, then we recommend you to use our CDN Synchronizer Magento extension which keeps images up-to-date on CDN service.

I have a question about the usage of Compressoor extension

Please check the extension documentation. It has changelog, FAQ and installation guide.

Is installation free? What are the terms for support, license and refund?

Installation service is included in the license price. Support is free and lifetime. Extension updates are free and lifetime either. Refund is available within 30 days. License is per one Magento installation. Learn more: Customer Service, EULA.

I have a question about the usage of Compressoor extension

Please check the extension documentation. It has changelog, FAQ and installation guide.
You can also contact us to recieve email support.

Installation Guide

1. We recommend you to backup your store before installation
2. Go to Magento Admin and disable compilation (Systems > Tools > Compilation > 'Disable' button) and flush store cache (System > Cache Management > 'Flush Magento Cache' button)
3. Download the extension package from your account and extract the downloaded archive.
4. Copy the content of extracted folder to your store's root directory
5. Set 755 permissions on all files in lib/PotatoCommerce/ImageOptimization/tools folder. Important! Otherwise, image optimization will not work.
6. Flush store cache again
7. Log out from the backend and log in again. Important!
8. If you use compilation, then you should run compilation process (Systems > Tools > Compilation > 'Run Compilation Process' button).
9. Go to extension configuration (System > Configuration > PotatoCommerce Extensions > JS / CSS Compressor), enable and configure the extension
10. Disable native CSS and JS merge at System > Configuration > Developer.
11. Flush store cache again

To make the extension working properly on your web-server, please make sure that the following requirements are met:

JS and CSS optimization

1. All javascript errors should be eliminated before merging javascript files. Otherwise, a script with errors can break proper work of other scripts in the merged javascript file
2. If you use Apache, then mod_deflate and gzip should be enabled on your server.

Image optimization

1. exec function should be enabled
2. gdlib library should be installed
3. All files in folder lib/PotatoCommerce/ImageOptimization/tools must have '755' permissions
4. Media and Skin folders must be readable and writable by webserver user.

FAQ

After installing "Compressor" extension my store gives 404 error or a blank page.

Go to Magento Backend, Flush Store Cache (System > Cache Management> 'Flush Magento Cache' button), Logout and Login again.

After enabling "Enable Defer parsing of JavaScript" option my frontend is broken or some script doesn't work.

Go to Magento Backend, Flush Store Cache (System > Cache Management> 'Flush Magento Cache' button). Contact us if the problem persists.

How do I exclude specific scripts or CSS files from being deferred, compressed and minified?

To add an exception just add "po_cmp_ignore" attribute this way: <script type="text/javascript" po_cmp_ignore>. It will force Compressor to ignore this script.
Example of excluding file that included in layout:

skin_js
js/smartheader.js
po_cmp_ignore

Effective from 2.0.0 version of the extension, you can also use flags po_cmp_ignore_move and po_cmp_ignore_minify.
po_cmp_ignore_move ignores only merge and defer (it does not allow to move the node).
po_cmp_ignore_minify does not allow to compress content.
There is also a textarea added to the extension settings, which works same was as po_cmp_ignore flag does - it does not allow to move and compress the node. Strings which are added to the textarea, are being searched within URLs of scripts/styles, or in content if the nodes are inline (<script>...</script>, <style>...</style>).

How can I test my store performance? Can I check that your extension actually works?

We recommend using GTMetrix service. For example, you can test our demo store.

Image Optimization does not work. Why?

If image optimization does not work on your website, then we recommend you to check:

1. Please make sure that exec function is enabled
2. Make sure that Media and Skin folders are readable and writable by webserver user.
3. Make sure that all files in folder lib/PotatoCommerce/ImageOptimization/tools have 755 permissions. If it’s not, then set 755 permissions and try to start image optimization again.
4. If your server is on Ubuntu OS and previos steps did not help you, then please contact us so that we can investigate the issue on the ground.
   If your server is not on Ubuntu OS, then you should check if the applications are installed properly. To make this please do the following:
5. • Go to folder lib/PotatoCommerce/ImageOptimization/tools/unix (go to ‘64’ subfolder as well if you have 64-bit OS)
   • Run the following commands:
       ./optipng -v
       ./jpegoptim --version
       ./gifsicle --version
   • If you receive an error (for example, “segmentation fault (core dumped)”), then please refer to this article to fix this issue.

Which issues in the Google Page Speed / GTMetrix report does the extension fix?

Compressor extension is designed to fix the following issues:

• Defer parsing of JavaScript
• Enable gzip compression (for apache webserver)
• Inline small CSS
• Inline small JavaScript
• Minify CSS
• Minify JavaScript
• Minify HTML
• Leverage browser caching (partially fixed)
• Serve scaled images
• Eliminate render-blocking JavaScript
• Eliminate render-blocking CSS
• Specify Image Dimensions

Other problems can not be fixed automatically and thus can not be fixed by the extension (or by any other competitor's extension). It can be fixed only via web-server configuration and website theme improvement.

Can Compressor minify HTML?

Yes! 1.6.0 version of the Compressor extension was improved with simple HTML minification.

After extension installation there is Fatal error: Class ‘Potato_Compressor_Helper_Data’ not found in /home/www/public_html/app/Mage.php on line 547

It looks like you forgot to disable compilation before installation. If you can't go to Backend > Tools > Compilation and re-run compilation process (because of the fatal error), then you need to disable compilation manually. To do this please open config.php file in 'includes' folder. Find these:
define('COMPILER_INCLUDE_PATH', dirname(__FILE__).DIRECTORY_SEPARATOR.'src');
define('COMPILER_COLLECT_PATH', dirname(__FILE__).DIRECTORY_SEPARATOR.'stat');
you should comment lines like that:
#define('COMPILER_INCLUDE_PATH', dirname(__FILE__).DIRECTORY_SEPARATOR.'src');
#define('COMPILER_COLLECT_PATH', dirname(__FILE__).DIRECTORY_SEPARATOR.'stat');
Admin panel will be alive then. Now you need to go to Backend > Tools > Compilation and re-run compilation process. After that, everything should work fine.

Should I disable native Magento CSS and JS merge at System > Configuration > Developer?

Yes, we recommend to disable native CSS and JS merge. We don't expect any conflicts here, but native merge can slightly slow down the work of our extension. You can disable native merge of files at System > Configuration > Developer.

I need to edit a CSS/JS file. Which file should I edit - original or merged and compessed?

You need to edit original files at 'skin' folder. Do not forget to flush JS/CSS cache after all your changes of CSS files: System > Cache Management > 'Flush JavaScript/CSS Cache' button.
If you use our Full Page Cache extension, then you would need to flush cache of Full Page Cache extension as well.

How to disable Compressor Extension?

Do not disable this module at 'disable module output'! Just go to Compressor settings and set "Enable" option to "No". If you can't access the Magento backend, then you can disable the extension this way - rename file app/etc/modules/Potato_Compressor.xml to Potato_Compressor.xml.OFF

How to unistall the extension?

• Disable compilation (Tools > Compliation) if it's enabled
• Delete file app/etc/modules/Potato_Compressor.xml
• Fluch cache storage (System > Cache Management)
• Delete the following folders and files if they exist:
  • app/code/local/Potato/Compressor
  • app/design/adminhtml/default/default/layout/po_compressor.xml
  • app/design/frontend/base/default/layout/po_compressor.xml
  • app/design/frontend/base/default/template/po_compressor
  • app/locale/en_US/Potato_Compressor.csv
  • lib/Compressor
  • adminhtml/default/default/po_compressor
  • media/po_cmp_image <- do not delete this folder if your want to retain the backup of images!
  • skin/po_cmp_image <- do not delete this folder if your want to retain the backup of images!
  • media/po_compressor <- do not delete this folder if your want to retain the backup of images!
• Remove `table po_compressor_image` from the database
• Run compilation again if necessary.

Image Optimizer - 2.2.1 (13 June 2018)

* Bugfixes

JS/CSS/HTML Compressor - 2.3.1 (27 March 2018)

+ Compatibility with FPC has been improved
+ Default settings were changed
* Fixed an issue with warnings in system.log
* Fixed fotorama.js issue
* Fixed an issue with encoding
* Small bugfixes

Image Optimizer - 2.2.0 (27 March 2018)

+ Optimization utilities have been improved
+ Support of pngquant was added
+ 'Clear all errors' button was intruduced
* Fixed an issue with warning 'Division by zero'
* Small bugfixes

JS/CSS/HTML Compressor - 2.3.0 (25 December 2017)

+ Image scale & dimension features were improved
+ Improved support of responsive design for scale & dimension features
+ Lazy load by visible content
* fixed undefined function issues
* fixed issued with the parser
* fixed issues with FPC

JS/CSS/HTML Compressor - 2.2.2 (12 October 2017)

+ disable on amp pages
* js minify error fix
* file permission setting does not apply to scale images
* size tracking block appears twice

JS/CSS/HTML Compressor - 2.2.1 (06 October 2017)

+ additional configuration options for image merge
+ minify improvement
* error with image scale
* error with image dimension
* incorrect compatibility with FPC

JS/CSS/HTML Compressor - 2.2.0 (12 Septemer 2017)

+ Varnish support
+ EE FPC support
+ Merge images
+ ability to disable module by specific route
* unexpected message in system.log

Image Optimizer - 2.1.1 (12 Septemer 2017)

+ more information for error description
* backup disabled if extension disabled in manual run

JS/CSS/HTML Compressor 2.1.0 (10 August 2017)

+ ability to ignore merge of inline styles/scripts
+ support of CDN with different url regarding base url
+ knockout.js support
+ EE FPC support
* incorrect inline scripts when base url has subfolder
* js error when secure base url
* incorrect join of external css files
* incorrect result if js url has query
* some parser errors
* small bugfix

Image Optimizer 2.1.0 (10 August 2017)

+ cronjob settings
+ file/folder permissions for new files
+ ability to manual start scanning/optimization
* logging error
* small bugfix

JS/CSS/HTML Compressor 2.0.2 (11 July 2017)

+ default file/folder permission option added to settings
+ CDN support
* fix for SM_Market theme
* W3C validation fix
* utf8 fix

Image Optimizer 2.0.1 (11 July 2017)

+ Ability to fast filesystem image search
+ Error logging improved
+ Compatibility with remote optimization service
+ Image grid improved
+ PNG optimization improved
+ JPEG quality system option
* ACL fix
* Fix for absent mime_content_type function
* Cronjob blocking other process
* Unexpected email notification to server administator
* Fix for incorrect scanning of images in filesystem

JS/CSS/HTML Compressor 2.0.1 (14 June 2017)

* Fixed bug with incorrect paths of CSS files

2.0.0 (06 June 2017)

+ Split to 2 extensions
+ Code refactoring
+ Extension logic changed - the extension has become more smart and flexible
+ Exclude scripts/styles from the extension settings
+ Serve scaled images
+ Image lazy load
+ Eliminate render-blocking CSS
+ Specify Image Dimensions
+ Inline small JS/CSS

1.6.1 (05 May 2017)

+ Enable lossy JPEG compression from the extension settings (recommended jpeg compression by Google PageSpeed service)
* Pre-set options updated
* Exec function checker removed
* Bugfixes

1.6.0 (24 Feb 2017)

+ HTML optimization (minify)
+ An option to choose cache directory for merged js/css files
* Bugfixes

1.5.1 (01 Dec 2016)

* Bugfixes

1.5.0 (13 Oct 2016)

+ Image Optimization Improvement:
+ Ability to set custom path to optimization libraries
+ Ability to set custom application options

1.4.2 (02 Aug 2016)

* Bugfixes

1.4.1 (14 Jul 2016)

* Bugfixes

1.4.0 (13 Jul 2016)

+ Image Optimization Improved
* Bugfixes

1.3.0 (09 Nov 2015)

* SUPEE-6788 security patch compatibility

1.2.0 (02 Jun 2015)

+ Ability to move JS files to body end
+ x64 UNIX support for image optimization
+ Add 'defer' attribute to script tag improve
* Bugfixes

1.1.1 (29 Apr2015)

+ Ability to ignore some scripts in defer parsing

1.1.0 (17 Mar 2015)

+ Image optimization
* Small bugfix
* Code refactoring
* Performance and stability improvements

1.0.3 (17 Sep2014)

* Bugfix

1.0.2 (26 Jun 2014)

* Bugfix

1.0.1 (28 May 2014)

* Big extension cache folder size problem fixed

1.0.0 (17 Mar 2014)

The initial release