为什么文件大小对apache命令Header附加Vary用户代理触发很重要



我正在使用symfony 3,并有以下.htaccess文件(附在该消息的最底部,标记为'problem.htaccess')。我正在使用网站gtmetrix.com(使用页面速度)来优化我的网站,但我的.css和.js文件出现以下错误。

Specify a Vary: Accept-Encoding header  
F (33)
    SERVER  HIGH
What's this mean?
The following publicly cacheable, compressible resources should have a "Vary: Accept-Encoding" header:
http://{{my website here}}/css/main.css
http://{{my website here}}/js/main.js

在您提到它说Header append Vary User-Agent之前,它显然没有说接受编码。。

1.)(我已经看过.htaccess中如何指定"Vary:Accept Encoding"标头),它讨论了如何设置这一点。

2.)我列出的代码在同一服务器上的另一个网站上运行,我没有收到不同的编码错误消息,这意味着我的代码无论如何都应该有效(另一个网站也有main.css和main.js)。htaccess文件中唯一的区别是它是用于SLIM框架而不是symfony的,所以它看起来如下:

SLIM框架(其他站点.HTACESS)

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.php [QSA,L]
AddType application/x-font-ttf .ttf
Header unset Pragma
FileETag None
Header unset ETag 
<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  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-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  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
  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4.0[678] no-gzip
  BrowserMatch bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType font/ttf "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##

Symfony 3框架(问题.HTACESS)

# Use the front controller as index file. It serves as a fallback solution when
# every other rewrite/redirect fails (e.g. in an aliased environment without
# mod_rewrite). Additionally, this reduces the matching process for the
# start page (path "/") because otherwise Apache will apply the rewriting rules
# to each configured DirectoryIndex file (e.g. index.php, index.html, index.pl).
DirectoryIndex app.php
# By default, Apache does not evaluate symbolic links if you did not enable this
# feature in your server configuration. Uncomment the following line if you
# install assets as symlinks or if you experience problems related to symlinks
# when compiling LESS/Sass/CoffeScript assets.
# Options FollowSymlinks
# Disabling MultiViews prevents unwanted negotiation, e.g. "/app" should not resolve
# to the front controller "/app.php" but be rewritten to "/app.php/app".
<IfModule mod_negotiation.c>
    Options -MultiViews
</IfModule>
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType text/js "access 1 week"
ExpiresByType application/javascript "access 1 week"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##
<IfModule mod_rewrite.c>
    RewriteEngine On
    # Determine the RewriteBase automatically and set it as environment variable.
    # If you are using Apache aliases to do mass virtual hosting or installed the
    # project in a subdirectory, the base path will be prepended to allow proper
    # resolution of the app.php file and to redirect to the correct URI. It will
    # work in environments without path prefix as well, providing a safe, one-size
    # fits all solution. But as you do not need it in this case, you can comment
    # the following 2 lines to eliminate the overhead.
    RewriteCond %{REQUEST_URI}::$1 ^(/.+)/(.*)::2$
    RewriteRule ^(.*) - [E=BASE:%1]
    # Sets the HTTP_AUTHORIZATION header removed by Apache
    RewriteCond %{HTTP:Authorization} .
    RewriteRule ^ - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
    # Redirect to URI without front controller to prevent duplicate content
    # (with and without `/app.php`). Only do this redirect on the initial
    # rewrite by Apache and not on subsequent cycles. Otherwise we would get an
    # endless redirect loop (request -> rewrite to front controller ->
    # redirect -> request -> ...).
    # So in case you get a "too many redirects" error or you always get redirected
    # to the start page because your Apache does not expose the REDIRECT_STATUS
    # environment variable, you have 2 choices:
    # - disable this feature by commenting the following 2 lines or
    # - use Apache >= 2.3.9 and replace all L flags by END flags and remove the
    #   following RewriteCond (best solution)
    RewriteCond %{ENV:REDIRECT_STATUS} ^$
    RewriteRule ^app.php(?:/(.*)|$) %{ENV:BASE}/$1 [R=301,L]
    # If the requested filename exists, simply serve it.
    # We only want to let Apache serve files and not directories.
    RewriteCond %{REQUEST_FILENAME} -f
    RewriteRule ^ - [L]
    # Rewrite all other queries to the front controller.
    RewriteRule ^ %{ENV:BASE}/app.php [L]
</IfModule>
<IfModule !mod_rewrite.c>
    <IfModule mod_alias.c>
        # When mod_rewrite is not available, we instruct a temporary redirect of
        # the start page to the front controller explicitly so that the website
        # and the generated links can still be used.
        RedirectMatch 302 ^/$ /app.php/
        # RedirectTemp cannot be used instead
    </IfModule>
</IfModule>
# These rules need to be at the bottom!
# Make it aware of True Type Fonts for Web Fonts.
AddType application/x-font-ttf .ttf
Header unset Pragma
FileETag None
Header unset ETag 
<IfModule mod_deflate.c>
  #The following line is enough for .js and .css
  AddOutputFilter DEFLATE js css
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  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-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  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/js
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml
  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4.0[678] no-gzip
  BrowserMatch bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

