Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to Specify "Vary: Accept-Encoding" header in .htaccess

Google PageSpeed says I should "Specify a Vary: Accept-Encoding header" for JS and CSS. How do I do this in .htaccess?

like image 280
StackOverflowNewbie Avatar asked Sep 04 '10 06:09

StackOverflowNewbie


People also ask

What is vary accept-Encoding header?

It is allowing the cache to serve up different cached versions of the page depending on whether or not the browser requests GZIP encoding or not. The vary header instructs the cache to store a different version of the page if there is any variation in the indicated header.

How do I add a accept-Encoding header?

To check this Accept-Encoding in action go to Inspect Element -> Network check the request header for Accept-Encoding like below, Accept-Encoding is highlighted you can see.

Is accept-encoding standard HTTP header?

The Accept-Encoding request HTTP header indicates the content encoding (usually a compression algorithm) that the client can understand. The server uses content negotiation to select one of the proposals and informs the client of that choice with the Content-Encoding response header.

What is content encoding in header?

The Content-Encoding representation header lists any encodings that have been applied to the representation (message payload), and in what order. This lets the recipient know how to decode the representation in order to obtain the original payload format.


2 Answers

I guess it's meant that you enable gzip compression for your css and js files, because that will enable the client to receive both gzip-encoded content and a plain content.

This is how to do it in apache2:

<IfModule mod_deflate.c>     #The following line is enough for .js and .css     AddOutputFilter DEFLATE js css      #The following line also enables compression by file content type, for the following list of Content-Type:s     AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml      #The following lines are to avoid bugs with some browsers     BrowserMatch ^Mozilla/4 gzip-only-text/html     BrowserMatch ^Mozilla/4\.0[678] no-gzip     BrowserMatch \bMSIE !no-gzip !gzip-only-text/html  </IfModule> 

And here's how to add the Vary Accept-Encoding header: [src]

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

The Vary: header tells the that the content served for this url will vary according to the value of a certain request header. Here it says that it will serve different content for clients who say they Accept-Encoding: gzip, deflate (a request header), than the content served to clients that do not send this header. The main advantage of this, AFAIK, is to let intermediate caching proxies know they need to have two different versions of the same url because of such change.

like image 81
aularon Avatar answered Sep 27 '22 15:09

aularon


I'm afraid Aularon didn't provide enough steps to complete the process. With a little trial and error, I was able to successfully enable Gzipping on my dedicated WHM server.

Below are the steps:

  • Run EasyApache within WHM, select Deflate within the Exhaustive Options list, and rebuild the server.

  • Once done, goto Services Configuration >> Apache Configuration >> Include Editor >> Post VirtualHost Include, select All Versions, and then paste the mod_headers.c and mod_headers.c code (listed above in Aularon's post) on top of on another within the input field.

  • Once saved, I was seeing a 75.36% data savings on average! You can run a before and after test by using this HTTP Compression tool to see your own results: http://www.whatsmyip.org/http_compression/

Hope this works for you all!

  • Matt
like image 33
Matt D. Avatar answered Sep 27 '22 15:09

Matt D.