目录
您想知道如何轻松修复 WordPress 网站中的杠杆浏览器缓存警告吗？您来对地方了。Google PageSpeed Insights 是衡量网站性能的有用工具，但它的一些建议可能会吓倒。“利用浏览器缓存”建议最近已更改为“使用高效的缓存策略提供静态资产”。
如何修复您的 WordPress 网站的此警告？
在本文中，我们将分享您可以遵循的几种优化技术，我们还将解释什么是“利用浏览器缓存”。最后，还将在使用 WP Rocket 之前和之后进行性能测试，以了解提高 Google PageSpeed 分数和解决浏览器缓存问题有多容易。
什么是浏览器缓存及其工作原理
以简明英语解释的浏览器缓存
实施浏览器缓存将通过减少每个页面的请求数量来帮助减少服务器负载。 缓存允许将最近的网页临时存储在访问者的 Web 浏览器中。
可以通过浏览器缓存来加快网页加载速度，浏览器缓存将经常访问的资源存储在本地内存中以加快访问速度。所有请求都在本地运行，而不是通过网络连接发送。因此，您的 HTML 页面和图像的呈现速度更快，从而减少了带宽使用和服务器负载。
要在浏览器中激活缓存，我们将查看 “Expires” 和 “Cache-Control” 标头：
| “Expires” ：在浏览器上启用缓存并指定删除资源的持续时间的基本方法。 |
| “Cache-Control” ：更详细，并提供了精细的选项来控制浏览器的缓存行为。 |
如何检查您的站点是否启用了浏览器缓存
要检查您的 WordPress 网站上是否启用了浏览器缓存，请转到 Google PageSpeed Insights 并使用您网站的 URL 运行审核。如果您看到“使用高效缓存策略提供静态资产”警告，则表示您没有使用缓存。
同样，您可以使用 GTmetrix 检查浏览器缓存是否已激活：
最后，您还可以使用 Chrome 开发人员工具中的“网络”选项卡。只需选择要分析的页面并选中 “Headers” 选项卡：
PageSpeed Insights 上的使用高效缓存策略提供资产意味着什么？
“利用浏览器缓存”是 PageSpeed Insights API 版本 4 中的建议，该 API 已于 2019 年 5 月关闭。从版本 5 开始，Chrome 用户体验报告中的真实数据和实验室数据都来自 Lighthouse，Lighthouse 将诊断替换为“使用高效的缓存策略提供资产”警告。
| “利用浏览器缓存”（2019 年）→“使用高效的缓存策略提供资产”（2021 年） |
为什么会看到“使用高效缓存策略提供静态资产”问题？
利用浏览器缓存意味着您应该指定 Web 浏览器应将您的文件在本地存储多长时间 – 在访问者的浏览器上。浏览器缓存涉及两个标头，即 “Cache-Control” 和 “Expires”。如果您看到 Lighthouse 的问题，则意味着两个标头都缺失或它们的过期期限太短。
| Lighthouse 根据以下标准标记所有未缓存的静态资源： |
| – 资源是字体、图像、媒体文件、脚本或样式表 |
| – 资源具有 200、203 或 206 HTTP 状态代码 |
| – 资源没有明确的无缓存策略 |
Lighthouse 将您的 WordPress 网站标记为该问题的主要原因有三个，即：
1. 利用浏览器缓存进行 Google Analytics 和标签管理器
Google Analytics 是 WordPress 网站统计方面最受欢迎的工具。但是，“analytics.js”文件中的代码会来回传输到 Google 的服务器，因此浏览器每次都会将其视为新的外部资源。Google 设置了 2 小时的缓存策略，对于 Lighthouse 来说太短了，这会触发警告。
2. 将浏览器缓存用于其他第三方和外部脚本
有时，您可能会使用需要从其他服务器添加一些额外脚本的插件，例如 YouTube 视频或您的 Instagram 提要。一些插件作者已经在他们的脚本上设置了缓存策略。
3. 过期头设置不正确的 Nginx 服务器
Nginx 是快速交付内容的服务器之王。问题是，Nginx 不使用 .htaccess 文件，因此如果您希望 Nginx 读取它们，则需要在主服务器块中添加两个标头的配置。如果不这样做，Nginx（和 Lighthouse）将无法正确检测过期数据。
在 WordPress 上利用浏览器缓存也意味着提高您网站的加载速度，因为不需要“重新下载”文件。为了让事情变得更容易，我们整理了一份技术列表，您可以使用这些技术来修复杠杆浏览器缓存警告（有和没有 WordPress 插件）。
如何使用插件通过高效的缓存策略提供资产
利用浏览器缓存的最简单方法是使用 WordPress 插件来实现，例如：
- WP Rocket 是 WordPress 最好的缓存插件之一，允许您在 WordPress 中利用浏览器缓存。
WP Rocket 通过 .htaccess 文件添加一些规则来为某些文件设置最佳过期长度。
注意：WP Rocket 将自动在 Nginx 服务器上运行，但您可以从 Github 添加一些额外的配置。它将添加标头以缓存 CSS、JS 和图像，通过减少对 Web 服务器的请求来利用浏览器的缓存。
| WP Rocket 会自动在 .htaccess 文件中应用必要的“Expires”标头规则 |
- Leverage Browser Caching – 仅限于 Apache/LiteSpeed 服务器，其中可以使用 .htaccess 文件控制浏览器缓存（它不适用于 Nginx 服务器）。没有需要激活的选项。它在激活插件后立即工作。它只是在 .htaccess 文件中添加了浏览器缓存代码。
- Complete Analysis Optimization Suite （CAOS） – 通过在本地托管 analytics.js/gtag.js 文件来修复 WordPress 中的 GA 利用浏览器缓存警告。默认情况下，Google 将过期时间设置为 2 小时，而插件会简单地覆盖此设置。请注意，CAOS 不能与任何其他 GA 的相关插件一起使用。
如何在没有插件的情况下使用高效的缓存策略提供资产
您可以使用一些技术来手动设置静态资源缓存。您需要做的第一件事是弄清楚哪个 Web 服务器用于在网站上提供文件，然后相应地按照这些说明进行操作：
1. 在 nginx 中添加 “cache-control” 和 “expires” 标头
首先，找到通常位于 /etc/nginx/site-enabled/default 的服务器块。
然后，在 Nginx 中的 “expires” 行旁边添加以下代码片段，并注明距离过期的天数：
location ~* \.(png|jpg|jpeg|gif)$ {
expires 365d;
add_header Cache-Control "public, no-transform";
}
location ~* \.(js|css|pdf|html|swf)$ {
expires 30d;
add_header Cache-Control "public, no-transform";
}
Nginx 中的 “Expire” 标头：
location ~* \.(jpg|jpeg|gif|png)$ {
expires 365d;
}
location ~* \.(pdf|css|html|js|swf)$ {
expires 30d;
}
2. 在 Apache 中添加 Cache-Control 标头
对于 Apache 服务器，只需将以下代码放入 .htaccess 文件中即可：
# Expires headers (for better cache control)
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 1 month"
# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
ExpiresByType text/cache-manifest "access plus 0 seconds"
# Your document html
ExpiresByType text/html "access plus 0 seconds"
# Data
ExpiresByType text/xml "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType application/json "access plus 0 seconds"
# Feed
ExpiresByType application/rss+xml "access plus 1 hour"
ExpiresByType application/atom+xml "access plus 1 hour"
# Favicon (cannot be renamed)
ExpiresByType image/x-icon "access plus 1 week"
# Media: images, video, audio
ExpiresByType image/gif "access plus 4 months"
ExpiresByType image/png "access plus 4 months"
ExpiresByType image/jpeg "access plus 4 months"
ExpiresByType image/webp "access plus 4 months"
ExpiresByType video/ogg "access plus 4 months"
ExpiresByType audio/ogg "access plus 4 months"
ExpiresByType video/mp4 "access plus 4 months"
ExpiresByType video/webm "access plus 4 months"
ExpiresByType image/avif "access plus 4 months"
ExpiresByType image/avif-sequence "access plus 4 months"
# HTC files (css3pie)
ExpiresByType text/x-component "access plus 1 month"
# Webfonts
ExpiresByType font/ttf "access plus 4 months"
ExpiresByType font/otf "access plus 4 months"
ExpiresByType font/woff "access plus 4 months"
ExpiresByType font/woff2 "access plus 4 months"
ExpiresByType image/svg+xml "access plus 4 months"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
# CSS and JavaScript
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
</IfModule>
您可以直接在 Github 或 GTMetrix 上找到这些代码片段。
3. 尽可能自托管第三方脚本
第三方脚本是在外部服务器而不是您的服务器上进行的调用。最常见的外部脚本包括广告标签、YouTube 视频、Google Maps 和 Web 字体。
您可以通过在服务器上托管第三方脚本来提高网站的性能。托管它们可以帮助您减少 DNS 查找、往返时间，并通过 HTTP/2 服务器推送等高级功能改进 HTTP 缓存标头。
重要提示：并非所有第三方脚本都可以自托管，有些脚本甚至可能会中断。仅当任何关键脚本依赖于自托管（例如 jQuery）时，才建议使用自托管。不让所有第三方脚本都具有适当的浏览器缓存策略是可以接受的;当只有少数几个时，性能提升可以忽略不计。
4. 减少第三方脚本
您可以控制自己的 Google PageSpeed Insights 分数，但页面上的第三方脚本可能会导致问题，因为我们不知道他们的缓存策略是什么样的。此外，所有这些元素都必须从不同的服务器下载，这可能会导致性能问题，因为您的服务器需要连接到多个服务器才能下载它们。
虽然您无法完全控制这些脚本，但您仍然可以通过应用以下四种优化技术来最大限度地减少它们对 WordPress 网站的影响：
- 缩小/组合 CSS 和缩小/组合 JS – 托管在外部域上的文件将被处理并托管在您自己的域上。使用 minifycode.com 等工具来缩小您的代码。
- 延迟外部 JavaScript 的执行 – 以减少其对性能的负面影响。使用 defer 和 async 属性来延迟 JS。
- 优化 Google 字体 – 它确实提高了性能（但不在本地托管字体）。
- 延迟加载图像和视频 – 这将提高外部托管的图像和视频的性能。
5. 使用 Cloudflare 浏览器缓存生存时间 （TTL）
Cloudflare 提供一个 CDN，其中包含 250 台分布在国际上的服务器。这项免费服务为其用户缓存内容，而付费客户可以自定义其数据在全局缓存中提供的时间。默认情况下，Cloudflare 遵循 Expires 标头和 Cache-Control 设置中设置的到期日期，但您也可以根据需要指定不同的时间范围。当 TTL 过期时，浏览器将再次请求资源。
发表回复