How To Add A “Vary: Accept-Encoding” Header To Apache

I freely admit to finding the “Vary” response header confusing. I know that it controls caching and can take various values such as “Cookie”, “Referrer”, and many other values. I know that it controls the behavior of the cache and that having a messy “Vary” response header can have a terrible impact on cache times.

So for most use-case scenarios, the simplest setting to be safe is the following:

Vary: Accept-Encoding

In this tutorial, I’ll show you a simple way of including this response header on your site, so you don’t have to worry about it ever again.

1. Edit the .htaccess File

If you’re using an Apache webserver, you need to find a way to access and edit the hidden “.htaccess” file on your server. The best way to do this is to open your web hosting control panel (most likely cPanel), and fire up the in-built file manager. Navigate to the root folder of your website, and ensure that the setting to show hidden files is enabled. Now you can edit the .htaccess file from here.

You can also use FTP. Another option is to use the Yoast File Editor. Since almost everyone uses the Yoast plugin, this method is the easiest:

However, I don’t recommend using the plugin to edit files – particularly the .htaccess file. The reason is simple – making a mistake while editing the .htaccess file can render your site completely inaccessible, and that includes the plugin admin screen as well. To undo your changes and correct the problem to get your site working again means you’ll need to either use FTP or your web host’s file editor anyway, which can take time. Far easier to start editing the file in a reversible manner, to begin with!

2. Add the Following Lines to .htaccess

Open your .htaccess file for editing, and add these lines to the bottom. Just for good measure, I suggest backing up your .htaccess file so that you can restore it immediately if something goes wrong.

# Enable accept-encoding for vary headers
<IfModule mod_headers.c>
  <FilesMatch ".(js|css|xml|gz|html)$">
    Header unset Vary
    Header set Vary "Accept-Encoding"
  </FilesMatch>
</IfModule>

The above block of code will first unset your existing Vary header and then reset it to one, and only one value – Accept-Encoding. Save your changes, and test to see if it works. To do this, visit a page on your site in your web browser, open the development tools, go to the “Network” tab, and refresh the page.

Click the first entry on the pane on the left-hand side, and you should see “Headers” on the right pane. Scroll down the list of headers till you see the Vary header. The following screenshot is from my own site WP-Tweaks.com on a NameHero server.

As you can see, it’s just a single value, “Accept-Encoding”, with nothing else. It’s the most flexible option that’s least likely to cause problems. Some web hosts deliberately mess with the Vary header to ensure that your site works properly with their custom caching solution. NameHero doesn’t do this, but you should be aware of the possibility with other hosting providers.

The .htaccess code I showed you could be easily modified to include other values of the “Vary” header. But make sure that you know what you’re doing before changing anything! A misconfigured “Vary” value can play havoc with your cache and slow down your site.