利用浏览器缓存加快WordPress加载教程

一般来说，有很多方法可以加速 WordPress 网站，之前搬主题也介绍了不少WordPress优化的文章，可以在搬主题站点搜索，但是在网站速度优化分析期间，浏览器缓存是最常见的问题。在本教程中，搬主题将介绍如何利用 WordPress 中的浏览器缓存来加快您的网站速度。

优化前后您可以使用各种互联网工具（包括Google PageSpeed Insights、GTMetrix和Pingdom）来跟踪和测试网站速度。它们会为您提供精确的结果，并显示网站需要改进的地方。在评估网站速度时，您可能已经看到“利用浏览器缓存”警告。

什么是利用浏览器缓存？

缓存是指浏览器在本地系统上保留网站可缓存资源的时间长度。

其中包括图像、JavaScript、CSS 和其他资源。每次有人访问网站时，保存在您机器上的可缓存材料都会上传回来。因此，网站的加载速度明显提高。人们希望在 WordPress 中使用浏览器缓存就是因为这个原因。

如何利用 WordPress 中的浏览器缓存？

每当用户进入某个域名时，后台就会运行许多进程。

您的 WordPress 网站通过与用户浏览器通信的所有内容变得可见。这些网站元素包括脚本、图形、样式表、内容等。必要时，必须将它们从网站的服务器传输到用户的浏览器。以下是此过程中的步骤：

1. 在访问者的浏览器中输入一个 URL。
2. 浏览器向托管您网站的服务器发出请求（HTTP 请求）。
3. 服务器组装好数据后，用户才能收到数据。此时，用户开始感到速度变慢。人们可以最小化脚本的大小、优化图像大小等措施来阻止这种速度变慢。
4. 数据传输完成后，浏览器最终可以显示网站。当用户访问不同的页面时，该过程会重复。服务器同时收到大量请求可能会导致性能低下。因此，人们必须优化WordPress网站以保持速度。

网络浏览器和软件程序都会使用缓存内容。缓存内容会暂时保存在您的本地磁盘上。术语“Web 缓存”或“HTTP 缓存”指的就是这些数据。每次您访问同一个网站时，浏览器都会从您的计算机上传数据并下载网站内容。

您需要使用特定的工具来确定您的 WordPress 网站是否有效利用了浏览器缓存。

浏览器缓存和服务器缓存之间的区别

为了减少 Web 服务器上的负载和延迟，服务器端 Web 缓存（对于服务器端缓存，我们始终推荐使用LiteSpeed Cache for WordPress）通常需要使用 Web 代理来存储其前面的 Web 服务器的 Web 响应。客户端的 Web 缓存还可以包括基于浏览器的缓存，它可以保存以前访问的 Web 内容的缓存副本。

此过程需要使用网络服务器为您的网站生成缓存网页。上述操作是网页缓存的示例，它主要是服务器端的。

您可以通过几种不同的方式增强服务器缓存系统。最好的选择是更新 Apache 的标头。下一步是使用 WordPress 插件，然后添加 CDN。

方法 1：手动利用 WordPress 中的浏览器缓存

注意：此方法仅适用于 LiteSpeed Enterprise 或Apache。

通过在 .htaccess 文件中添加一些代码，您可以手动利用 WordPress 中的浏览器缓存。为了实现三个不同的目标，您实际上需要添加三段代码：

1. 添加过期标头
2. 添加缓存控制标头
3. 关闭 ETag

您必须有权访问您的网站文件才能添加此代码，这里搬主题以为例，您可以通过登录您的托管帐户或CyberPanel来完成此操作。

转到您的CyberPanel仪表板

从左侧菜单中单击WordPress ->列出 WordPress

您将进入WordPress 网站列表。从这里，单击您的WordPress 网站标题

这是您的CyberPanel WordPress 管理器。单击文件管理器。

在public_html中，您将找到.htaccess文件。请注意，htaccess 规则仅受 LiteSpeed Enterprise 支持。OpenLiteSpeed 不支持。右键单击它并单击CodeMirror

通过复制并粘贴的方式将以下代码添加到.htaccess文件内容的末尾。请勿以任何其他方式修改该文件。

