如何在 WordPress 中利用浏览器缓存
已发表: 2024-05-16尽管您努力提高其性能，您的 WordPress 网站是否仍然落后？ 你不是一个人。
许多用户想知道使网站加载速度更快的秘密成分。
一把钥匙？ 浏览器缓存。
您可能听说过它，甚至可能尝试清除浏览器缓存以加快速度。
这个概念不是火箭科学。 由于缓慢的加载可能会导致访问者流失，因此值得尝试使用浏览器缓存来加快加载速度。
在本指南中，我们将讨论浏览器缓存的重要性以及 WordPress 用户如何实施它来显着缩短网站的加载时间、提高用户满意度并提高 SEO 性能。
让我们开始吧。
什么是浏览器缓存以及为什么它很重要？
浏览器缓存是指在用户首次访问网站后，将网站文件（例如 HTML 页面、图像、CSS 样式表和 JavaScript 文件）存储在用户设备本地。 下次用户返回时，设备已经拥有了一些所需的内容，因此页面加载速度更快。
NitroPack 研究表明，加载时间不超过 3 秒的用户访问的页面数量会增加 60%：
此外，事实证明，访问者会在页面加载 2.75 秒时失去耐心并不成比例地开始放弃网页：
简而言之，3 秒的加载时间是访问者决定留在您的网站并立即转换或离开的临界点。
话虽这么说，通过浏览器缓存减少加载时间肯定会改善用户体验，从而增加将访问者转变为客户的机会。
服务器缓存和浏览器缓存之间的区别
服务器和浏览器缓存是用于提高网站性能的技术，但它们在 Web 浏览过程的不同级别上运行。
上表总结了服务器缓存和浏览器缓存之间的主要区别，包括它们的位置、缓存内容的类型、目的、实现方法、对带宽和服务器负载的影响以及对 SEO 的影响。
您应该启用浏览器缓存吗？
谷歌更喜欢快速加载的网站。 访问者喜欢快速的网络体验。
所以，简而言之，是的，您必须启用浏览器缓存！
但为了进一步详细说明我们的答案，让我们看一下缓存网站的两个最大优势：
首先，它显着缩短了页面加载时间，从而增强了用户体验，并对网站的搜索引擎排名产生积极影响。 更快的加载时间可以降低跳出率和更高的参与度，因为用户更有可能留在快速响应的网站上。
其次，浏览器缓存减少了服务器的负载。 通过允许浏览器重用以前下载的资源，您可以减少向服务器发出的请求数量。 这在流量高峰期间特别有用，可确保您的服务器保持响应并可以处理更多并发用户而不会减慢速度。 此外，您还可以通过购买更便宜且服务器资源更少的托管计划来降低成本。
对于大多数网站来说，浏览器缓存通常是一个很好的做法。 它提高了性能，增强了用户体验，并减少了服务器负载。 通过仔细配置缓存设置，您可以获得好处，同时确保您的用户始终收到新鲜且准确的内容。
选择不启用缓存，请准备好在下次运行性能测试时看到以下警告......
为什么您会看到“使用高效的缓存策略提供静态资源”警告？
使用 Google PageSpeed Insights、GTmetrix、Pingdom 或类似平台等工具运行网站性能测试或审核时，您可能会遇到“使用高效的缓存策略提供静态资产”警告。
简而言之，这意味着您的某些文件可以受益于更长的缓存生命周期（我们将稍后解释如何设置）。
该警告通常会与优化网站速度和加载时间的其他建议一起出现在性能报告中：
好消息是这个警告很容易修复。 事实上，性能工具列出了所有可以从缓存中受益的文件，因此无需猜测。
例如，GTmetrix 根据文件是否是字体、图像、样式表、脚本或媒体文件以及是否返回 200、203 或 206 HTTP 状态代码来识别可以存储在缓存中的文件。 如果没有禁止缓存它们的规则，GTmetrix 会认为它们已被有效缓存。
您可以利用此分析来识别可以存储在缓存中的文件，从而优化网站的性能。
通过利用此分析，您可以获得两个问题中第一个问题的答案： “我应该缓存哪些内容？”
更难的是“如何启用浏览器缓存？”
就是这样…
如何修复 WordPress 中的浏览器缓存（手动）
您可以使用多种选项来解决 WordPress 中的“缺乏缓存”警告，具体取决于其根本原因。 以下是您可以探索的一些潜在解决方案。
添加缓存控制和过期标头
与浏览器缓存相关的标头有两种类型：cache-control和Expires Headers。 在 Google PageSpeed Insights 中，如果您在缓存 TTL 下看到“无” ，则表示您的网站收到了浏览器缓存警告。
Cache-Control标头激活客户端缓存并确定资源的最长期限。 相反，Expires 标头指示资源失效的特定时间。
现在，让我们继续在 Nginx 和 Apache 中添加缓存控制标头的步骤。 在深入研究之前，必须确定您的网站是在 Apache 还是 Nginx 上运行。
- 在浏览器中打开您的网站，然后转到“检查”>“网络”。
- 按Ctrl + R重新加载资源。
- 单击您的网站域名。
- 在标题部分中，找到服务器选项。在下面的屏幕截图中，您可以看到我的站点服务器是Nginx ，它托管在Cloudways上。
- 确定网站的服务器后，下一步是添加Cache-Control Headers 。 您可以使用任何 FTP 服务器（例如 FileZilla）访问 .htacess 文件。
让我们看看如何...
在 Nginx 中添加缓存控制标头
编辑 .htaccess 文件并添加以下代码。
该指令通知您的服务器指定的文件类型将在至少 15 天内保持不变。 在此期间，服务器会保留相关文件，只有在指定的时间过后才会刷新它们。
在 Apache 中添加缓存控制标头
编辑 .htaccess 文件并添加以下代码。
在本例中，缓存设置为在 86,400 秒（即 24 小时）后过期。
在 Nginx 中添加过期标头
您可以将以下代码添加到 .htaccess 文件中以添加过期标头。
在 Apache 中添加过期标头
过期标头会激活缓存并指示 Web 浏览器在删除之前保留特定文件的持续时间。 您可以将后续代码合并到 .htaccess 文件中以包含过期标头。
如何在 WordPress 中利用浏览器缓存（使用插件）
尽管您可以使用多个插件来利用 WordPress 中的浏览器缓存，但我们在这里介绍了 2 个最佳选项：
硝基包
NitroPack 是领先的 WordPress 网站一体式 Web 性能优化解决方案。 通过高级缓存、图像和代码优化、内置 CDN 以及 60 多个功能等优化，该插件允许每个网站所有者立即提升其网站的性能、加载时间、用户体验和转化率。
请按照以下步骤在您的 WordPress 网站上安装并激活 NitroPack 插件：
- 登录您的 WordPress 网站并转到插件 > 添加新插件。
- 搜索NitroPack。
- 安装并激活插件。
- 转到 WordPress 仪表板中的“设置” 。
- 现在，您必须将 WordPress 应用程序与 NitroPack 连接。
- 当您的站点与 NitroPack 连接后，您将被重定向到仪表板。
- 启用缓存预热和HTML 压缩选项。
让我们了解一下 Nitropack 中的缓存预热和 HTML 压缩的含义：
缓存预热
NitroPack 的缓存预热系统可确保您的页面为访问者做好准备，而无需仅依赖自然流量。 启用后，NitroPack 会自动重新优化任何已清除或无效的页面，确保您始终提供优化且最新的内容。
HTML压缩
在 NitroPack 中启用 HTML 压缩可确保提供压缩的 HTML 内容，从而增强网站性能。
NitroPack 使 WordPress 用户可以轻松优化浏览器缓存，因为它会自动设置所需的缓存标头，以解决来自 Google PageSpeed Insights 等工具的“使用高效缓存策略提供静态资源”等警告。 借助 NitroPack 的内容交付网络 (CDN)，可以正确配置缓存标头，从而增强网站性能。
微风
Breeze 是由 Cloudways 开发的免费、简单（但功能强大）且用户友好的 WordPress 缓存插件。 它提供了多种选项来在多个级别上优化 WordPress 性能。 它同样适用于 WordPress、WordPress with WooCommerce 和 WordPress Multisite。
您可以使用 Breeze 缓存插件来利用 WordPress 中的浏览器缓存。
为此，您必须首先在 WordPress 网站上安装并激活该插件。
- 转到 WordPress仪表板 > 设置 > Breeze。
- 转到“基本选项”选项卡并启用“浏览器缓存”选项。 这会将过期标头添加到静态文件中，并要求浏览器从服务器请求文件或从浏览器的缓存中获取文件。
- 在 Breeze 的基本选项中，激活 Gzip 压缩以减少 HTTP 请求的大小，确保更快的性能。
就是这样。
为什么 Cloudways 用户不担心浏览器缓存警告？
如果您是 Cloudways 优化的 WordPress 托管客户，则无需担心在线速度测试工具中出现 WordPress 利用浏览器缓存警告。
Cloudways 自动处理这个问题。 您可以通过导航到Server → Settings & Packages → Advanced ，向下滚动并找到NGINX – Static Cache Expiry来调整过期时间。 默认值为 43200 分钟，相当于 30 天。
对于与站点 Web 性能相关的所有其他内容，您可以安装 NitroPack。