如何用浏览器缓存优化WordPress页面加载时间

用浏览器缓存来优化WordPress页面加载时间是一个事半功倍的活儿，WordPress站长如果能实施这个操作，网站打开速度又能快上一些。虽然每次减少负载的时长以毫秒计数，听起来也不是很多，但很多WordPress站长都乐此不疲。

WordPress 网站优化

优化网站以提高速度貌似是 WordPress网站一项永不停歇的任务，各个 WordPress群里面网站速度慢、得分低、如何优化永远都是讨论最热烈、经久不息的话题。而且建设和维护 WordPress网站期间也总有一些可以调整的内容，包括 WordPress本身、主题、插件、图片等。

除了老魏之前讨论过的 WordPress 缓存插件之外，WordPress 网站优化绝不是靠这一点就能实现的，需要从多个角度努力，比如使用访客浏览器缓存在提速，就是其中之一。

浏览器缓存和WordPress缓存的区别

我们通过使用 memcached、redis、缓存插件等各种手段和方式，把 WordPress 网页内容加载到内存中，每次访客来访时，直接从内存中读取，也就意味着网页打开速度很快。

浏览器缓存则不同，主要是把网页内容放到访客的浏览器缓存中，访客再次访问到同一个资源时，比如同一个css、js、图片等，直接从他的浏览器缓存读取，减少了网页加载页面时通过网络传输的字节数，用户感觉到访问速度再次加快，而我们的主机也节省了大量流量费用。

浏览器缓存介绍

现代的浏览器都会在本地硬盘划出一部分文件系统临时存储内容。这就是浏览器缓存。主要存储以下内容：

• HTML
• 图片
• CSS
• JavaScript
• 其他媒体

其中一些内容从不或很少改变，所以是静态存在的。比如网站logo不会改变，把 logo图形存储在浏览器缓存中意味着减少了从服务器实际获取图像以绘制图像的这个步骤。其他静态文件也是同样的道理。

浏览器缓存在 WordPress 中工作的步骤

当用户在浏览器中键入 URL访问网站时，在背后会启动浏览器和网站服务器的对话。

• 浏览器：是你在存储网站页面吗？
• 服务器：是的，给你网页文件
• 浏览器：读取网页文件并列出需要请求以显示页面的内容列表
• 浏览器：这是我需要显示页面的内容列表（一般包括 css、js、图片、文字、视频、文档等）
• 服务器：css来了
• 服务员：js来了
• 服务员：图片来了

浏览器会按照网页内容的先后顺序，按照列表的内容依次请求所有文件，直到服务器向浏览器提供它所请求的所有内容。这里包括所有的图片、JavaScript 文件或 CSS 文件。不管它们是什么，如果没有浏览器缓存，浏览器每次都必须请求这些项目中的每一项。即使有多个 css、js 文件，也会每次都重新请求连接，再下载。

如果用户正在浏览你的网站产品页面，他们可能会点击 10 个页面，而页面中的大部分内容其实是相同的，比如组成页面的基本 CSS、 JavaScript、公司logo 等都不会或很少更改，但浏览器每次都必须请求，服务器再发送。

而浏览器缓存让浏览器决定临时存储其中一些内容并重复使用，当访问页面时直接从访客本地硬盘的浏览器缓存区中读取，减少了浏览器请求数，进一步减少了浏览器和服务器之间的对话次数。在服务器将页面内容交给浏览器之后，浏览器会构建其显示页面所需的内容列表。当你使用浏览器缓存后浏览器会直接从本地缓存区提取相关内容，这样就显得网页打开速度很快。

浏览器请求数少了，服务器流量消耗少了，访客打开速度快了，其实这是个多赢的操作。

浏览器缓存标头

浏览器会缓存所有内容，而不请求内容，虽然这会使用户体验非常快，但会导致浏览器显示旧的内容。

我们使用标头（head）来告诉浏览器什么可以被缓存，什么不能被缓存。即使缓存的东西，也告诉浏览器什么时候不再有用，需要向服务器请求一个新的内容副本。

在浏览器和服务器的对话中，每个请求都有双向传递的数据，被称为标头（head）。用户看不到 head，但它会影响用户看到的内容。

服务器向浏览器发送不同的标头以帮助它确定可以缓存的内容和位置。服务器和浏览器可以交换几种不同的标头和值来控制缓存。大多数情况下使用的标头有：

1、缓存控制（Cache-Control）

是浏览器查看的第一个标头。它告诉浏览器它可以对刚刚收到的内容做什么。参数有以下几个：

no-cache：告诉浏览器可以缓存此资源，但必须与服务器检查以确保是否是最新版本。
public：告诉浏览器或者 CDN 可以缓存这个资源。
private：可缓存的资源，但只能由浏览器缓存。CDN 无法缓存。
no-store：告诉浏览器这个资源不应该被缓存。

2、过期（Expires）

告诉浏览器什么时候这个资源被认为是“陈旧的”。在此日期和时间之后浏览器需要请求资源的新副本。

有了这两个标头，浏览器现在可以缓存任何给定资源。所以我们现在需要知道如何设置服务器发送到浏览器的标头。

如何在 WordPress 中设置浏览器缓存？

WordPress 中设置浏览器缓存有两种方法，第一是设置 htaccess文件，其二是插件。

通过手动设置缓存标头来利用浏览器缓存

添加“ExpiresByType”行来定义一个特定类型的资源应该被缓存多长时间。

比如

ExpiresByType text/css “access 1 month”

上面这行代码告诉浏览器任何给定的 CSS 资源都可以在浏览器缓存中缓存 1 个月。

你需要把每种资源的记录都添加到文件中。下面是在 .htaccess 文件中使用的一组常用标头。

  ExpiresActive On

  ExpiresByType image/jpg “access 1 year”

  ExpiresByType image/jpg “access 1 year”

  ExpiresByType image/gif “access 1 year”

  ExpiresByType image/png “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 2 days”

以上包括了大多数类型的资源类型。

但对于大家来说，这种设置方法很麻烦，也容易出错。因此通过插件轻松设置浏览器缓存是一个很合适的方法。

支持浏览器缓存的WordPress 插件

许多流行的缓存插件都支持设置浏览器缓存标头，开启后 WordPress 将为静态资源（CSS、JS）添加“Cache-Control”标头，并提供更多设置参数。

WP Fastest Cache 是一个可用于在 WordPress 中启用浏览器缓存的插件。下载并安装 WP Fastest Cache，转到插件设置，通过选中对话框来选择浏览器缓存，提交保存即可。

W3 Total Cache插件 > 常规设置，启用浏览器缓存。

WP Rocket插件也支持浏览器缓存。

SiteGround Optimizer 插件，在主菜单中选择“环境”菜单选项或单击仪表板页面上的“转到环境”。在页面中间找到“浏览器缓存”，点击滑块变为绿色，保存即可。

总结

浏览器缓存存储的是网页文件中相同的部分，可以为打开网页有效提速。如果你不熟悉手动添加浏览器缓存的代码，请使用上文提到的缓存插件来实现吧。