我正在使用 symfony 3,并且有以下 .htaccess 文件(附加到此消息的最底部,标记为'problem .htaccess')。我正在使用网站 gtmetrix.com(它使用 pagespeed)来优化我的网站,但我的 .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,因此它如下所示:
超薄框架(其他站点 .HTACCESS)
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 框架(问题 .HTACCESS)
# 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 .htaccess 文件中,然后告诉它改写为 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 %}
也许是因为我正在使用资产,它以某种方式在引擎中对该资源的编码器做一些事情?我不确定它会如何做到这一点,但不确定现在还能去哪里寻找。
更新#2
好的,在这个谜题中取得了重大进展,我得到了可变编码消息,但我不完全确定为什么,但我知道 main.css 文件的文件大小很重要。
当 main.css 有以下内容时,它将无法指定一个 vary:accept 编码头?也许是因为它太小而无法压缩?
.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 导致的标头覆盖?