Compression reduces response times by reducing the size of the HTTP response. Gzip is the most popular and effective compression method currently available and generally reduces the response size by about 70%.
In 2009, 90% of internet traffic travelled through browsers that supported. Gzip. Today:
All modern browsers support and automatically negotiate GZIP compression for all HTTP requests: our job is to ensure that the server is properly configured to serve the compressed resource when requested by the client.
On an Apache-based server, you can do that through the `.htaccess` file:
# BEGIN GZIP
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
</ifmodule>
# END GZIP
That’s essentially a list of MIME types that gzipping will then apply to. Feel free alter the list to all text based assets you serve.
The HTML5 Boilerplate project offers server configs for all the popular servers. This is it’s version for .htaccess
<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>
What happens to the 10% who don’t support it?
The file is not Gziped then
I AM THE 1%
They eventually opt in
add this in gzip
Header set Cache-Control “max-age=290304000, public”
Under Apache 2 better use mod_deflate
Why is deflate better under Apache 2?
I’ve never understood how to get GZIP working. By just copying this into the .htaccess it will GZIP all my content?
Some server don’t support it. This might be the reason, why it’s not working for you. The example above will compress the follwing file types:
– text
– html
– xml
– css
– js
Important is not the file extension, but how the server handles the files. Images – no matter what format – will not be compressed with this setting. This wouldn’t make sense, because all image types already use compression in one way or the other. And these compression methods are much more effective in handling bitmaps (image data).
It will gzip the dir under which the file “.htaccess” resides in.
Does this have a downside?
What happens in browsers which do not support gzip when using this?
I have a question as a .htaccess noob.
How does this code work?
I have added it to mu .htaccess file and Yslow in FireBug says that I do not have gzip compression?
Any ideas
i want to know where is the located .htaccess file where is put this above code and also tell me whats the procedure to do this gzip/deflat integration.
i have add that string but did not work. my server use apache 2
I use this one for gzip and deflat
# BEGIN GZIP
# mod_gzip compression (legacy, Apache 1.3)
<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|xml|txt|css|js)$
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>
# END GZIP
# DEFLATE compression
<IfModule mod_deflate.c>
# Set compression for: html,txt,xml,js,css
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript
# Deactivate compression for buggy browsers
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html
# Set header information for proxies
Header append Vary User-Agent
</IfModule>
# END DEFLATE
what do you think about this code?
Just gave it a test and worked great, thanks!
I have a page load javascript which lets me know what the load time is. After I added this to the .htaccess file in my public_html root my sites load time went from around 2.2-1.5 seconds on mobile to 0.8-0.4.
Less than HALF A SECOND.
Optimize your CSS, enter this…mind blowing.
Thank you, sir!
Fantastic, many thanks.
Have just checked one of my test sites and it’s compressed to over 70%!
I have added this to httpd.conf. Is this ok or should you always add this code into .htaccess files where needed?
Thanks again,
James
Hi I cant gzip my files. I could not understand more from searching over the internet. I installed apache tomcat(version 6). Put the var file in webapps. created an httpd.conf file and put it in conf folder. I dont know more. Please help me. Copied the above snippets into it. But I cant find any changes.
So, where does this code go? Is it just a PHP file that you stick in the root directory of your site?
Thanks man! Really helped me speed up my website.
I use this to gzip my php pages
php_value output_handler ob_gzhandler
it doesn’t work with flush() in php
does any compression work with flush()
You should also add
image/svg+xml
.The title of the article is “Active Gzip Compression” but you’re using mod_deflate! “”
For GZIP you need to use mod_gzip!!
e.g. “”
Ref: http://www.parorrey.com/blog/webmaster-tasks/enabling-gzip-compression-on-your-website-on-apache-via-htaccess/
Hi,
I used it but still my YSlow says gzip require for css and js files
Thank You very Much ! !
Page Speed Score 92/100 ;))
We’ve just released a free beta service that allows web developers to check for gZIP (and other performance metrics such as resource load time) on all page resources.
We think this is the fastest, most simple way to check for gzip. We’ve kept in mind that people don’t want to be overwhelmed with data, so the results that you get are straight to the point.
gzipWTF
This is superb. If old browsers don’t support it, then fine. I’m a firm believer in building for the future. Thanks Chris.
Thank you very much, compressed my site by 69.9% which is what you said it would. Site running much quicker than before.
Hi,
I have a question regarding gzip.
Suppose the server adds the “Content-Encoding: gzip” header.
But, the actual content is not gzipped (assuming the compression failed and it is sending the data without compression). What will be the impact of this?
How will http clients (especially browsers) handle this?
Thanks,
Narendra
My server always crashes when forcing Gzip, I had to do it in PHP, any ideas?
same here…
Are you using a hosting company? Each hosting company is different. Most of them support it but require you to enable it. If you search through their Q and A section usually someone has already asked the questions and an answer was given.
For example I use Hostmonster, so I had to do this in order to enable it for my website. In the article it shows I had to edit my php.ini folder first to enable it then add the code to the .htaccess file.
If you don’t have the .htaccess file then you simply just create one and add it. HTML5 Boilerplate has a great .htaccess file that covers most of what is used in the industry.
http://goo.gl/t4381
I have a 2 MB png image in my header. There is no way I could decrease the size of the image, it would look too lossy. Is there a way to compress that image in htaccess? This snippet works good for me, 2.7x.
In no way ever is a 2mb image a good idea. Get a hold of photoshop and save for web and devices for goodness sake. If you’re still having troubles with the image size on the png, then maybe the image is not suited as a png, and you need to combine the png with the background behind it and turn it into a jpg. A header image should be 100th the size of this. What if somebody is accessing your site on a metered connection (mobile device) and paying good money to see your 2mb masterpiece?
You can use tinypng.org to compress your PNG without any loss in quality and size. :D
How about this?
Sorry for the last comment, didn’t display properly. Here is the code again. Just replace the “[” and “]”with “<” and “>” respectively.
Hello,
Sorry incorrect characters when posting here, need to be replaced…
Here is what my host admin did:
\# Optimization
ExpiresActive On
ExpiresDefault A0
\# Cache media for 1 year (forever).
[FilesMatch “\.(gif|jpg|jpeg|png|gif|bmp|swf)$”]
ExpiresDefault A31536000
Header append Cache-Control “public”
[/FilesMatch]
\# Setup 2 hour caching on commonly updated files
[FilesMatch “\.(xml|txt|html|js|css)$”]
ExpiresDefault A1209600
Header append Cache-Control “proxy-revalidate”
[/FilesMatch]
[FilesMatch “\.(php|cgi|pl|py|rb|rhtml|htm)$”]
ExpiresActive Off
Header set Cache-Control “private, no-cache, no-store, proxy-revalidate, no-transform”
Header set Pragma “no-cache”
[/FilesMatch]
[IfModule mod_deflate.c]
AddOutPutFilterByType DEFLATE text/html text/plain text/xml
[IfModule mod_setenvif.c]
# 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
# NOTE: Due to a bug in mod_setenvif up to Apache 2.0.48
# the above regex won’t work. You can use the following
# workaround to get the desired effect:
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
# Don’t compress images
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary
[/IfModule]
[IfModule mod_headers.c]
# Make sure proxies don’t deliver the wrong content
Header append Vary User-Agent env=!dont-vary
[/IfModule]
[/IfModule]
Thank you, I tested that code and it really worked perfectly
+1 to André von Kugland add SVG to the mime list.
Also put it in the apache httpd.conf file if you have control over that. .htaccess files can slow a site down by about 5% (I read it somewhere google it) each request to the site for css, image, or html requires apache to read the htaccess before responding to the request. Putting it in httpd.conf means it will be read once on apache start up.
Our SEO packages are economical and offer every activity
needed to achieve high search engine rankings. But discovering something new which will yield better results will be more rewarding.
SEO on Google Zebra will be focused on creating useful, transparent and unique data, but
the main change will be the power social signal has.
i need to compress my code with gzip compression using ASP.NET 3.5… any solution ???
i used below code but its not working on online website… its work on localhost IIS
<system.webServer>
</system.webServer>
Please check below code for above Question
use below work for me
BEGIN GZIP
mod_gzip compression (legacy, Apache 1.3)
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|xml|txt|css|js)$
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.
END GZIP
DEFLATE compression
Set compression for: html,txt,xml,js,css
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript
Deactivate compression for buggy browsers
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html
Set header information for proxies
Header append Vary User-Agent
END DEFLATE
Just lost. Need help. We are hosted on a share server, and it seems the service provider cannot alter the server settings. And compression is not enabled. Now what is that we can do.
We have primarily HTML pages and the website is designed using Asp.Net. How to compress the html pages using gzip?
Please help.
Hi,
I did what was I supposed but after checking in gzipWTF.com it appears like nothing is getting compressed.
Any idea why? I have no others issues with the code being in .htaccess, it just doesn’t do anything.
i am getting the result for enableing the gzip and caching method but i’m unable to get reslut on server (apache 2.2) side please assist me.
will gzip in.htaccess work if its a shared server? my vendor told me my server doesnt support compression. sorry, newb question
Uhhh text/text ? Are you sure? I can’t find that mime type on wikipedia list of common media types.
Next to using Gzip to compress your CSS files you can also use many of the online compressors available today (like this one or this one) to compress them even more. Sometimes I can get it down to 90%+ of the original size (with Gzip).
Tried both gzip and mod_deflate and they both break a CRITICAL script I have in a sub-directory. So the questions is can any such forms of compression be enabled but then disabled on a sub-directory level. This way all is compressed except the sub-directory.
A word of caution to all who enable compression make sure to test all your scripts afterwards.
Thanks!
Isn’t it supposed to be “.htaccess” instead of “.haccess” or have I missed something?
Good catch! Just fixed that typo …
Thanks a lot for your tutorial,
I have followed the same on a server which works absolutely fine,
But on a other server it is not!
Is it anything to do with version of php, apache or something like that?
Thank You! Worked for me! :)
I use in my site(سئو). but when i check in gtmetrix not found. what is the reason?
i cant use .htaccess . but i want to enable Gzip
how can i enable gzip . i can use html . but if i input file then anyone can read it to my website.
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.
‘
i want to use it but html method
Just a typo feedback, not for posting
text: This is it’s version
error: it’s
fix: its
Thanks!
I enabled SVG compression using this method and the SVG assets now do not load. Any ideas why?
This article is 10 years old. I’m still struggling to find the answer to resolve the BREACH attack risk by having gzip enabled. VPS and Shared hosting products as standard do not support Brotli so I’m curious what the answer is. CloudFlare is good for compression but slow on DNS. The only answer I see is monetary. :-(
Because it works in compressed version
http.couchdb.svg.mime⁸.gzip svgz.cherry tree.svg.sudo nano
The coding isn’t working on the javascript or CSS files. I’ve tried a whole bunch of different setups, and this same code works fine on other websites. I did contact the host, and they said the version numbers of the file (end in variable) means that it won’t gzip those files. I’m just not sure how to get around this issue. Any advice?