#Customize expires cache start - adjust the period according to your needs
<IfModule mod_expires.c>
  FileETag MTime Size
  AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript
  ExpiresActive On
  ExpiresByType text/html "access 600 seconds"
  ExpiresByType application/xhtml+xml "access 600 seconds"
  ExpiresByType text/css "access 1 month"
  ExpiresByType text/javascript "access 1 month"
  ExpiresByType text/x-javascript "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 application/pdf "access 1 month"
  ExpiresByType image/x-icon "access 1 year"
  ExpiresByType image/jpg "access 1 year"  
  ExpiresByType image/jpeg "access 1 year"
  ExpiresByType image/png "access 1 year"
  ExpiresByType image/gif "access 1 year"
  ExpiresDefault "access 1 month"

</IfModule>
#Expires cache end

上述代码指示浏览器提供静态资源的缓存副本而不是下载新的副本。

刷新/到期时间也包含在设置中：

• HTML 需要 600 秒。
• JavaScript和 CSS 需要一个月。
• 图像需要一年

由于特定资源有有效期，因此访问者无需过于频繁地下载它们。如有必要，您可以快速更改有效期。

要建立浏览器缓存策略，确定资源的缓存方式、缓存位置以及过期前的最大期限，我们需要包含缓存控制标头。我们不需要重复过期时间，因为搬主题之前已经提到过。

以下代码，然后粘贴：

# BEGIN Cache-Control Headers

<IfModule mod_expires.c>
  <IfModule mod_headers.c>
    <filesMatch "\.(ico|jpe?g|png|gif|swf)$">
      Header append Cache-Control "public" 
    </filesMatch>
    <filesMatch "\.(css)$">
      Header append Cache-Control "public"
    </filesMatch>
    <filesMatch "\.(js)$">
      Header append Cache-Control "private"
    </filesMatch>
    <filesMatch "\.(x?html?|php)$">
      Header append Cache-Control "private, must-revalidate"
    </filesMatch>
  </IfModule>
</IfModule>

电子标签将被禁用，因此浏览器必须使用过期标头和缓存控制来代替验证文件。关键如下：

Turn Etags off

<IfModule mod_headers.c>
            Header unset ETag
</IfModule>
FileETag None

完成后，点击“保存”。

方法 2：使用插件利用 WordPress 中的浏览器缓存

以上的教程比较专业性，如果不懂的话一个错误就可能彻底毁掉你的WordPress网站，因此编辑 .htaccess 文件是非常危险的。因此，如果你不想冒任何不必要的风险，你可以使用 W3 Total Cache 之类的插件。

这里搬主题可以下载中文版

W3 Total Cache Pro汉化中文版|WordPress缓存专业加速插件介绍

2年前

012935

W3 Total Cache 插件

以下是如何使用 W3 Total Cache（用于此目的的最佳插件之一）来利用浏览器缓存。

进入您的WordPress 仪表板

点击左侧菜单中的插件->添加新插件

搜索W3 Total cache。现在安装并激活此插件

性能选项卡将出现在左侧菜单中。单击左侧菜单中的“性能” -> “常规设置”

向下滚动到浏览器缓存并确保其启用并保存更改

现在从左侧菜单中单击“性能” -> “浏览器缓存”

确保

1. 设置过期标头
2. 设置缓存控制
3. 设置实体标签

已启用。保存所有更改。

LiteSpeed 缓存插件

CyberPanel 默认为每个用户在部署每个 WordPress 网站时提供 LiteSpeed Cache。

只需打开该功能，缓存插件 LiteSpeed Cache 即可让您利用浏览器缓存。

进入你的WordPress 仪表板

从左侧菜单中单击LiteSpeed Cache -> Cache

点击顶部栏的“浏览器”选项卡

确保浏览器缓存已启用，然后单击“保存更改”

结论

请记住，有时安装WordPress缓存插件后，您不会立即注意到所做的更改。CSS/样式表文件是造成此延迟的原因。由于您已在计算机上保存了浏览器缓存，因此您将无法查看所做的更改。建议使用浏览器的隐身功能查看网站，以便在多次修改后正确查看。如果使用此功能，您将不会消耗缓存资源，并且您应该能够清楚地注意到更改。

您选择利用浏览器缓存的方法最终无关紧要。观察其实际运行情况才是最重要的。只要 WordPress 中的“利用浏览器缓存”按预期运行，您使用的方法就无关紧要。方法没有对错之分；无论您选择哪种方法，结果都是一样的。无论您决定更改 .htaccess 文件还是使用插件，“利用浏览器缓存”都会缩短加载时间。