Link to gzip compressed CSS and JS in HTML / JSP

Question

I use the YUI compressor plugin to compress and gzip JS and CSS files in my Java EE application.

However, I do not know how to reference them in my HTML / JSP files.

If I just use the .gzip link, the browser explicitly complains, saying:

Resource interpreted as Script but transferred with MIME type application/x-gzip

The current link looks like this (which causes the above error):

 <script type="text/javascript" src="/scripts/home.js.gz"></script> 

Answer 1

You reference them with the normal .js and .css extensions and check if gzip works by checking the response headers for CSS and JS files, checking them using firebug or the developer tools.

Gzipping is usually done at the web server level.

If you use tomcat, you can open the conf / server.xml of your Tomcat installation and add the following to the Connector definition.

 <Connector port="8080" protocol="HTTP/1.1" redirectPort="8443" connectionTimeout="20000" compressableMimeType="text/html,text/xml,text/css,text/javascript,text/plain,application/javascript,application/json" compression="2048"/> 

For Apache, find mod_gzip or mod_deflate

This applies to your root .htaccess file, but if you have access to httpd.conf it is better.

 <ifModule mod_deflate.c> <filesMatch "\.(js|css)$"> SetOutputFilter DEFLATE </filesMatch> </ifModule> 

Answer 2

What you see is a warning in your browser, it will show this at any time when you interpret the data differently than the returned content type.

What you are really trying to do is the following:

 Content-Type: text/javascript Content-Encoding: gzip 

This will remove the browser error and also allow the browser to recognize that this file must be uncompressed before use.

Answer 3

Although you can configure tomcat to run all gzip for you, I recommend manually pinning your static resources, such as js and css files, and saving them on your server as css.gz or js.gz , then you can use the servlet to send these static and pre-compressed files to the client when the request arrived.

See https://gist.github.com/suprememoocow/1570654 for a servlet implementation.

If your server has a built-in mechanism for copying gzip files, you can go with it. As far as I know, tomcat (7) does not have this function yet.