
对于WordPress网站来说,网上很多教程都给出了非常多的优化加速的方法,包括开启缓存,安装插件等等。但是大家会发现,每次第一次打开自己的WordPress站点的时候,都要等比较长的时间,比如TFFB加载时间长,网站安装了SSL证书后打开比较慢。这里搬主题就分享一下如何测试WordPress网站SSL链接及打开加载速度教程。
首先搬主题先科普一下一个网页的打开需要经历哪些步骤及阶段。
一、网页打开需要经历的步骤
首先,一个网页的打开,需要经历哪些步骤。总体来说分为3个步骤:DNS解析、TCP握手连接、浏览器渲染
1、什么是DNS解析?
当用户输入一个网址并按下回车键的时候,浏览器得到了一个域名。而在实际通信过程中,我们需要的是一个IP地址。因此我们需要先把域名转换成相应的IP地址,这个过程称作DNS解析。
举个栗子:A用户要打电话给C用户,C用户的电话号码是8888888,这个号码是唯一的。但是要输入这么多号码很麻烦也记不住,因此直接拨打C用户的对应名字-小C。只要点击呼叫小C,然后手机就自动把小C与号码8888888对应,就自动拨号了。这个名字与号码转换翻译的过程就叫DNS解析,只不过对应的名字就是平时我们的域名,比如www.banzhuti.com,号码就对应网站空间主机的IP地址。
2、什么是TCP握手连接?
因为现在大部分的WordPress站点都安装了SSL证书,因此TCP的端口也主要是443,也就是我们常见的的HTTPS。HTTPS 相比 HTTP最大的不同就是多了一层 SSL (Secure Sockets Layer 安全套接层)或 TLS (Transport Layer Security 安全传输层协议)。有了这个安全层,就确保了互联网上通信双方的通信安全,那么这个安全层是怎么工作的,SSL / TLS 握手过程又是怎样的呢?
(1)SSL / TLS 以及 SSL / TLS 握手的概念
SSL 和 TLS 协议可以为通信双方提供识别和认证通道,从而保证通信的机密性和数据完整性。TLS 协议是从Netscape SSL 3.0协议演变而来的,不过这两种协议并不兼容,SSL 已经逐渐被 TLS 取代,所以下文就以 TLS 指代安全层。 TLS 握手是启动 HTTPS 通信的过程,类似于 TCP 建立连接时的三次握手。 在 TLS 握手的过程中,通信双方交换消息以相互验证,相互确认,并确立它们所要使用的加密算法以及会话密钥 (用于对称加密的密钥)。可以说,TLS 握手是 HTTPS 通信的基础部分。
(2)TLS 握手过程中发生了什么
我们已经知道 TLS 握手的目的是建立安全连接,那么通信双方在这个过程中究竟干了什么呢?下面就是答案:
- 商定双方通信所使用的的 TLS 版本 (例如 TLS1.0, 1.2, 1.3等等);
- 确定双方所要使用的密码组合;
- 客户端通过服务器的公钥和数字证书 (上篇文章已有介绍)上的数字签名验证服务端的身份;
- 生成会话密钥,该密钥将用于握手结束后的对称加密。
(3)TLS 握手详细过程
下面来看 TLS 握手的详细过程 (注:此图与HTTPS详解一中的 HTTPS 原理图的流程大致相同,不同的是此图把重点放在了TLS握手的相关概念上):

SSL / TLS 握手详细过程
- “client hello”消息:客户端通过发送”client hello”消息向服务器发起握手请求,该消息包含了客户端所支持的 TLS 版本和密码组合以供服务器进行选择,还有一个”client random”随机字符串。
- “server hello”消息:服务器发送”server hello”消息对客户端进行回应,该消息包含了数字证书,服务器选择的密码组合和”server random”随机字符串。
- 验证:客户端对服务器发来的证书进行验证,确保对方的合法身份,验证过程可以细化为以下几个步骤:
- 检查数字签名
- 验证证书链 (这个概念下面会进行说明)
- 检查证书的有效期
- 检查证书的撤回状态 (撤回代表证书已失效)
- “premaster secret”字符串:客户端向服务器发送另一个随机字符串”premaster secret (预主密钥)”,这个字符串是经过服务器的公钥加密过的,只有对应的私钥才能解密。
- 使用私钥:服务器使用私钥解密”premaster secret”。
- 生成共享密钥:客户端和服务器均使用 client random,server random 和 premaster secret,并通过相同的算法生成相同的共享密钥 KEY。
- 客户端就绪:客户端发送经过共享密钥 KEY加密过的”finished”信号。
- 服务器就绪:服务器发送经过共享密钥 KEY加密过的”finished”信号。
- 达成安全通信:握手完成,双方使用对称加密进行安全通信。
3、什么是浏览器渲染?
1) 浏览器根据页面内容,生成DOM Tree。根据CSS内容,生成CSS Rule Tree(规则树)。调用JS执行引擎执行JS代码。
2) 根据DOM Tree和CSS Rule Tree生成Render Tree(呈现树)
3) 根据Render Tree渲染网页
二、用浏览器测试WordPress网站的加载及打开速度
如何测试WordPress网站的加载及打开速度呢?其实很简单,只要使用谷歌浏览器即可。打开Chrome 浏览器的开发者工具 — Network 面板 — Timing 标签页。可以看到如下的页面,如果不显示,则刷新页面即可。

