Google 页面速度洞察 - 利用浏览器缓存答案

【问题标题】：Google page speed insights - Leverage browser cachingGoogle 页面速度洞察 - 利用浏览器缓存
【发布时间】：2015-12-21 12:48:38
【问题描述】：

我正在尝试实施 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（未指定过期时间）

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

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

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

我知道代码已经到位，当我查看源代码时会显示它。

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

我是这种东西的新手，所以没有太多的先验知识可以帮助我。

有没有人有这方面的经验，有什么解决办法吗？

【问题讨论】：

标签： html css pagespeed

【解决方案1】：

您的 /css/foundation.css 文件应使用 ETag 和 Cache-Control 标头从您的 Web 服务器（或内容服务器）提供。

确保这些标头在 /css/foundation.css 响应中可用。

【讨论】：

您能提供一个如何实现这些标头的示例吗？

【解决方案2】：

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

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

【讨论】：

【解决方案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>

【讨论】：