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

编程问答 2022-05-27

问题描述

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

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

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

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

灯塔图片

enter image description here

解决方法

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

目前您显示的元标记正在说“不要缓存此页面”，因此每次有人到达该页面时，它都会从您的服务器而不是从他们的本地机器提供。

如果页面可能经常更改，则这对页面本身没问题，但对于网站 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 标头。他们的最长年龄应为 365 天（ max-age=31536000 为一年）。

cache-controllighthouse