如何在 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

我应该如何进一步调试？

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";
}