How can I use gzip compression for .css and .js files on my sites?

I worked for several days to get gzip compression while working on sites that I have on my shared hosting server. I had a certain level of success, but unfortunately the .css and .js files are not counted, despite all my efforts. Since I use shared hosting, I do not have access to the apache configuration file, so I resorted to using my .htaccess file to achieve this.

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

# 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 using Google PageSpeed ​​v1.12, it shows that the following files were not 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 GIDZipTest website , it confirms that compression is enabled, but when I check the above .css and .js files, it says that they are not compressed.

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

+7
source share
2 answers

AddOutputFilterByType DEFLATE text/css sets deflate compression, 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 this fails, uncomment the compress line and comment out the x-deflate . gzip is not part of the standard Apache installation , so install gzip module if deflation is not enough. As a last resort, create gzipped versions of your CSS and JS files .

+12
source

I think you are missing AddOutputFilterByType DEFLATE text/javascript . By adding this, I fixed this problem.

+1
source

All Articles