WordPress 浏览器缓存
已发表: 2015-05-18使用杠杆浏览器缓存(也称为过期缓存)显着加速您的 WordPress 网站。
许多速度优化和测试提供商将其称为“浏览器缓存”、“利用浏览器缓存”、“过期标头”、“缓存标头”、“缓存控制”和“ Web 缓存”。 正如 Google PageSpeed Insights 所指出的,GTMetrix 和 MaxCDN 遵循本指南进行正确设置。
什么是浏览器缓存?
浏览器缓存是您的 Web 服务器告诉浏览器将页面或特定资源存储一段时间的方法,这样就不必在每次加载页面时都从服务器下载它们。 这可以缓存整个页面和/或资源,例如 JavaScript、CSS、图像(jpeg、png、gif 等)等等。
您的 WordPress 网站将在第一次为每个用户正常加载,但此后当他们浏览页面并执行操作时它会明显更快。 资源存储在浏览器中,因此在本地加载而不是再次下载。
浏览器缓存的重要性
最终,浏览器缓存的目的和重要性是为您的用户加速您的 WordPress 网站,以便他们获得更愉快的体验。 这可能会导致流量增加、搜索排名提高,甚至提高您想要实现的目标的转化率。
作为额外的奖励效果,通过不为同一访问者在每个页面加载上下载资源,可以减轻 Web 服务器的负载,并且还可以节省 Web 服务器上的带宽。
Web 缓存为服务器和用户提供相互速度
实现浏览器缓存
在您的 WordPress 网站上设置杠杆浏览器缓存实际上非常快速和简单,但设置可能会根据您的设置和您使用的 Web 服务器而有所不同。 默认情况下,最常见的设置是在 Apache Web 服务器上运行 WordPress,但也有其他流行的 Web 服务器可用,例如 Nginx、IIS 等。
使用 WordPress Leverage 浏览器缓存插件可简化实施。
为了使它更容易,有几个 WordPress 利用浏览器缓存插件可用。 我们已经使用、测试并推荐了 WordPress Leverage Browser Caching Ninjas 插件。 它是一个安装和激活插件,为您完成剩下的工作,就这么简单。
Apache 浏览器缓存
Apache 使用.htaccess
文件进行浏览器缓存。 在您的 WordPress 安装的根目录中应该有一个.htaccess
文件,如果没有,您可以创建一个并将以下代码行放入其中,在最顶部:
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##
(https://gist.github.com/tribulant/36be0f683eedfa468f51)
Nginx 利用浏览器缓存
如果您正在运行 Nginx (En-gine-ex) 服务器,则设置与上面的 Apache 不同。 您需要将以下代码添加到您的 vhost 配置文件中,该文件通常位于/etc/nginx/sites-enabled/default
。 将以下内容添加到您的服务器块:

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 365d;
}
(https://gist.github.com/tribulant/19bb56a222af41854ecc)
轻量级
Lighttpd 使用 mod_expire 模块来控制为浏览器提供内容缓存的标头。 这可以相应地进入Lighttpd核心的配置。
$HTTP["url"] =~ "^/images/" {
expire.url = ( "" => "access plus 1 hours" )
}
(https://gist.github.com/tribulant/26263533eee33e3b61ed)
Microsoft IIS 利用浏览器缓存
为 IIS(Internet 信息服务)设置浏览器缓存非常容易。
在Administration Tools
界面中选择它,然后显示它的属性。 选择HTTP Headers
选项卡后,您应该会看到两个有趣的区域; Enable Content Expiration
和Custom HTTP headers
。 第一个应该是不言自明的,第二个可用于应用 Cache-Control 标头。
浏览器缓存的技术性
Web 服务器通过在发送 HTML 之前向浏览器发送 HTTP 标头来实现利用浏览器缓存。 它们告诉浏览器有关 HTML 内容的某些信息,例如内容类型、当前日期、服务器详细信息、缓存控制和过期等。
Cache-Control
、 Expires
和Etag
标头是提供浏览器缓存指令的标头。 这些标头由上述方法自动创建,以相应地利用 Apache、Nginx 和 IIS 中的浏览器缓存,因此除非您感兴趣,否则您无需深入了解细节。
缓存控制头
Cache-Control
向浏览器提供某些指令,例如内容被视为“新鲜”的时间、缓存的公共/私有状态、验证等。
缓存控制:max-age=3600,公共
(https://gist.github.com/tribulant/6309926734d3c127064c)
过期标题
Expires
标头仅提供 HTTP 日期,直到资源应该并且可以缓存到为止。
过期:2015 年 11 月 28 日星期六 05:36:25 GMT
(https://gist.github.com/tribulant/1b655d60a8a665b18b85)
Etag 标头
Etag
是在 HTTP 1.1 中引入的,作为一种验证方法,带有由服务器发送的令牌,浏览器使用它来检查内容的表示是否已更改。 直到Etag
,浏览器大多使用Last-Modified
标头,但Etag
现在更相关。 无论如何,大多数 Web 服务器都会生成Last-Modified
和Etag
标头。
电子标签:“pub1259380237;gz”
(https://gist.github.com/tribulant/2b542d76410bc047be00)
浏览器缓存的底线
通过为双方提供速度和性能,浏览器缓存对您(您的 Web 服务器)和您的用户都是互惠互利的。
借助浏览器缓存,强大而积极,您的 Web 服务器足够聪明,可以知道资源何时发生变化,以便为用户生成更新的标头,以便根据需要获取新内容。 不要惊慌您的用户会卡在旧内容上,事实并非如此。
强烈建议 WordPress 网站使用 Web 浏览器缓存,最终,推荐的 WordPress Leverage Browser Caching Ninjas 插件可以解决问题。 只需安装、激活即可完成!