WordPress浏览器缓存优化技巧与插件设置教程

WordPress网站在设置缓存机制与未设置缓存机制的情况下，加载速度的差距堪称天壤之别。无论是使用Google PageSpeed Insights、GTmatrix还是Pingdom等工具进行网站测速，它们往往都会建议通过htaccess或Nginx配置浏览器缓存，或者利用现有的WordPress缓存插件来实现这一目标。我们在另一篇文章《网站测速性能测试深入浅出教程[附15款常用网站测速工具]》中详细介绍了网站测速方法，有兴趣的站长不妨参考阅读。本文将深入探讨如何解决网站测速工具提出的浏览器缓存设置提醒，并分享一些在WordPress中实现浏览器缓存的实用技巧，帮助您将网站加载速度提升高达50%。文章导航：什么是优化浏览器缓存？浏览器缓存如何加速您的网站？如何修复浏览器缓存警告？在WordPress中启用浏览器缓存？在Apache服务器上通过htaccess设置浏览器缓存（不使用WordPress插件）在Web服务器NGINX上启用浏览器缓存（不使用WordPress插件）使用WordPress缓存插件实现浏览器缓存？#1 WP Fastest Cache#2 Cache Enabler – WordPress Cache#3 W3 Total Cache什么是优化浏览器缓存？优化浏览器缓存的核心在于设置浏览器本地存储网站可缓存资源的时间值，主要针对图像、JavaScript和CSS等文件。通过这种方式，当用户再次访问相同页面时，浏览器可以直接从本地缓存中读取资源，而无需重复下载，从而显著提高站点加载速度。在使用Google Pagespeed进行网站速度测试时，您通常会收到建议为WordPress的某些资源设置浏览器缓存的提示。这些可缓存资源通常是网站文件，如图像、JavaScript和CSS等，它们可以被浏览器临时存储。浏览器缓存如何加速您的网站在详细探讨WordPress浏览器缓存优化之前，让我们先理解其工作原理及对网站加载速度的加速作用。Web浏览器在加载网站时需要从服务器检索多种资源，包括HTML文件、CSS文件、JS文件、文本和图像等。Web缓存技术则允许浏览器和软件应用程序在本地磁盘上临时存储或“记住”这些访问过的网页资源，这种临时存储的数据被称为“Web缓存”或“HTTP缓存”。当您再次访问同一网站时，浏览器只需下载更新内容，而本地缓存中的数据则直接从您的电脑读取。因此，Web缓存不仅减少了带宽使用和服务器负载，更是加快网页加载的关键因素。换句话说，它通过以下方式提升网页加载速度：（1）在本地缓存网站文件一段时间；（2）从本地存储加载文件以供下次访问，直到缓存时间失效；（3）因此，从本地存储加载网站文件有助于浏览器更快地呈现和显示网站。如何修复浏览器缓存警告要修复浏览器缓存设置警告，您的Web服务器需要允许浏览器在本地磁盘上临时存储访问过的Web页面资源。当用户再次访问您的站点时，由于本地已缓存部分可用静态资源，网站将加载更快，从而显著提升加载速度。要在WordPress中启用浏览器缓存，您需要通过在HTTP标头中添加缓存控制标头和ETag标头来设置内容过期日期。Cache-Control状态通过Web浏览器指出特定文件的缓存周期，而ETag用于验证缓存资源和请求资源之间的更改。您可以根据资源更改的频率设置到期日期，例如图像类资源通常可以设置一年。在WordPress中启用浏览器缓存您可以通过以下方式设置WordPress网站的浏览器缓存：添加Expires Headers、添加Cache-Control Headers、关闭ETag。下面将详细讨论如何添加Expires Headers和Cache-Control Headers以及关闭ETag。在Apache服务器上通过htaccess设置浏览器缓存（不使用WordPress插件）如果您的网站托管在Apache Server上，可以编辑WordPress的htaccess文件（通常位于WordPress网站根目录）。将以下代码复制并粘贴到htaccess文件中并保存。# TN – START EXPIRES CACHING# ExpiresActive OnExpiresByType text/css “access 1 month”ExpiresByType text/html “access 1 month”ExpiresByType image/gif “access 1 year”ExpiresByType image/png “access 1 year”ExpiresByType image/jpg “access 1 year”ExpiresByType image/jpeg “access 1 year”ExpiresByType image/svg “access 1 year”ExpiresByType image/x-icon “access 1 year”ExpiresByType application/pdf “access 1 month”ExpiresByType application/xhtml-xml “access 1 month”ExpiresByType application/javascript “access 1 month”ExpiresByType text/x-javascript “access 1 month”ExpiresByType application/x-shockwave-flash “access 1 month”ExpiresDefault “access 1 month”# TN – END EXPIRES CACHING# Tips：根据您网站的静态资源更新频率设置缓存时间，例如图像类资源一般设置一年。此外，在htaccess文件中的Expires Headers代码下添加Cache-Control Headers，如下示例。# TN – BEGIN Cache-Control HeadersHeader set Cache-Control “public”Header set Cache-Control “public”Header set Cache-Control “private”Header set Cache-Control “private, must-revalidate”# TN – END Cache-Control Header最后，关闭ETag，在htaccess文件添加如下代码。您可以在此处阅读有关ETag的更多信息。# TN – BEGIN Turn ETags OffFileETag None# TN – END Turn ETags Off之后，如果您使用了缓存插件，请保存WordPress的htaccess文件并清除所有缓存。至此，您已通过htaccess成功启用了WordPress站点的浏览器缓存。温馨提示：您知道Gzip压缩还可以提高您的网站加载速度吗？如果没有启用，请阅读参考文章《WordPress网站利用Gzip压缩提升网站加载速度教程.》在Web服务器NGINX上启用浏览器缓存（不使用WordPress插件）如果您使用的是Nginx服务器，可以通过在.conf文件（通常存放在/usr/local/nginx/conf）中编辑和添加以下代码来启用浏览器缓存。Add Expires Headers (NGINX)location ~* \.(jpg|jpeg|png|gif|ico|css|js|pdf|svg)$ { expires 365d; }location ~* \.(pdf|html|swf)$ { expires 90d; }Add Cache-Control Headers (NGINX)location ~* \.(jpg|jpeg|png|gif|ico|css|js|pdf|svg)$ { expires 90d; add_header Cache-Control “public, no-transform”; }如果NGINX服务器上有多个网站，建议您创建一个xyz.conf文件并添加上述代码。将此文件保存在/etc/nginx/vhost/xyz.conf中。编辑后重新加载Nginx服务器，即可成功激活NGINX服务器上的浏览器缓存规则。使用WordPress缓存插件实现浏览器缓存现在，让我们看看一些主流的WordPress缓存插件，它们支持启用浏览器缓存。虽然通过配置Web服务器配置文件实现更佳，但使用插件更简单快捷，无需折腾服务器。我们推荐以下三个WordPress缓存插件。#1 WP Fastest CacheWP Fastest Cache是最受欢迎且被许多知名WordPress博客推荐的缓存插件之一。截至目前，该插件已有近百万个激活安装。下载并安装启用WP Fastest Cache插件。进入WP Fastest Cache设置界面，点击Setting选项卡。按照截图所示勾选必要的缓存设置项，然后单击提交按钮。当提示设置已保存，即启用了浏览器缓存设置。除了实现浏览器缓存，该插件还提供其他加速页面速度的选项，如开启Gzip压缩、精简HTML和CSS、合并CSS和JS以减少HTTP请求等。此外，它还可以生成动态WordPress站点的静态HTML文件等。#2 Cache Enabler – WordPress Cache另一个插件是Cache Enabler – WordPress Cache，由KeyCDN开发。该插件获得了4.5+星评分。除了浏览器缓存，该插件还有一些独特的功能来加速您的网站。此外，它实现了承诺的功能，并与其他WordPress性能插件兼容。首先下载安装并启用该插件。进入该插件的设置界面，勾选启用leverage browser caching，保存设置即可。该插件还有许多其他功能，例如支持自动和/或手动清除缓存、手动清除页面特定的缓存、在仪表板上显示总缓存大小、支持HTML和内联JavaScript瘦身等。此外，支持自定义文章类型等。#3 W3 Total Cache – WordPress plugin相信大部分WordPress站长都听说过W3 Total Cache – WordPress插件，这是一个非常强大的缓存插件。首先，下载安装并启用插件，然后进入W3 Total Cache Plugin的常规设置。向下滚动并启用浏览器缓存，保存所有设置。此外，导航到页面顶部的“浏览器缓存设置”选项卡。在此页面上的“常规设置”中指定可用的缓存标头。设置Expires Headers、Set Cache-Control Headers和Set entity tag（eTag）——选中所有框。最后保存所有设置。温馨提示：安装启用缓存插件后，如果您对主题进行了任何更改，尤其是在CSS样式表。由于浏览器缓存，您可能无法立即看到更改。因此，若您修改了样式文件/JS文件，建议在隐身窗口中打开您的网站以查看更改。如果CSS更改未在WordPress中显示，则使用插件Busted来刷新或者通过清除缓存等方式来让更改生效。希望您通过本文找到有效的办法来提升WordPress站点的加载速度。您最终采用哪些方法来提升网站加载速度，不妨留言与我们一起探讨。