How to Specify a Vary: Accept-Encoding header?

Question

Google and pingdom.com says i should "Specify a Vary: Accept-Encoding header"

i do not know or understand how to do this. Can anyone explain what it is and what it does?

Cochlea

Answer 1

I am getting nearly 100% score in https://tools.pingdom.com/ and https://developers.google.com/speed/pagespeed/insights/

I found a helpful post to speed up wordpress website or blog https://www.keycdn.com/blog/speed-up-wordpress/

With some other optimizations, I am also using below code on my site in .htaccess file (usually hidden in main website folder)

My Server is Apache, You can check in hosting control panel (Like cPanel/WHM Panel)(if your server is nginx check keycdn.com post)

(Copy and paste below code in .htaccess file, it's working good for me)

(Upvote this answer if works for you)

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 month"
ExpiresByType image/jpeg "access 1 month"
ExpiresByType image/gif "access 1 month"
ExpiresByType image/png "access 1 month"
ExpiresByType image/svg "access 1 month"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType text/javascript "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/xhtml+xml "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 month"
ExpiresDefault "access 1 month"
</IfModule>

<ifModule mod_headers.c>
  <filesMatch ".(css|jpg|jpeg|png|gif|swf|svg|js|ico)$">
    Header set Cache-Control "max-age=2592000, public"
  </filesMatch>
  <filesMatch ".(x?html?|php)$">
    Header set Cache-Control "private, must-revalidate"
  </filesMatch>
</ifModule>

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/json
  AddOutputFilterByType DEFLATE application/atom+xml
  AddOutputFilterByType DEFLATE application/rdf+xml
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-font-woff
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/truetype
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml
</IfModule>

Donoho

This got me from a C -> B (on the page header metric)...now getting msg about using cookies (although I have a simple one page app..gunna keep dialing it..but this helped me a lot!) – Kowloon

to reduce the deflate stuff, you can use:<IfModule mod_deflate.c> <FilesMatch "\.(js|css|ttf|html|xml|plain)$"> SetOutputFilter DEFLATE </FilesMatch> </IfModule> – Projection

Answer 2

I think you have to enable compression for specific files like css, js and xml. The following code added to your domain's root .htaccess file will enable this kind of feature on you server:

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

If you would like to add more file type to this rule, just simple add the its extension to the statement! <FilesMatch "\.(js|css|xml|gz|newone)$">

Cufic

i added that code to my .htaccess file but my website is still not gzipped what wront can you help .. i contacted the my hosting company and they are a bunch of idiots saying htaccess shouldnt be in the root of the website in the first place!!! crazy – Cochlea

I don't know whats the problem. You should insert the code to an empty .htaccess (must be in the same directory as index.html/index.php) file. Maybe it will work and you can find out what the problem is. Try this tool to test the compression. Maybe the browser caching make some problem. – Hofmann

There's a typo in your code — you need the colon after 'Vary': Header append Vary: Accept-Encoding – Botts

Answer 3

I also had problems with this not working

Wht happened was I had another header directive for my php files

I had a Header set Cache-control - and it overwrites the Header append Vary, so you have to put them in the same block.
What I had to do was set the Vary for all the other files in one Filesmatch statement and the Cache and Vary for the php files in a separate FilesMatch statement like this:

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


<IfModule mod_headers.c>
<FilesMatch "\.(php)$">
 Header set Cache-Control "max-age=300"
 Header append Vary: Accept-Encoding
</FilesMatch>
</IfModule>

That's not my actual Cache-Control statement - just simplified for the example code.

Skylight