如何实现采用高效的缓存策略提供静态资源

leverage-browser-caching-1-1024x512-1

Google PageSpeed Insights是评估网站性能工具之一。但是,它的一些建议(例如“采用高效的缓存策略提供静态资源”警告信息)可能会使缺乏经验的站长感到困惑。

当你对其进行分解时,缓存并不难理解。通过一些调整,在网站上实施最佳代码,以减少加载时间并提高PageSpeed得分。

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

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

为了了解“采用高效的缓存策略提供静态资源”警告信息,先了解一下Google PageSpeed Insights会有所帮助。如果您是该平台的新手,建议先阅读完整的指南《如何做到Google PageSpeed Insights测试满分》一文。

采用高效的缓存策略提供静态资源是Google PageSpeed返回的许多“诊断结果”之一,可作为改善分数的建议,如下所示:

Google PageSpeed Insights之缓存策略

Google PageSpeed Insights之缓存策略

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

但是,每个缓存的资源都需要指定的到期期限。这会告诉浏览器您网站上的内容何时过时,过期后使用更新的版本替换其缓存的副本。

如果您在性能测试结果中看到“采用高效的缓存策略提供静态资源”警告,则可能意味着以下两种情况之一:

  • 您的站点服务器或第三方服务器缺少Cache-Control或Expires标头。
  • 存在必需的标头,但是有效期很短,因此对性能没有太大影响。

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

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

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

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

确定这是否是导致“采用高效的缓存策略提供静态资源”警告的一种简单方法是查看每个资源的详细信息。在Google PageSpeed Insights最新版本,您会在“ 缓存TTL ”下看到“None”:

在Google PageSpeed Insights中缓存TTL列表

在Google PageSpeed Insights中缓存TTL列表

又或者缓存有效期过短时,最新版的Google PageSpeed Insights也会在“采用高效的缓存策略提供静态资源”警告列表罗列,只是“ 缓存TTL ”展示的是缓存有效期:

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

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

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

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

HTML Cache控件是一个非常类似的问题,并且与缓存教程有很好的链接,可以回答你的大部分问题(例如,[http://www.mnot.net/cache_docs/#EXPIRES).)总结一下, 当您需要更多地控制缓存的方式时,建议对图像和Cache-Control等静态资源使用Expires。via itranslater.com

您不必同时添加两者,因为这可能是多余的。通常推荐使用较新的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  文件中:

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$">
Header set Cache-Control "max-age=84600, public"

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

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

您可以在Nginx中添加Expires头,方法是将以下内容添加到服务器NG配置文件中。在此示例中,您可以看到如何根据文件类型指定不同的到期时间:

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 ##
<IfModule mod_expires.c>
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"
</IfModule>
## EXPIRES HEADER CACHING ##

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

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

比较讽刺的是,有时Google Analytics谷歌统计代码的JS文件也会被Google PageSpeed Insights识别为未优化的静态资源:

谷歌统计JS代码

谷歌统计JS代码

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

不过请注意,Google不支持此方法。

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

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

CAOS 插件

CAOS 插件

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

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

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

建议也将其设置为页脚加载中:

CAOS跟踪代码位置设置

CAOS跟踪代码位置设置

温馨提示:CAOS不能与其他Google Analytics相关的WordPress插件一起使用。

(2)使用插件WP-Rocket实现浏览器缓存谷歌统计JS脚本

或者,您可以使用WordPress缓存插件WP-Rocket来实现相同的目标:

WP-Rocket插件

WP-Rocket插件

此插件的Google跟踪组件可实现本地托管谷歌统计脚本。只需在WP-Rocket>Add-ons下启用该功能即可。

WP-Rocket及其组件与其他谷歌统计相关插件兼容。但注意,作为专业插件它的价格不菲,49美元/年起。

3.尽量减少使用第三方脚本

有时,由于Google Analytics的脚本文件托管在Google服务器上,因此它可能影响到您Google PageSpeed Insights评分,因为你无法控制其缓存机制。

其他第三方脚本也是如此。如果您是通过WordPress网站管理业务,则很可能会运行其他第三方脚本来跟踪转化,A/B测试等。

这可能包括诸如百度统计,百度站长联盟,阿里妈妈广告联盟,CNZZ统计,51统计,Crazy Egg,Hotjar等脚本。不幸的是,除非找到在本地服务器托管这些脚本的方法,否则您对此无能为力,完全无法控制它们。

理想情况下,如果您想提高Google PageSpeed得分,则应该最大限度地减少使用第三方脚本。

小结

Google PageSpeed Insights虽然不能绝对地评估您网站的性能,但仍然可以帮助你更好地理解网站性能的瓶颈所在。通过解决“采用高效的缓存策略提供静态资源”下的警告信息来提高得分,可以帮助网站加载性能上升一个档次,提升网站用户体验。

如果您在Google PageSpeed Insights中看到此警告,则可以通过以下方法解决此问题:

  1. 添加Cache-Control或Expires标头。
  2. 利用浏览器缓存进行Google Analytics统计代码脚本。
  3. 尽量减少使用第三方脚本。

评论留言