7

I have been toiling for days to get gzip compression working on the websites I have on my shared hosting server. I've had a certain level of success but sadly .css and .js files are being left out, despite my best efforts. Since I'm using shared hosting, I have no access to the apache configuration file, so I have resorted to using my .htaccess file to achieve this.

The site I'm currently working on is Peak Heat, running Wordpress, and below is the .haccess file I'm using:

# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/js
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 week"
</IfModule>
## EXPIRES CACHING ##

<IfModule mod_headers.c>
  <FilesMatch "\.(js|css|xml|gz)$">
    Header append Vary Accept-Encoding
  </FilesMatch>
</IfModule>

<ifModule mod_gzip.c>
  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
  mod_gzip_item_include handler ^cgi-script$
  mod_gzip_item_include mime ^text/.*
  mod_gzip_item_include mime ^application/x-javascript.*
  mod_gzip_item_exclude mime ^image/.*
  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

When I check the site using Firebug v1.8.3 with Google PageSpeed v1.12, it shows that the following files haven't been compressed:

/wp-includes/js/jquery/jquery.js?ver=1.6.1

/wp-content/themes/peak-heat/script/global.js

/wp-content/plugins/contact-form-7/jquery.form.js?ver=2.52

/wp-content/themes/peak-heat/style.css

/wp-content/plugins/contact-form-7/scripts.js?ver=3.0

/wp-content/plugins/contact-form-7/styles.css?ver=3.0

/wp-content/plugins/testimonials-widget/testimonials-widget.css

Checking the website URL itself with the online GIDZipTest site, it confirms that compression is enabled, but when I check the above .css and .js files, it says that they're not compressed.

What can I do to include all .css and .js files when compressing my site?

zxon
  • 71
  • 1
  • 1
  • 2
  • Have you got other `.htaccess` files/rules which match these files? – Rob W Oct 09 '11 at 15:47
  • Are your html files getting compressed? – mahnsc Oct 09 '11 at 15:50
  • @Rob W - I've just checked through all the sub-folders. There are no other .htaccess files on the site. – zxon Oct 09 '11 at 16:00
  • @mahnsc - Yes, HTML files are being compressed. – zxon Oct 09 '11 at 16:01
  • Can you/have you added the same .htaccess file as a test to your `/wp-content/themes/peak-heat/` directory to see whether styles.css will come in compressed? – mahnsc Oct 09 '11 at 16:07
  • @mahnsc - I've copied the .htaccess file into `/wp-content/themes/peak-heat/` as you've suggested, and it hasn't made a difference I'm afraid. – zxon Oct 09 '11 at 16:13
  • This is intriguing. Can you add the `ServerTokens ProdOnly` directive to your root .htaccess file? I'm curious to see if the apache version string will get stripped from requests to your default home page and the styles.css page. – mahnsc Oct 09 '11 at 16:45
  • @mahnsc - I've added `ServerTokens ProdOnly` to the root .htaccess file, and it resulted in an Internal Server Error (500). The error logs say `ServerTokens not allowed here` – zxon Oct 09 '11 at 17:10
  • Thanks to you both for helping me out to solve this problem. It turned out to be a misconfiguration with my hosts. They've corrected it and gzip compression is now working. Sadly they didn't tell me what they changed, though. I would post this as an answer but I can't self-answer my question for another few hours since I'm new here. – zxon Oct 09 '11 at 17:39
  • Please see the other similar post http://stackoverflow.com/questions/5846376/gzip-compression-through-htaccess-not-working – Shamaila Tahir Oct 12 '11 at 17:06

2 Answers2

12

AddOutputFilterByType DEFLATE text/css sets the compression to deflate, not gzip, so use filesMatch and set the Content-Encoding header to x-deflate:

<filesMatch "\.(js|css)$">
Header set Content-Encoding x-deflate
# Header set Content-Encoding compress
# Header set Content-Encoding x-gzip
</filesMatch>

If that fails, uncomment the compress line and comment the x-deflate line. gzip is not part of the standard Apache installation, so install the gzip module if deflate is not sufficient. As a last resort, create gzipped versions of your CSS and JS files.

Paul Sweatte
  • 24,148
  • 7
  • 127
  • 265
  • when i use this code in my magento its css and js stop working – user2477139 Nov 28 '13 at 16:43
  • This worked for me :) One question, Is there any way to compress external files? Google saying "cdn1.livechat.com/mife.js" could save 14kb, but its an external file. Any idea how to load it compressed? – user2997826 Jan 25 '14 at 00:12
  • @user2997826 If you need to compress external files, there are some [similar](http://stackoverflow.com/questions/3003596/google-cdn-not-gzipping-jquery) [questions](http://stackoverflow.com/questions/4330771/gzipping-content-in-akamai) which cover this, but this is CDN specific. – Paul Sweatte Jan 27 '14 at 22:22
  • @Paul Sweatte: When i have used this code in the .htaccess file then css & js don't load on the DOM. Do you have any another way to compress the js & css files ? – Nipun Tyagi Jan 29 '14 at 07:20
  • @user1640432 There a link at the end of the answer with an alternate approach. – Paul Sweatte Jan 29 '14 at 18:16
1

I think you're missing AddOutputFilterByType DEFLATE text/javascript. Adding that fixed the issue for me.

Nandan Sawant
  • 136
  • 1
  • 2