问题是:symfony框架或它们的.htaccess文件有什么不同,不允许我使用Header append Vary User-Agent命令?

更新

因此,在做了一些实验后,我将symfony的.htaccess文件修改为与slims相同的文件,我所要做的唯一区别是将DirectoryIndex-app.php行添加到slims.htacccess文件中,然后告诉它重写为app.php而不是index.php,但错误仍然存在。这告诉我可能不是htaccess文件,而是我创建资产的方式?

在代码中,它在TWIG模板中看起来是这样的。

{% spaceless %}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}
            <link href="{{ asset('css/main.css') }}" rel="stylesheet" />
        {% endblock %}
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
    </head>
    <body>
        {% block body %}{% endblock %}
        {% block javascripts %}
            <script src="{{ asset('js/main.js') }}"></script>
        {% endblock %}
    </body>
</html>
{% endspaceless %}

也许是因为我在使用asset,它对引擎中该资源的编码器做了一些事情?我不确定它会如何做到这一点,但不确定目前还能在哪里寻找。

更新#2

Ok在这个谜团中取得了很大进展,我得到了不同编码的消息,但我不完全确定为什么,但我知道main.css文件的文件大小很重要。

当main.css具有以下内容时,它将无法指定一个不同的:是否接受编码标头?也许是因为它太小了,一开始无法压缩?

.someclass{color:red;}.heythere{color:blue;}.heythereagain{color:blue;width:200px}.heytheretwice{color:green;height:50px;}

但是,请改为使用以下main.css内容,消息将在gtmetrix上消失。

