如何在WordPress中添加缓存文件过期标头

缓存过期标头是让Web浏览器知道是从访问者的浏览器缓存还是从您的服务器加载网页资源(如图像)的规则。这些可以帮助提高您网站的性能。

在本教程中,我们将向您展示如何在WordPress中添加缓存过期标头的两种方法。

如何在WordPress中添加缓存文件过期标头-1

WordPress中如何使用缓存过期标头?

当有人第一次访问您的WordPress网站上的网页时,所有文件都会一个一个地加载。浏览器和WordPress托管服务器之间的所有这些请求都会增加网页加载时间。

浏览器缓存将部分或全部文件存储在访问者的计算机上。这意味着他们下次访问该页面时,可以从他们自己的计算机加载文件,从而提高您的WordPress性能。

现在您可能想知道,浏览器如何知道要保存哪些文件以及将它们保留多长时间?

这就是过期标标头的用武之地。

使用expires headerscache-control headers设置关于保存哪些文件以及保存它们多长时间的规则。在本文中,我们将重点介绍缓存过期标头,因为它们对于大多数用户来说设置起来更简单。

缓存过期标头为浏览器缓存中存储的每种类型的文件设置过期日期。在该日期之后,文件将从您的服务器重新加载,以便为访问者提供最新版本的页面。

我们将向您展示如何使用两种不同的方法添加缓存过期标头。

方法 1:使用WordPress插件WP Rocket添加过期标头

WP Rocket是市场上对初学者最友好的WordPress缓存插件。启用后,它会立即工作以加快您的网站速度,而无需像许多其他缓存插件一样处理复杂的配置设置。

WP Rocket是一个高级插件,但其免费版本已经包含所有功能最好的部分。

如何在WordPress中添加缓存文件过期标头-2

您需要做的第一件事是安装并激活WP Rocket插件(官网)。

安装并激活后,WP Rocket将自动打开浏览器缓存。默认情况下,它会使用最佳设置添加过期标头和缓存控制标头,以加速您的WordPress网站。

这就是你需要做的。如果您想了解有关该插件的更多信息,请参阅有关如何在WordPress中正确安装和设置WP Rocket的教程

如果您更喜欢使用免费的缓存插件将过期标头添加到您的网站,那么我们建议您查看W3 Total Cache

W3 Total Cache提供了一些与WP Rocket相同的功能,但它并不适合初学者。您必须手动启用 expires 标头,因为它不会自动启用它们。

方法 2:使用代码在WordPress中添加过期标头

在WordPress中添加过期标头的第二种方法涉及向WordPress文件添加代码。不建议初学者使用它,因为代码中的错误可能会导致严重错误从而可能影响网站正常加载。

在进行这些更改之前,我们建议您先备份您的WordPress网站。有关更多详细信息,请参阅有关如何备份和恢复WordPress站点教程

话虽如此,让我们来看看如何通过向WordPress添加代码来添加过期标头。

确定您的网站运行的是Apache还是Nginx

首先,您需要弄清楚您的网站是使用Apache还是Nginx服务器。为此,请浏览到您的网站并右键单击该页面,然后选择“Inspect(检查)”选项。

如何在WordPress中添加缓存文件过期标头-3

接下来,您需要单击页面顶部的“Network(网络)”选项卡。您可能需要刷新页面才能加载结果。

如何在WordPress中添加缓存文件过期标头-4

之后,您可以单击“Name(名称)”列顶部的域名。然后您应该向下滚动到“Response Headers(响应标题)”部分并检查名为“server(服务器)”的项目。

如何在WordPress中添加缓存文件过期标头-5

这将显示您正在使用哪个Web服务器。在这种情况下,该站点在Nginx服务器上运行。

现在您知道您的网站使用的是哪个Web服务器,请使用下面的链接继续前进:

如何在Apache中添加过期标头

要将过期标头添加到Apache服务器,您需要将代码添加到您的.htaccess文件中。

要编辑此文件,您需要使用FTP客户端或主机的文件管理器工具连接到您的WordPress主机帐户。您将在网站的根文件夹中找到您的文件.htaccess(要是无法找到.htaccess,怎么办?)

如何在WordPress中添加缓存文件过期标头-6

有时可以隐藏 .htaccess文件。如果您需要帮助找到它,请参阅我们的指南,了解为什么在您的 WordPress 网站上找不到 .htaccess 文件

接下来,您需要添加 expires 标头以打开浏览器缓存。这会告诉Web浏览器在删除网站资源之前应将其存储多长时间。

您可以在.htaccess文件顶部附近添加以下代码以添加过期标头:

## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "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 image/x-icon "access 1 year"
ExpiresDefault "access 3 days"
</IfModule>
## EXPIRES HEADER CACHING ##

这些值应该适用于大多数站点,但如果您的需求不同,您可以调整时间段。

请注意,代码根据文件类型设置了不同的缓存到期日期。图像的缓存时间比 HTML、CSS、Javascript 和其他文件类型长,因为它们通常保持不变。

如何在Nginx中添加过期标头

如果您使用Nginx服务器来托管您的WordPress博客,那么您需要编辑服务器配置文件以添加过期标头。

您如何编辑和访问此文件取决于您的主机,因此如果您在访问该文件时需要帮助,可以联系您的主机提供商。

然后,您需要添加以下代码来添加 expires 标头:

location ~* \.(jpg|jpeg|gif|png|svg)$ {
  expires 365d;
}
  
location ~* \.(pdf|css|html|js|swf)$ {
  expires 3d;
}

此代码将为不同的文件类型设置过期时间。再次注意,图像的缓存时间比HTML、CSS、JS和其他文件类型长,因为图像通常保持不变。

我们希望本教程能帮助您了解如何在WordPress中添加过期标题。您可能对下列文章也会感兴趣:

标签

评论交流

闪电博沟通群

扫码加入QQ交流群 695891297