Lighthouse：使用高效的缓存策略修复资产

Question

我正在努力提高我网站的性能，我看到我必须使用有效的缓存策略。这是否意味着当用户进入网站时，网站可以存储在他们的机器上，增加页面加载时间，使用缓存超时？

我不知道是应该在网站的元标记中还是在服务器上配置这个，我在我的网站上使用了以下元标记：

<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="-1" />

我相信我没有在我的网站上使用缓存，这就是 Lighthouse 报告的原因？那么，我该怎么做才能解决这个问题，更改服务器上或元标记中的内容？我需要一个有效的答案我的服务器是 Nginx，我的服务器上没有使用任何缓存策略。

灯塔图片

Answer 1

如果您不缓存“静态”文件（例如 CSS、图像、JS 至少 6 个月（最好是一年），就会显示此建议。

目前您显示的元标记显示“不缓存此页面”，因此每次有人访问该页面时，都会从您的服务器而不是从他们的本地计算机提供服务。

如果页面本身可能经常更改，这对页面本身没问题，但对于您的网站 CSS 和 JS 等会影响性能的内容。

This answer on Nginx static files config 应该可以帮助您进行基本配置设置。

但是 30 天还不够，所以您需要将其更改为 365 天。

自从我不得不这样做以来已经有一段时间了，但我相信以下方法会起作用（未测试）

location ~* \.(?:ico|css|js|gif|jpe?g|png)$ {
    expires 365d;
    add_header Vary Accept-Encoding;
    access_log off;
}

通过配置执行此操作要好得多，因为您可以决定是否可以将经常更新的文件缓存更短的时间（缓存长度是一个建议，不会影响您的分数。将缓存设置得尽可能高而不会在定期更新的文件上把自己逼到墙角。）

又过了一段时间，但我相信该文件位于“/etc/nginx/sites-available/default”，但我可能在那里错了，希望更熟悉 Nginx 的人能够确认或纠正我关于这些点。

要对其进行测试，只需更新文件，然后打开网站上的开发人员工具并转到“网络”选项卡。重新加载页面并找到 CSS 文件、图像、JS 文件等，然后检查 cache-control headers。他们的最大年龄应该至少为 365 天（ max-age=31536000 是一年）。

Lighthouse: Fix assets with an efficient cache policy