a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}.red{background-color:rgba(255,0,0,.75)}.blue{background-color:rgba(0,0,255,.75)}.green{background-color:rgba(0,255,0,.75)}.purple{background-color:rgba(255,0,255,.75)}.orange{background-color:rgba(255,150,0,.75)}.yellow{background-color:rgba(255,255,0,.75)}.black{background-color:rgba(0,0,0,.75)}.hide{display:none}.inline_block_fix:before{display:inline-block;content:'';height:100%;width:0;vertical-align:middle}.vertical_align{vertical-align:middle;display:inline-block;height:100%;width:0}.header{height:70px;color:#FFF;background-color:#2c3e50;font-size:16px;text-align:right;font-family:ProximaNova;text-align:center}.header a{color:#fff;text-decoration:none}.header .fa-phone{color:#42c044;padding-left:10px;padding-right:10px;font-size:24px!important;vertical-align:middle}.mobile_menu{display:inline-block;vertical-align:middle;font-size:24px!important;padding-right:10px;cursor:pointer}.phonebox{display:inline-block;vertical-align:middle;margin-right:0;border-radius:10px 10px 10px 10px;-moz-border-radius:10px 10px 10px 10px;-webkit-border-radius:10px 10px 10px 10px;border:0 solid #000;background-color:#42c044;height:41px;width:210px;font-size:26px;font-weight:700;text-align:center}.phonebox .phonetext{display:inline-block;vertical-align:middle}.callustext{display:none;vertical-align:middle}@media all and (min-width:600px){.callustext{display:inline-block}.mobile_menu{display:none!important}.header{text-align:right}.phonebox{margin-right:40px}}.footer{background-color:#2c3e50;text-align:center;font-family:ProximaNova;color:#fff;padding-top:30px}.footer .copyright_area{height:60px;line-height:60px;background-color:#33383c;color:#aaa;font-size:12px;margin-top:30px}.footer .copyright_area .copyright_links{padding-left:20px}.footer .copyright_area .copyright_links a{color:#aaa;padding-left:2px;padding-right:2px}.footer .whitebox{display:inline-block;vertical-align:middle;margin-left:20px;margin-right:20px;padding-top:20px;padding-bottom:15px;padding-left:30px;padding-right:30px;background-color:#fff;border-radius:5px;text-align:center}.footer .whitebox .footer_logo{display:inline-block;background-image:url(/images/logo-hires-opt.png);background-repeat:no-repeat;background-position:top;background-attachment:scroll;background-size:196px 75px;height:95px;width:196px}.footer .whitebox .bar{border-bottom:2px solid #485867;margin-bottom:20px}.footer .whitebox .asp{display:inline-block;background-image:url(/images/asp-opt.jpg);background-size:95px 75px;background-repeat:no-repeat;height:75px;width:95px}.footer .whitebox .cpo{display:inline-block;background-image:url(/images/cpo-opt.jpg);background-size:75px 75px;background-repeat:no-repeat;background-position:center;height:75px;width:100px}.footer .links_area{display:inline-block;vertical-align:middle;text-align:left;font-size:18px;margin-left:20px;margin-right:20px;width:285px;margin-top:30px}.footer .links_area .links_area_title{font-size:28px;font-weight:700;margin-bottom:20px}.footer .links_area ul li{margin-left:10px;margin-top:10px}.footer .links_area ul li i{width:10px;margin-right:20px}.footer .links_area a{color:#fff;text-decoration:none;border-bottom:2px solid #777F88}@font-face{font-family:ProximaNova;src:url(/fonts/proximanova-regular-webfont.ttf)}@font-face{font-family:ProximaNovaAltBold;src:url(/fonts/proxima_nova_alt_bold-webfont.ttf)}

我在javascript上仍然有错误,但我将继续向我的javascript文件中添加随机函数,看看这是否会使错误消失。目前我的JS文件是:

function test(){alert('test');}function test2(){alert('test2');function test3(){alert('test3');alert('another test');}}

更新#3:

事实上,文件大小是罪魁祸首,将我的js文件更改为.

function test(){alert('test');}function test2(){alert('test2');}function test3(){alert('test3');alert('another test');}function test4(){alert('test4');alert('another test4');}function test5(){alert('test5');alert('another test5');}function test6(){alert('test6');alert('another test6');}function test7(){alert('test7');alert('another test7');}function test8(){alert('test8');alert('another test8');}function test9(){alert('test9');alert('another test9');}function test10(){alert('test10');alert('another test10');}function test11(){alert('test11');alert('another test11');}function test12(){alert('test12');alert('another test12');}function test13(){alert('test13');alert('another test13');}function test14(){alert('test14');alert('another test14');}function test15(){alert('test15');alert('another test15');}function test16(){alert('test16');alert('another test16');}function test17(){alert('test17');alert('another test17');}function test18(){alert('test18');alert('another test18');}function test19(){alert('test19');alert('another test19');}function test20(){alert('test20');alert('another test20');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');alert('hello');}

足以消除标题变化编码错误。

更新#4

正在阅读此页(https://www.fastly.com/blog/best-practices-for-using-the-vary-header),显然,如果您使用mod_deflate,则会自动将正确的Vary标头添加到您的响应中。因此,当main.css和main.js文件很小时,mod_deflate很可能覆盖了我建议的更改。

所以新问题:

为什么在尝试添加Header append Vary User-Agent命令时文件大小很重要?在这种情况下,我应该忽略gtmetrix(pagespeed)的速度优化建议吗?或者,如果mod_deflate正在覆盖,这甚至是一个问题吗?如果是这样,我该如何修复mod_deflate导致的标头覆盖?

因此,经过大量研究和思考,我得出结论,mod_deflate是罪魁祸首。

根据apache的说法:http://httpd.apache.org/docs/2.2/mod/mod_deflate.html

mod_deflate模块发送一个Vari:Accept-Encoding HTTP响应标头,以提醒代理缓存的响应应仅发送给发送适当的Accept-Encoding请求标头的客户端这样可以防止压缩内容发送到无法理解的客户端。

这里的关键是了解压缩是如何工作的。例如,当您查看来自用户浏览器的HTTP请求时,您可能会看到以下内容。(使用谷歌chromes检查器或Firefox的firebug查看这些)。

GET /css/main.css HTTP/1.1
Host: dev.yoursitehere.com
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Accept: text/css,*/*;q=0.1
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.93 Safari/537.36
Referer: http://dev.yoursitehere.com
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8,nb;q=0.6
Cookie: PHPSESSID=2fd616076481f661975f7de2a92a0016

注意这一行:接受编码:gzip,deflate,sdch

这是对服务器说,如果你把gzip、deflate和sdch压缩格式发给我,我可以解压缩它们。

服务器不必发回压缩的结果。事实上,这就是在我的情况下发生的事情,当时文件大小太小了。

8096字节是apache deflate模块设置的默认值DeflateBufferSize

这意味着,如果你想要服务器的内容大于8096字节,那么它将压缩结果,根据我的.htaccess文件,我使用的是DEFLATE压缩方法。

只有当文件大小足够大时,我才注意到响应标头是这样的。

HTTP/1.1 200 OK
Server: nginx
Date: Tue, 29 Dec 2015 20:25:28 GMT
Content-Type: text/css
Transfer-Encoding: chunked
Connection: keep-alive
Vary: Accept-Encoding
Last-Modified: Tue, 29 Dec 2015 19:31:30 GMT
Cache-Control: max-age=2592000
Expires: Thu, 28 Jan 2016 20:25:28 GMT
Content-Encoding: gzip

通常,当main.css或main.js文件的文件大小太小时,Vary:Accept Encoding响应标头不存在,但一旦超过了值得压缩的数量,mod_deflate模块就会自动添加Vary标头。

这个头告诉chrome这不是一个正常的未压缩文件,而是一个需要解压缩的文件。在这种特殊情况下,内容编码被设置为gzip。这意味着它在发送回我之前压缩了结果。

https://en.wikipedia.org/wiki/Gzip

根据这一点,gzip使用DEFLATE算法,(我的浏览器说它可以在我的请求头中用接受编码行来处理:gzip,DEFLATE,sdch

因此浏览器能够正确地重建它。

这就是为什么在附加vary标头之前文件大小很重要,以及vary标头在本文中的实际含义。

相关内容

  • 没有找到相关文章

最新更新