网站内容更新策略( 如何理解采用高效的缓存策略提供静态资源？|)

　　网站内容更新策略(

如何理解采用高效的缓存策略提供静态资源？|)

　　Google PageSpeed Insights 是评估 网站 性能的工具之一。但是，它的一些建议（例如警告消息“使用有效的缓存策略来提供静态资源”）可能会使没有经验的网站管理员感到困惑。

　　分解一下，缓存就不难理解了。通过一些调整，在网站上实现最佳代码，以减少加载时间并提高PageSpeed得分。

　　在本文章中，我们将通过警告信息“使用高效的缓存策略来提供静态资源”进行讲解，然后分享一些解决这个问题的技巧。

　　如何理解使用高效缓存策略提供静态资源？

　　为了理解“使用高效缓存策略提供静态资源”的警告信息，先了解一下 Google PageSpeed Insights 会有帮助。如果您是平台新手，建议阅读完整指南《如何在Google PageSpeed Insights test中获得满分》一文。

　　使用高效的缓存策略提供静态资源是Google PageSpeed返回的众多“诊断结果”之一，可以作为提高分数的建议，如下图：

　　Google PageSpeed Insights 缓存策略

　　Google 建议使用浏览器缓存来减少页面加载时间并提高性能。简而言之，缓存意味着用户的浏览器保存站点页面的静态副本。然后，在后续访问中，可以更快地重新加载此内容，因为浏览器无需连接服务器即可访问请求的静态资源。

　　但是，每个缓存资源都需要指定的有效期。这将告诉浏览器 网站 上的内容何时过期，并在过期时用更新的版本替换其缓存副本。

　　如果在性能测试结果中看到“使用高效的缓存策略提供静态资源”警告，则可能表示以下两种情况之一：

　　使用高效的缓存策略，为静态资源提供具体的措施

　　您可以通过几种不同的方式修复 WordPress网站“使用有效的缓存策略来提供静态资源”警告，具体取决于原因。您可以尝试以下三种解决方案。

　　1. 添加缓存控制和过期标头

　　有两个与浏览器缓存相关的标头：Cache-Control 和 Expires。至少必须存在一个才能为您的站点启用浏览器缓存，因为这是浏览器在刷新资源之前确定资源应保留多长时间的方式。

　　确定这是否导致“使用有效的缓存策略来提供静态资源”警告的一种简单方法是查看每个资源的详细信息。在最新版的Google PageSpeed Insights中，你会在“Cache TTL”下看到“None”：

　　Google PageSpeed Insights中缓存TTL列表

　　或者当缓存有效期太短时，最新版本的Google PageSpeed Insights也会列在“使用高效缓存策略提供静态资源”警告列表中，但是“缓存TTL”显示的是缓存有效期：

　　浏览器缓存资源缓存有效期太短

　　当Cache-Control头启用客户端缓存并设置资源的最大使用期限时，Expires头仅用于指定缓存资源的有效期。

　　Expires 是在 HTTP / 1.1 中引入的，提供了比 Cache-Control 更多的选项。它们可以用来完成同样的事情，但 Expires 的数据值是 HTTP 日期，Cache-Controlmax-age 允许您指定相对时间量，以便您可以指定“请求页面后 X 小时”。

　　HTML Cache control 是一个非常相似的问题，并且有一个很好的缓存教程链接，可以回答你的大部分问题（例如，[#EXPIRES）。）总结一下，当你需要对缓存方式进行更多控制时, 对于图片和Cache-Control等静态资源，建议使用Expires。通过

　　您不必同时添加两者，因为这可能是多余的。一般推荐使用较新的Cache-Control。但是，一些 Web 性能工具（例如 GTmetrix）仍会检查 Expires 标头。

　　如何在 Nginx 中添加 Cache-Control 缓存控制头

　　要在 Nginx 中添加 Cache-Control 标头，可以在服务器的 Nginx 配置文件中添加以下内容：

　　location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {

expires 30d;

add_header Cache-Control "public, no-transform";

}

　　这告诉您的服务器指定的文件类型至少在 30 天内不会更改。

　　如何在Apache中添加Cache-Control缓存控制头

　　如果您使用的是 Apache 服务器，则可以将以下代码添加到 .htaccess 文件中：

Header set Cache-Control "max-age=84600, public"

　　此代码段应添加在“#BEGIN WordPress”之前或“#END WordPress”之后。在这种情况下，缓存设置为在 84,600 秒后过期。

　　如何在 Nginx 中添加 Cache-Control 缓存有效性标头

　　您可以通过将以下内容添加到服务器 NG 配置文件来在 Nginx 中添加 Expires 标头。在此示例中，您可以看到如何根据文件类型指定不同的到期时间：

　　location ~* \.(jpg|jpeg|gif|png|svg)$ {

expires 365d;

}

location ~* \.(pdf|css|html|js|swf)$ {

expires 2d;

}

　　如何在Apache中添加Cache-Control缓存有效性标头

　　您可以通过在 .htaccess 文件中添加以下内容在 Apache 中添加 Expires 标头：

　　## EXPIRES HEADER CACHING ##

ExpiresActive On

ExpiresByType image/jpg "access 1 year"

ExpiresByType image/jpeg "access 1 year"

ExpiresByType image/gif "access 1 year"

ExpiresByType image/png "access 1 year"

ExpiresByType image/svg "access 1 year"

ExpiresByType text/css "access 1 month"

ExpiresByType application/pdf "access 1 month"

ExpiresByType application/javascript "access 1 month"

ExpiresByType application/x-javascript "access 1 month"

ExpiresByType application/x-shockwave-flash "access 1 month"

ExpiresByType image/x-icon "access 1 year"

ExpiresDefault "access 2 days"

## EXPIRES HEADER CACHING ##

　　然后，您可以再次通过Google PageSpeed Insights 运行网站，查看浏览器缓存警告是否仍然存在。

　　2.Google Analytics 统计代码浏览器缓存策略

　　具有讽刺意味的是，有时 Google Analytics Google Statistics Code 的 JS 文件也会被 Google PageSpeed Insights 识别为未优化的静态资源：

　　谷歌统计JS代码

　　您将无法使用 Cache-Control 或 Expires 标头更改此设置，因为该资源不在本地服务器上。但是，有一种方法可以通过将 Google Analytics 统计代码 JS 文件存储在本地服务器上来实现浏览器缓存。

　　但是请注意，Google 不支持此方法。

　　(1）使用插件CAOS实现浏览器缓存谷歌统计JS脚本

　　如果您想解决以上问题，可以使用Daan van den Bergh 开发的免费插件Complete Analytics Optimization Suite (CAOS)：

　　CAOS插件

　　您可以从 WordPress 插件市场下载 CAOS，也可以在 WordPress 仪表板上的“插件”>“安装插件”中搜索并安装。

　　在本地存储分析脚本文件的其他一些好处包括将向 Google 发出的外部 HTTP 请求从两个减少到一个，并让您完全控制文件缓存。这意味着您可以使用前面提到的缓存头。

　　首先，请安装插件，然后输入您的 Google Analytics 跟踪 ID。此插件将 Google Analytics（Google 统计）所需的跟踪代码添加到您的 WordPress网站，下载 analytics.js 文件并将其保存到您的服务器，并使用 wp_cron( ) 中的预定脚本对其进行更新。