【问题标题】:Lighthouse: Fix assets with an efficient cache policyLighthouse:使用高效的缓存策略修复资产
【发布时间】:2021-02-03 18:57:26
【问题描述】:

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

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

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

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

灯塔图片

【问题讨论】:

    标签: cache-control lighthouse


    【解决方案1】:

    当您至少 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 是一年)。

    【讨论】:

    • 优秀的答案。由于我使用 webp 格式的大多数图像,我在正则表达式中添加了 webp 格式。但现在我意识到了一些事情,因为我将 CloudFront 用于我的图像,他们没有收到这个缓存。我现在该怎么办?由于我现在使用缓存策略,您认为在我自己的服务器上使用图像更好吗?
    • 注意:您的代码可以正常工作,CSS 和 JS 文件现在的最长期限为 365 天
    • 如果您使用的是 CDN,您还需要在那里配置缓存选项。我没有使用 CloudFront,所以不确定确切的方法,但它通常非常简单,我毫不怀疑快速“如何在 CloudFront 上为我的图像添加缓存策略”搜索将在那里有所帮助。如果您遇到困难,请告诉我,如果可以,我会尽力提供帮助。
    • 我按照你说的做了研究,得到了它。非常感谢大家的支持
    猜你喜欢
    • 1970-01-01
    • 2021-11-10
    • 2020-08-23
    • 1970-01-01
    • 2021-03-13
    • 1970-01-01
    • 2020-07-17
    • 2021-07-23
    • 2019-12-01
    相关资源
    最近更新 更多