Google 页面速度见解 - 利用浏览器缓存

Question

我正在尝试实施 google 提供的有关页面加载洞察的建议：

https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2F###########.co.uk&tab=desktop

Should Fix 点之一是：

Leverage browser caching

它给出了一个资源列表，其中包含以下消息：

http://#######.co.uk/css/foundation.css（未指定到期时间）

通过查看文档，在我看来我应该做的是将 header 中此文件的声明更改为如下：

<link rel="stylesheet" href="/css/foundation.css" max-age="8640000">

但这并不能解决问题，因为当我运行进行更改后的报告时，此文件出现相同的错误。

我知道代码已经到位，因为它在我查看源代码时显示。

我已尽我所能进行搜索，但找不到任何可以帮助我的东西。

我对这种事情很陌生，所以没有太多的先验知识可以帮助我。

有没有人有这方面的经验，知道如何解决？

Answer 1

您的 /css/foundation.css 文件应使用 ETag 和 Cache-Control headers.

从您的 Web 服务器（或内容服务器）提供

确保 headers 在 /css/foundation 中可用。css 响应。

Answer 2

我将此代码添加到 Web 配置中，将缓存期设置为 30 天并解决了问题，因为该问题不再包含在页面速度洞察报告中：

<staticContent>
            <clientCache cacheControlMaxAge="30.00:00:00" cacheControlMode="UseMaxAge"/>
        </staticContent>

Answer 3

如果您要使用 Apache，您可以使用 .htaccess 文件，我想这会让您的生活更轻松一些。

像这样：

# .htaccess
# Leverage Browser Caching
FileETag MTime Size
<ifmodule mod_expires.c>
    ExpiresActive on
    # if you want to change cache values per content-type
    #ExpiresByType image/jpg "access 7 day"
    #ExpiresByType text/css "access 7 day"
    ExpiresDefault "access plus 7 days"
</ifmodule>

Google 页面速度见解 - 利用浏览器缓存

Google page speed insights - Leverage browser caching

html

css

pagespeed