如何指定 Vary: Accept-Encoding 头部？

Question

谷歌和pingdom.com建议我应该“指定一个Vary: Accept-Encoding头”

我不知道或者不理解怎样去实现这个。有人能解释一下这是什么，它的作用是什么吗？

- jshariar

Answer 1

我在 https://tools.pingdom.com/ 和 https://developers.google.com/speed/pagespeed/insights/ 上得到了接近100%的分数。

我发现一篇有帮助的文章，可以加速wordpress网站或博客的速度：https://www.keycdn.com/blog/speed-up-wordpress/

除了其他一些优化措施外，我还在我的网站上使用下面的代码在 .htaccess 文件中（通常隐藏在主要网站文件夹中）。

我的服务器是Apache，请在托管控制面板（如cPanel / WHM面板）中进行检查（如果您的服务器是nginx，请查看keycdn.com文章）。

（将以下代码复制并粘贴到 .htaccess 文件中，它对我很有效）

（如果此方法对您有用，请点赞此答案）

<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>

- proseosoc

---

这让我从C级别提升到了B级别（在页面标题指标上）...现在收到有关使用cookies的消息（尽管我只有一个简单的单页应用程序..会继续调整它..但这对我帮助很大！） - twknab

为了减少deflate压缩的东西，你可以使用以下代码：<IfModule mod_deflate.c> <FilesMatch ".(js|css|ttf|html|xml|plain)$"> SetOutputFilter DEFLATE </FilesMatch> </IfModule> - Darksymphony

Answer 2

我认为你需要对特定的文件（如css、js和xml）启用压缩。

将以下代码添加到您域名的根目录中的 .htaccess 文件中，可以在您的服务器上启用此功能:

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

如果您想将更多文件类型添加到此规则中，只需简单地将其扩展名添加到语句中即可！<FilesMatch "\.(js|css|xml|gz|newone)$">

- Patartics Milán

---

我把那段代码添加到了我的 .htaccess 文件中，但是我的网站仍然没有启用 gzip 压缩。你能帮忙看看哪里出了问题吗？我已经联系了我的主机公司，但他们一群白痴，说 htaccess 根本不应该在网站的根目录下！简直疯了。 - jshariar

我不知道问题出在哪里。你应该将代码插入到一个空的.htaccess文件中（必须与index.html/index.php文件在同一目录下）。也许它会起作用，你可以找出问题所在。尝试使用这个工具来测试压缩。也许浏览器缓存会造成一些问题。 - Patartics Milán

你的代码中有一个错别字 - 在“Vary”后面需要加上冒号：Header append Vary: Accept-Encoding。 - fastasleep

Answer 3

我也遇到了这个无法工作的问题。

问题出在我有另一个针对php文件的header指令，我设置了一个Header set Cache-control指令，它覆盖了Header append Vary指令，因此你必须将它们放在同一区块中。
我需要使用一个Filesmatch语句为所有其他文件设置Vary，并在另一个Filesmatch语句中为php文件设置Cache和Vary，如下所示：

<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>

这并不是我的真正的Cache-Control语句 - 只是为了示例代码而简化。

- Nat