具体每个阶段的官方解释如下:
Queuing
该请求被渲染引擎推迟了,因为它被认为比关键资源(例如脚本/样式)的优先级低。这通常发生在图像上。
该请求被搁置以等待将要释放的不可用的TCP套接字。
由于浏览器在HTTP 1上每个源仅允许六个TCP连接,因此该请求被暂停。
花费在制作磁盘缓存条目上的时间(通常非常快。)
Stalled/Blocking
请求等待发送之前花费的时间。它可能正在等待队列中描述的任何原因。此外,此时间包括在代理协商中花费的任何时间。
Proxy Negotiation
与代理服务器连接进行协商所花费的时间。
DNS Lookup
执行DNS查找所花费的时间。页面上的每个新域都需要完整的往返来进行DNS查找。
Initial Connection / Connecting
建立连接所花费的时间,包括TCP握手/重试和协商SSL。
SSL
完成SSL握手所花费的时间。
Request Sent / Sending
发出网络请求所花费的时间。通常为一毫秒的时间。
Waiting (TTFB)
等待初始响应所花费的时间,也称为第一个字节的时间。除了等待服务器传递响应所花费的时间之外,该时间还捕获了到服务器的往返延迟。
Time spent receiving the response data.
接收响应数据所花费的时间。
三、用curl命令行测试WordPress网站的加载及打开速度
上面介绍的是浏览器的测试方法,但是浏览器测试的话经常会出现一些不稳定的情况,比如如果想了解SSL握手的时间,则用浏览器的话可以测试的内容就不多了。接下来搬主题再介绍一下用curl命令行测试WordPress网站的加载及打开速度。
1、测试本地curl有无安装及安装版本
这里本地电脑以Windows 10为例,打开自己本地电脑的CMD,输入如下命令后回车
curl --help
出现下述界面则为已安装curl工具,如找不到任何提示,则未安装。

输入如下命令查询curl的版本
curl -V

这里可以看到的是已安装的是7.55.1版本。
2、安装curl工具
如果没有安装curl工具,则需要进行安装。下载地址:https://curl.haxx.se/download.html
将页面拉到最下方,目前的最新版本为7.75.0,因为本地的Windows 10是64位的,这里选择64位的版本点击下载

下载后,将其拷贝到D盘根目录进行解压。


复制上面的路径,然后选中我的电脑–> 右击–>属性–> 高级系统设置 ,设置坏境变量

新建系统环境变量
变量名:CURL_HOME
变量值:刚才复制的路径
点击确定
然后选择 Path – > 编辑
可以给Windows增加curl命令的环境变量,增加CURL_HOME环境变量,给PATH环境变量加上%CURL_HOME%;


打开cmd ,输入 curl –help,显示入下,就代表成功了。

接下来就是用curl进行测试了。
(1) 新建一个文本文件 curl-format.txt,内容如下:
scheme: %{scheme}\n
http_code: %{http_code}\n
http_version: http/%{http_version}\n
remote: %{remote_ip}:%{remote_port}\n
local: %{local_ip}:%{local_port}\n
ssl_verify_result: %{ssl_verify_result}\n
--------------------------------------\n
time_namelookup: %{time_namelookup}s\n
time_connect: %{time_connect}s\n
time_appconnect: %{time_appconnect}s\n
time_pretransfer: %{time_pretransfer}s\n
time_starttransfer: %{time_starttransfer}s\n
------------\n
time_redirect: %{time_redirect}s\n
time_total: %{time_total}s\n
size: %{size_download}bytes\n
然后把txt文件保存在D盘根目录,
然后打开本地CMD,输入 D:
进入D盘,然后输入如下代码进行测试
curl -w "@curl-format.txt" -o /dev/null -s "https://www.banzhuti.com" --tlsv1.3 -v
以上代表测试从本地电脑到网站使用tlsv1.3连接。当然如果不支持则可以使用tlsv1.2

下面解释一下
time_namelookup The time, in seconds, it took from the start until the name resolving was completed.
time_connect The time, in seconds, it took from the start until the TCP connect to the remote host (or proxy) was completed.
time_appconnect The time, in seconds, it took from the start until the SSL/SSH/etc connect/handshake to the remote host was completed. (Added in 7.19.0)
所以 (time_appconnect – time_connect) 才是 ssl 握手时间。
time_pretransfer The time, in seconds, it took from the start until the file transfer was just about to begin. This includes all pre-transfer commands and negotiations that are specific to the particular protocol(s) involved.
time_starttransfer The time, in seconds, it took from the start until the first byte was just about to be transferred. This includes time_pretransfer and also the time the server needed to calculate the result.
time_redirect The time, in seconds, it took for all redirection steps including name lookup, connect, pretransfer and transfer before the final transaction was started. time_redirect shows the complete execution time for multiple redirections. (Added in 7.12.3)
time_redirect 时间与其他时间不一样,表示的是重定向开始到结束的时间,包括重定向期间的 name lookup, connect等。curl 需要加上 -L 参数才能支持重定向。
time_total The total time, in seconds, that the full operation lasted.
按time_appconnect – time_connect的计算来看,搬主题使用tlsv1.3的SSL握手时间在430ms左右,使用tlsv1.2的SSL握手时间在620ms左右。
评论前必须登录!
立即登录 注册