Question

I am using the YUI compressor plugin to compress and gzip JS and CSS files within my Java EE application.

However, I am not clear on how to reference them within my HTML/JSP files.

If I simply use the .gzip reference, the browser obviously complains saying –

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

The current reference looks like this (which throws 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 is working by checking the response headers on the CSS and JS files by inspecting via firebug or developer tools.

Gzipping is typically done at the web server level.

If you’re using 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 look up mod_gzip or mod_deflate

This goes in your root .htaccess file but if you have access to httpd.conf that is better.

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