时间戳

首页 > 解决方案 > Lighthouse：使用高效的缓存策略修复资产

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

问题描述

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

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

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

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

灯塔图片

在此处输入图像描述

标签： cache-controllighthouse

解决方案

当您至少 6 个月（理想情况下为一年）不缓存 CSS、图像、JS 等“静态”文件时，就会显示此建议。

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

如果页面可能经常更改，这对页面本身来说很好，但对于您的网站 CSS 和 JS 之类的东西会损害性能。

这个关于 Nginx 静态文件配置的答案应该可以帮助您进行基本配置设置。

但是 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即一年）。

推荐阅读