在 WordPress 中添加 Expires 标头的 2 种方法(WordPress 网站浏览器缓存设置过期时间)

什么是 Expires 标头

Expires 标头是一种 HTTP 标头,它指示站点缓存在本地的资源什么时候过期。在 Expires 指示的日期和时间之前,浏览器会从本地缓存中获取站点某些资源。在 Expires 的日期和时间之后,将不再使用浏览器本地缓存,而是必须重新从服务器请求。

Expires 标头可确保老用户在访问网站时不会看到过期的内容。同时,它也有助于加快提升网站的加载速度。。

当用户访问网站时,浏览器端会与服务器进行通信,以请求和下载显示网页所需的文件。根据网页的复杂程度不同,这可能意味着浏览器和服务器之间要传输大量文件。

例如,在下图中,浏览器必须向服务器请求四个静态资源才能显示网页:

在 WordPress 中添加 Expires 标头的 2 种方法(Wordpress 网站浏览器缓存设置过期时间)

但是,如果为这些文件设置了过期标头,那么在下次访问该网站时,用户的浏览器可以从本地缓存中提取可用的文件,而不必每次都从服务器请求和下载它们。

在下图中,请注意浏览器可以从缓存中获取大部分资源,所以只需要从服务器请求一个资源即可完成加载:

在 WordPress 中添加 Expires 标头的 2 种方法(Wordpress 网站浏览器缓存设置过期时间)

因此,添加 expires 标头有两个好处——减少了发送到服务器的 HTTP 请求数量,还减少了需要下载的文件数量。进而可以提升用户访问网站时的加载速度。

在我们了解了 expires 标头的好处之后,让我们来看看 Expires 标头的格式。

Expires 标头格式

expires 标头有两种不同的格式。分别是:

  • ExpiresByType:使用此格式将过期期限应用于不同的文件类型。此标头的语法是 ExpiresByType [文件名] “访问 [时间间隔]”。
  • ExpiresDefault:默认情况下,使用此格式将过期期限应用于所有站点资源。此标头的语法是 ExpiresDefault “访问 [时间间隔]”。

最好为大多数站点资源设置 ExpiresByType 标头,包括 HTML、CSS、JavaScript 、XML文件以及图像和其他媒体文件。然后,便可以使用 ExpiresDefault 为其余内容设置过期标头。 

图像和媒体文件的有效期通常最长(通常约为一年),而其他文件的有效期较短(通常约为一个月)。

现在让我们来看看如何在 WordPress 网站设置过期标头 。

如何在 WordPress 中添加过期标头

要在 WordPress 中添加过期标头,可以通过修改服务器文件或使用插件实现。前者最适合熟悉 WordPress 的用户,因为修改服务器文件可能会破坏网站的正常运行。如果您没有太多的技术经验,那么使用插件会更好。

不用插件在 WordPress 中添加过期标头

在 WordPress 中手动添加过期标头,要看服务器部署的是 Apache 还是 Nginx ,它们的过程略有不同。

在 Apache 服务器上添加过期标头

1.通过服务器面板或FTP 客户端连接到服务器。

2.导航到网站根目录,通常为 public_html 文件夹。

3.找到根目录下的.htaccess 文件。注意:有时需要显示隐藏文件才能看到。

在 WordPress 中添加 Expires 标头的 2 种方法(Wordpress 网站浏览器缓存设置过期时间)

4.可以通过管理面板的文件编辑器打开 .htaccess,也可以将其下载到本地,然后使用代码编辑器中编辑它。

5.在 #END WordPress 行之前添加以下代码片段:

 <IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/html "access 1 month"
ExpiresByType text/css "access 1 month"
ExpiresByType text/javascript "access 1 month”
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/svg "access 1 year”
ExpiresByType image/gif "access 1 year"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month”
ExpiresByType application/xhtml+xml "access 1 month""
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 4 days"
</IfModule>

请注意,不同的文件类型有不同的有效期。可以根据您的内容情况,来对它们进行自定义的更改。

6.保存文件(如果是在本地更改需要通过 FTP 将其上传到网站根目录)。

在 Nginx 服务器上添加过期标头

1.使用管理面板编辑器或在代码编辑器中打开配置文件 (conf)。注意:访问和编辑此文件的方式因主机而异。

2.在服务器块中添加以下代码片段:

 
location ~* \.(jpeg|jpg|png|svg|gif)$ {
expires 365d;
}

这会将网站的图像设置为一年后过期。要为其他文件类型设置不同的到期期限,请将此代码重新粘贴到同一部分,替换文件扩展名,然后插入不同的过期时长。以下内容是将 HTML、CSS 和 JavaScript 文件设置为 30 天后过期:

location ~* \.(html|css|js)$ {
expires 30d;
}

3.更改完成后,保存 conf 文件并重新启动 Nginx。

使用插件在 WordPress 中添加过期标头

如果您不习惯修改服务器文件,则可以使用 Wordpless 插件在网站上启用过期标头。虽然有很多插件可以做到,但通过缓存插件设置是一个不错的选择。在插件中只需点击几下即可启用浏览器缓存和过期标题。我们以使用W3 Total Cache为例。

1.单击性能 >浏览器缓存

2.滚动到常规选项。

3.勾选“设置过期标题”选项。

在 WordPress 中添加 Expires 标头的 2 种方法(Wordpress 网站浏览器缓存设置过期时间)

4.然后,向下滚动到 CSS & JS 部分,选中“设置过期标头”旁边的框,然后输入 Expires 标头的值(以秒为单位)。默认情况下, 31536000 秒或 365 天。可以根据需要更改此设置。

在 WordPress 中添加 Expires 标头的 2 种方法(Wordpress 网站浏览器缓存设置过期时间)

5.对 HTML & XML 和 Media & Other Files 部分按照同样的方法进行设置。

6.单击保存所有设置

作者:牛奇网,本站文章均为辛苦原创,在此严正声明,本站内容严禁采集转载,面斥不雅请好自为之,本文网址:https://www.niuqi360.com/wordpress/add-expires-headers-in-wordpress/

(0)
上一篇 1天前
下一篇 22小时前

相关推荐

发表评论

登录后才能评论