用于指定过期的 nginx 配置

Question

我正在努力提高我的页面速度。我已经安装了 nginx 并将我的网站更改为 http2。但在 gtmetrix 性能报告中，我的 css、png 和 js 文件没有过期日期。 （未指定过期）在利用浏览器缓存建议中。我想我已经设置了所有可能的方法来做到这一点，并尝试了不同的变体。

如果它们是我的 nginx 指令和 htaccess 文件的另一个改进，请随时发布。

Plesk 中的 nginx 成瘾说明

gzip on;
gzip_vary on;
gzip_min_length 1240;
gzip_proxied    expired no-cache no-store private auth;
gzip_disable "MSIE [1-6]\\.(?!.*SV1)";
gzip_proxied any;
gzip_types text/plain text/css text/javascript application/javascript application/x-javascript application/json text/xml application/xml application/xml+rss image/x-icon image/bmp image/svg+xml;
location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
    expires 1y;
    log_not_found off;
}

htaccess 文件

<IfModule mod_deflate.c>
   AddOutputFilterByType DEFLATE text/plain text/html
   AddOutputFilterByType DEFLATE text/css text/javascript
</IfModule>

<IfModule mod_deflate.c>            
<FilesMatch “\\.(js|css|html|xml)$”>
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>

<IfModule mod_gzip.c>
   mod_gzip_on       Yes
   mod_gzip_dechunk  Yes
   mod_gzip_item_include file      \.(html?|txt|css|js|php|pl)$
   mod_gzip_item_include handler   ^cgi-script$
   mod_gzip_item_include mime      ^text/.*
   mod_gzip_item_include mime      ^application/x-javascript.*
   mod_gzip_item_exclude mime      ^image/.*
   mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>           

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/html "access plus 500 seconds"
ExpiresByType text/xml "access plus 3600 seconds"
ExpiresByType image/gif "access plus 14 days"
ExpiresByType image/ico "access plus 14 days"
ExpiresByType image/jpeg "access plus 14 days"
ExpiresByType image/jpg "access plus 14 days"
ExpiresByType image/png "access plus 14 days"
ExpiresByType text/css "access plus 14 days"
ExpiresByType text/javascript "access plus 14 days"
ExpiresByType application/x-javascript "access plus 14 days"
ExpiresByType application/javascript "access plus 14 days"
ExpiresByType application/x-shockwave-flash "access plus 1000 seconds"
ExpiresByType application/xhtml+xml "access plus 6000 seconds"
</IfModule>

<IfModule mod_headers.c>
<FilesMatch "\\.(ico|jpeg|jpg|png|gif|swf)$">
Header set Cache-Control "max-age=2629743, public"
</FilesMatch>
<FilesMatch "\\.(css)$">
Header set Cache-Control "max-age=2592000, public"
</FilesMatch>
<FilesMatch "\\.(js)$">
Header set Cache-Control "max-age=216000, private"
</FilesMatch>
#<FilesMatch "\\.(xhtml|html|htm|php)$">
#Header set Cache-Control "max-age=600, private, must-revalidate"
#</FilesMatch>
</IfModule>        

AddType application/x-httpd-php .xml

Answer 1

您需要检查和设置 Etag 标头以优化页面加载。

当我们设置浏览器缓存时，我们应该保持一个主要规则： "如果文件曾经被浏览器加载过， 如果此文件未更改，浏览器不应再次加载此文件。”浏览器应从缓存中获取此文件。 在每次重新加载页面时，浏览器都应该检查服务器上哪些文件被修改了，哪些没有。 对于 HTTP 协议中的这些目的，我们有 ETag 标头，浏览器在第一个文件请求中从服务器接收 并且在下一个请求中，浏览器将发送该标头的值作为标头 If-None-Match 或 If-non-modified-since 的值。 浏览器和服务器之间的这种通信将如下所示：

First request:

    GET /file.css HTTP/1.1
    Host: example.com\r\n\r\n

First response:

    HTTP/1.1 200 OK
    Content-Type: text/css; charset=UTF-8
    Cache-Control: public, must-revalidate
    ETag:W/"51f2d-dEW1Z5fvR5lLvYGJeS4DTZdaxAs"

    --There is content of file--

Second request:

    GET /file.css HTTP/1.1
    If-None-Match:W/"51f2d-dEW1Z5fvR5lLvYGJeS4DTZdaxAs"
    Host: example.com\r\n\r\n

Second response:

HTTP/1.1 304 Not Modified

--There is no content--

注意：

ETag:W/"51f2d-dEW1Z5fvR5lLvYGJeS4DTZdaxAs" 在第一个响应中

和

如果没有匹配：W/"51f2d-dEW1Z5fvR5lLvYGJeS4DTZdaxAs"

在第二个请求中

在这种情况下，当我们收到“304 Not Modified”时，浏览器将从缓存中提取此文件 并且此文件将无限期到期。如果文件将被更改，Etag 值将被更改并且所有 浏览器将从服务器重新加载此文件并更新其缓存。 即使您使用 php 或其他方式进行动态内容渲染，nginx 也会计算 Etag 的值 内容呈现后，在向浏览器发送响应之前检查；

为了加载优化，您需要在服务器中设置 Etag 标头。 而这种方法：

ExpiresByType image/jpg "access plus 14 days"

文件缓存不正确。 您只能将其用于主 html 请求。 因为 Expiration 标头对 google 等搜索引擎很有用。 它告诉他们何时需要重新索引您的页面。 如何设置Etag你可以看here。