# 为 WordPress 加入 Server Timing 判断不同行为性能差异

- Link: https://www.ixiqin.com/2022/02/18/server-timing/
- Published: 2022-02-18T16:22:12+08:00
- Author: 白宦成

文章目录

 [Toggle](https://www.ixiqin.com/2022/02/18/server-timing/#)

 * [使用 WP Server Timing 添加 Server-Timing 头](https://www.ixiqin.com/2022/02/18/server-timing/#%e4%bd%bf%e7%94%a8_wp_server_timing_%e6%b7%bb%e5%8a%a0_server-timing_%e5%a4%b4)
 * [辅助理解资料](https://www.ixiqin.com/2022/02/18/server-timing/#%e8%be%85%e5%8a%a9%e7%90%86%e8%a7%a3%e8%b5%84%e6%96%99)

自打上次为[**我的博客加入了 Redis 缓存后**](https://www.ixiqin.com/2022/01/30/redis-object-cache/)，
博客站点访问速度明显变快，几乎可以达到秒开的效果。剩下的需要在网络层面进行进一步
的优化。

不过，我还在思考如何才能更好的优化我的 WordPress 性能。很显然，我需要一个指标来帮助
我做决策。这让我想到了一个东西 —— HTTP 标准中的 Server-Timing Header。

> **`Server-Timing`** 标头传达在一个给定请求-响应周期中的一个或多个参数和描述。它
> 用于在用户浏览器的开发工具或 [`PerformanceServerTiming` (en-US)](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceServerTiming)
> 接口中显示任何后端服务器定时参数（例如，数据库读/写、CPU 时间、文件系统访问等）。
> 来自 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Server-Timing

Server Timing 可以帮助我们记录服务端到底在哪些步骤中消耗了哪些时间，可以方便我进行
性能的查询。

## 使用 󠀁[WP Server Timing](https://github.com/ocReaper/wp-server-timing)󠁿 添加 Server-Timing 头

我在 WordPress 的 Plugin Directory 目录进行了搜索，并没有找到支持这个功能的插件，
不过我在 Github 上找到了这个插件 —— [https://github.com/ocReaper/wp-server-timing](https://github.com/ocReaper/wp-server-timing)。

有了这个插件，我就可以无需自己手动添加相应的能力。

使用插件也非常简单，在页面上下载压缩包，并在 WordPress 后台安装并启用这个插件。

![](https://files.ixiqin.com/2022/02/23162404/d2b5ca33bd970f64a6301fa75ae2eb22-14.
png)

安装后的效果

安装完成后，你接下来要做的就是重新在浏览器中打开你的网站，并按下 F12 打开开发者工具，
选择文档 Tab（英文是 Document），刷新当前页面，就可以看到列表中出现了一个你博客地址
对应的文档，点击文档，并在弹出的窗口中切换到「时间」Tab，就可以在下方看到服务器计
时了。

![](https://files.ixiqin.com/2022/02/23162404/d2b5ca33bd970f64a6301fa75ae2eb22-15-
1024x541.png)

示意图

按照上图的结果，可以看到，我的 WordPress 耗时最长的是 Template Processing ，我需要
针对这个属性进行定向优化。

## 辅助理解资料

以下是 WordPress 的加载顺序图，你可以对比着参考

![](https://postimg.aliavv.com/mini/dtckd.jpg)

WordPres 的加载顺序图，来源：[https://www.rarst.net/wordpress/wordpress-core-load/](https://www.rarst.net/wordpress/wordpress-core-load/)