如何在Nginx上使用高效的缓存策略来服务静态资产?

uyto3xhc  于 2023-08-03  发布在  Nginx
关注(0)|答案(2)|浏览(96)

移动的端

我在努力提高我网站的页面加载量


的数据
我补充道

# 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

如何进一步调试?

eimct9ow

eimct9ow1#

您缺少http://nginx.org/en/docs/http/ngx_http_headers_module.html中的max-age指令
我不认为你真的希望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";
}

字符串

hc8w905p

hc8w905p2#

我使用的两种调试http caching的方法是:

  • 转到REDbot.org。您可以输入一个URL,它会显示相关的HTTP响应头,以及可能配置错误的注解。
  • 您可以在浏览器(chromefirefox)中查看Response headers,验证是否应用了nginx配置。

例如,当在nginx配置中设置expires 1h时,您应该看到两个响应头:

Expires: <A date one hour in the future>
Cache-Control: max-age=3600

字符串

相关问题