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

作者 : 慕源网 本文共3428个字,预计阅读时间需要9分钟 发布时间: 2021-09-18 共177人阅读

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

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

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

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

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

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

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

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

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

在本节中,我们将完成在特定于服务器的配置文件的帮助下实现浏览器缓存的必要步骤。

   使用 Apache 服务器缓存浏览器

在 Apache 中,该mod_expires模块允许您设置过期和缓存控制标头。具体来说,您可以使用ExpiresDefaultExpiresByType指令以更易读的语法配置缓存生存期。您可以在.htaccessWordPress 安装根目录的文件中配置它。

继续并.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 网站启用了浏览器缓存!

这就是您可以为您的 WordPress 站点利用 Apache 的浏览器缓存的方法。在下一节中,我们将看到如何在 Nginx 的帮助下实现它。

   使用 Nginx 服务器缓存浏览器

如果您使用 Nginx 服务器运行 WordPress 网站,则需要编辑域的虚拟主机文件。如果您可以通过 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 和 macOS——你可以运行nginx -t命令来测试它。对于 Windows 系统,您可以使用 GUI 工具来完成。最后,如果一切正常,您可以继续并重新启动 Nginx 服务器。Nginx服务器重启后,应该开启浏览器缓存,静态资源会缓存在客户端。

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

如何使用第三方插件启用浏览器缓存

在 WordPress 中,几乎没有什么是第三方插件无法实现的。在浏览器缓存方面也是如此。有很多插件允许您从管理端启用不同的缓存功能。在本节中,我们将讨论Leverage Browser Caching插件,这是该类别中的一个流行插件。

首先,继续从WordPress插件目录下载它。按照标准的 WordPress 插件安装说明进行安装。一旦安装,你就完成了!您根本不需要做任何配置!

请务必注意,此插件仅适用于使用 Apache 作为 Web 服务器的站点,因为它会修改位于 WordPress 安装根目录中的.htaccess文件以启用浏览器缓存。当 Leverage Browser Caching 插件写入.htaccess文件时,您需要确保该文件可由 Web 服务器写入。

除了这个插件,还有一些其他插件,你可以尝试和试验看看它们是如何工作的。我鼓励您使用不同的选项来查看它如何影响您的网站性能。

另一个包含浏览器缓存设置的强大插件是WP-Optimize。您可以在我们关于 WordPress 基本插件的免费课程中了解如何使用 WP-Optimize。

结论

今天,我们讨论了如何在 WordPress 网站上使用浏览器缓存。这是微调网站性能的重要组成部分。


慕源网 » 如何在 WordPress 中使用浏览器缓存

常见问题FAQ

程序仅供学习研究,请勿用于非法用途,不得违反国家法律,否则后果自负,一切法律责任与本站无关。
请仔细阅读以上条款再购买,拍下即代表同意条款并遵守约定,谢谢大家支持理解!

发表评论

开通VIP 享更多特权,建议使用QQ登录