JavaScript CSS – How to Gzip Merged JS

.htaccesscssgzipjavascript

Yes, I've read Alan Storm's suggestion, but I can't really call it a solution. My Gzip compression is configured correctly, only the merged css and js files aren't compressing (according to Google PageSpeed Insights). Does anyone have a solution?

The linked suggestion also notes that you should configure Gzip for the media/css and media/js folder too. I don't really understand this, because those files seem nowhere excluded from the global Gzip htaccess rule (Magento rule which is commented by default.)

edit: additional information:

Gzip

gzip compression => enabled

Zlib

zlib.output_compression => Off => Off
zlib.output_compression_level => -1 => -1
zlib.output_handler => no value => no value

.htaccess

<IfModule mod_deflate.c>

############################################
## enable apache served files compression
## http://developer.yahoo.com/performance/rules.html#gzip

# Insert filter on all content
###SetOutputFilter DEFLATE
# Insert filter on selected content types only
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript

# Netscape 4.x has some problems...
#BrowserMatch ^Mozilla/4 gzip-only-text/html

# Netscape 4.06-4.08 have some more problems
#BrowserMatch ^Mozilla/4\.0[678] no-gzip

# MSIE masquerades as Netscape, but it is fine
#BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

# Don't compress images
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary

# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary

</IfModule>

Response headers merged JS file 1 (Magento core JS)

Accept-Ranges: bytes
Connection: Keep-Alive
Content-Length: 547528
Content-Type: application/javascript
Date: Fri, 10 Jul 2015 09:51:35 GMT
Etag: "23f7c0-85ac8-51a6e0082dfbb"
Keep-Alive: timeout=1, max=100
Last-Modified: Thu, 09 Jul 2015 09:37:20 GMT
Server: Apache
Vary: User-Agent

Response headers merged JS file 2 (skin JS)

Connection: Keep-Alive
Date: Fri, 10 Jul 2015 09:53:04 GMT
Etag: "23f7c4-2ef94-51a6e00835cbb"
Keep-Alive: timeout=1, max=99
Server: Apache
Vary: User-Agent

Best Answer

Change this .htaccess line:

AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript

to:

AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript text/x-js application/x-javascript application/javascript

and it should compress the merged js/css files. If you look at the "Content-type:" line in your headers, it shows:

Content-Type: application/javascript

which does not match the generic AddOutputFilterByType.

Related Solutions

Magento – How to GZIP the merged JS file

Here is an answer that Allan Storm gave someone on StackOverflow (credit goes to him):

When Magento merges any CSS and Javascript files that pass through its rendering system, it will create URLs for those resource like this, and add them to the head of the page

http://magento1point6point1.dev/media/css/a438f0287fdd0c52d9bd196d355a63c3.css
http://magento1point6point1.dev/media/js/0567fb98ebe279ea4faf5acf433fc6a1.js

in turn, this will generate files on the filesystem

media/css/a438f0287fdd0c52d9bd196d355a63c3.css
media/js/0567fb98ebe279ea4faf5acf433fc6a1.js

At this point, Magento is removed from the process almost completely (there's a RewriteCond %{REQUEST_URI} !^/(media|skin|js)/ in .htaccess to catch non-existant files). It sounds like you have gzip compression setup correctly for other areas of the site. So, however you've configured other folders for gzip compression, configure media/css and media/js to do the same.

To read the whole question read: Gzip on merged CSS/JS files in Magento

How to Enable Gzip Compression in Magento

Make sure mod_deflate is on in Apache. You can check by creating an info.php file and calling phpinfo();. It will output server PHP / Apache specs in the browser. Don't forget to remove it when you're done!

Then add the following to your htaccess file

<IfModule mod_php5.c>
    ## enable resulting html compression
   php_flag zlib.output_compression on
</IfModule>

<IfModule mod_deflate.c>

    ## Force compression for mangled `Accept-Encoding` request headers
    <IfModule mod_setenvif.c>
        <IfModule mod_headers.c>
            SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
            RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
        </IfModule>
    </IfModule>

    ## Compress all output labeled with one of the following media types.
    <IfModule mod_filter.c>
        AddOutputFilterByType DEFLATE "application/atom+xml" \
                                      "application/javascript" \
                                      "application/json" \
                                      "application/ld+json" \
                                      "application/manifest+json" \
                                      "application/rdf+xml" \
                                      "application/rss+xml" \
                                      "application/schema+json" \
                                      "application/vnd.geo+json" \
                                      "application/vnd.ms-fontobject" \
                                      "application/x-font-ttf" \
                                      "application/x-javascript" \
                                      "application/x-web-app-manifest+json" \
                                      "application/xhtml+xml" \
                                      "application/xml" \
                                      "font/eot" \
                                      "font/opentype" \
                                      "image/bmp" \
                                      "image/svg+xml" \
                                      "image/vnd.microsoft.icon" \
                                      "image/x-icon" \
                                      "text/cache-manifest" \
                                      "text/css" \
                                      "text/html" \
                                      "text/javascript" \
                                      "text/plain" \
                                      "text/vcard" \
                                      "text/vnd.rim.location.xloc" \
                                      "text/vtt" \
                                      "text/x-component" \
                                      "text/x-cross-domain-policy" \
                                      "text/xml"

    </IfModule>

    ## Map the following filename extensions to the specified
    ## encoding type in order to make Apache serve the file types
    ## with the appropriate `Content-Encoding` response header
    ## (do note that this will NOT make Apache compress them!).
    <IfModule mod_mime.c>
        AddEncoding gzip              svgz
    </IfModule>

</IfModule>

Best Answer

Related Solutions

Magento – How to GZIP the merged JS file

How to Enable Gzip Compression in Magento

Related Topic