如何在Nginx上使用高效的缓存策略提供静态资源服务？

Question

在移动设备上

我正在尝试提高我的网站页面加载速度

我添加了

# Media: images, icons, video, audio, HTC
location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|mp3|ogg|ogv|webm|htc|woff2|woff)$ {
    expires 1M;
    access_log off;
    add_header Cache-Control "public";
}

# CSS and Javascript
location ~* \.(?:css|js)$ {
    expires 1y;
    access_log off;
    add_header Cache-Control "public";
}

由于某些原因，我觉得我刚刚添加到我的Nginx中的更改没有任何效果。

如何进一步调试？请参考以下链接：https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.bunlongheng.com%2F。

- code-8

Answer 1

你缺少max-age指令，可以参考http://nginx.org/en/docs/http/ngx_http_headers_module.html

我不认为你真的想让CSS和JS文件过期这么长时间，但我可能错了。

另外，对于所有这些文件类型都没有日志记录？如果你被盗链或者服务某些找不到的CSS/JS文件会怎么办。

我建议你重新考虑一下缓存控制。

# Media: images, icons, video, audio, HTC
location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|mp3|ogg|ogv|webm|htc|woff2|woff)$ {
    expires 1M;
    access_log off;
    # max-age must be in seconds
    add_header Cache-Control "max-age=2629746, public";
}

# CSS and Javascript
location ~* \.(?:css|js)$ {
    expires 1y;
    access_log off;
    add_header Cache-Control "max-age=31556952, public";
}

- Dario Zadro

---

我认为这不是预期的结果。根据文档，nginx指令expires会将Expires HTTP头设置为适当的日期，并且将Cache-Control头中的max-age设置为适当的秒数。上述配置的响应将包含两个max-age字段（在nginx 1.18中验证）。 - vlz

嗯，可以很容易地通过使用 curl -I https://example.com/stylesheet.css 进行验证（显然，将域名/URL替换为实际文件路径）。 - Dario Zadro

Answer 2

我使用的两种调试http缓存的方法是：

• 前往REDbot.org。您可以输入一个URL，它将显示与HTTP响应头相关的信息，以及可能配置错误的注释。

• 在浏览器（chrome，firefox）中自行检查响应头，以验证您的nginx配置是否生效。

  例如，在您的nginx配置中设置expires 1h时，您应该看到两个响应头：

  Expires: <未来一小时的日期>
  Cache-Control: max-age=3600
  

- vlz