如何在WordPress中使用浏览器缓存

在本文中，我将讨论浏览器缓存的好处以及如何将其用于wordpress网站。在本文的前半部分，您将学习使用 Apache 和 Nginx 服务器配置来设置浏览器缓存。然后我将向您展示如何使用第三方插件进行浏览器缓存。

浏览器缓存以及为什么要使用它

浏览器缓存是一种允许您将网站资源存储在客户端或浏览器端的技术。这意味着浏览器不需要下载这些资源（例如图像或脚本），从而缩短了网页的整体加载时间。这会带来更好的用户体验，因为您的网站加载速度会更快。

除此之外，浏览器缓存显着提高了您的seo排名——它被认为是网站的基本要求。如果您使用 Google PageSpeed 等工具衡量您的网络性能得分，您会发现在利用浏览器缓存后有显着的改进。

当您的网站启用浏览器缓存时，浏览器究竟做了什么？基本上，当您请求网页时，浏览器会在后台向服务器发出大量请求，以加载不同的资源，如图像、css、javascript和字体文件。启用浏览器缓存后，它将所有这些资源存储在客户端或用户端。因此，当用户浏览您网站的其他页面时，浏览器不必再次从服务器下载这些资源，因为它可以使用缓存的资源。

使用浏览器缓存的好处是双重的。首先，它减少了浏览器为了加载资源而必须向服务器发起的 HTTP 请求的数量。此外，由于它从浏览器缓存中加载所需资源，因此整体页面速度显着提高。

从广义上讲，您可以通过两种不同的方式为您的 WordPress 网站实现浏览器缓存。如果您喜欢编辑一些配置文件，您可以通过编辑特定于服务器的配置文件来实现它。另一方面，如果您无权访问您的服务器配置或不想冒险弄乱它，您可以使用第三方插件，这些插件允许您从管理员端配置不同的缓存选项。

如何利用 Apache 和 Nginx 的浏览器缓存

在本节中，咱们将通过特定于服务器的配置文件来完成实现浏览器缓存的必要步骤。

使用 Apache 服务器进行浏览器缓存

在 Apache 中，该mod_expires模块允许您设置过期和缓存控制标头。具体来说，您可以使用ExpiresDefault和ExpiresByType指令以更易读的语法配置缓存生命周期。您可以在WordPress 安装根目录的文件中对其进行配置。.htaccess

继续并.htaccess在您喜欢的文本编辑器中打开文件。在文件末尾添加以下代码并保存。

<IfModule mod_expires.c>
  ExpiresActive on

  # whitelist expires rules
  ExpiresDefault "access 1 month"

  # Favicon (cannot be renamed)
  ExpiresByType image/x-icon "access plus 1 week"

  # Media: images, video, audio
  ExpiresByType image/gif "access plus 1 month"
  ExpiresByType image/png "access plus 1 month"
  ExpiresByType image/jpg "access plus 1 month"
  ExpiresByType image/jpeg "access plus 1 month"
  ExpiresByType video/ogg "access plus 1 month"
  ExpiresByType audio/ogg "access plus 1 month"
  ExpiresByType video/mp4 "access plus 1 month"
  ExpiresByType video/webm "access plus 1 month"

  # Webfonts
  ExpiresByType application/x-font-ttf "access plus 1 month"
  ExpiresByType font/opentype "access plus 1 month"
  ExpiresByType application/x-font-woff "access plus 1 month"
  ExpiresByType image/svg+xml "access plus 1 month"

  # CSS and JavaScript
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"

  <IfModule mod_headers.c>
    Header append Cache-Control "public"
  </IfModule>
</IfModule>

如您所见，咱们为不同类型的文件配置了浏览器缓存。例如，该指令ExpiresByType image/gif "access plus 1 month"告诉浏览器它应该将所有.gif文件缓存一个月。同样，咱们也为其他扩展配置了缓存生命周期。当然，您可以根据需要配置缓存生存期。您可以从以下期间类型中进行选择：

年
月
周
天
小时
分钟
秒

最后，咱们使用该Header append Cache-Control "public"指令告诉浏览器它将被存储在公共缓存中。有了这些设置，您就为您的 WordPress 网站启用了浏览器缓存！

这就是您可以将浏览器缓存与 Apache 用于您的 WordPress 网站的方式。在下一节中，咱们将看到如何在 Nginx 的帮助下实现它。

使用 Nginx 服务器进行浏览器缓存

如果您使用 Nginx 服务器运行 WordPress 网站，则需要编辑dom ain 的虚拟主机文件。如果你对你的服务器有 shell 访问权限，那么访问和编辑这个文件真的很容易。如果您不习惯自己从 shell 编辑文件，我建议您寻求专业开发人员的帮助。如果您的文件中有语法错误，它可能会破坏您的网站！

继续打开您网站的虚拟主机文件。请务必注意，您需要 sudo 或 root 访问权限才能编辑此文件。在大多数情况下，您会在服务器上的/etc/nginx/sites-enabled目录下找到它。server在块中添加以下代码。

server {
  …
  ...
  location ~* \.(x-icon|gif|png|jpg|jpeg|ogg|mp4|webm|x-font-ttf|svg|xml|css|js)$ {
     expires 30d;
     add_header Cache-Control "public, no-transform";
  }
  …
  ...
}

在 Nginx 的情况下，咱们使用该location指令来配置咱们想要启用浏览器缓存的文件类型。之后，该expires指令用于配置缓存生存期。最后，该add_header指令用于添加Cache-Control标题。

保存更改后，您应该测试 Nginx 配置以确保语法正确。对于基于 *nix 的系统——Linux、Unix 和mac OS——你可以运行nginx -t命令来测试它。对于 Windows 系统，您可以使用 GUI 工具来执行此操作。最后，如果一切看起来都不错，您可以继续并让您的 Nginx 服务器休息。Nginx服务器重启后，应该开启浏览器缓存，静态资源会缓存在客户端。

在下一节中，咱们将讨论如何在第三方插件的帮助下启用缓存。