网站页面的打开速度，将会影响网站收录、网站排名，那么对于自己的站点如何判断访问加载的速度是快还是慢那？今天我就和大家说说一款非常实用的网页测速工具，webpagestest 大家通过这款工具，就可以对于自己网页的内容进行详细的测试了。
WebPagetest的核心是用于测量和分析网页的性能。有很多选项，看着很吓人，但其实做快速测试是很简单的。 本指南将引导你提交测试和结果解释。
一、运行性能测试(Running a Performance Test)
1.1 输入网页网址(Enter The Page URL)
你需要做的第一件事是决定一个页面来测试。大多数人从他们的网站的主页开始(但不要忽视人们访问的其他页面)。确定要测试的页面后，转到WebPagetest并为其指定要测试的页面的URL：
1.2 选择位置(Select a Location)
接下来，应该决定从哪里运行测试。WebPagetest具有位于世界各地的测试机器，你应该从接近用户访问的位置进行测试，从列表中选择一个位置，或者单击Select from Map按钮，从地图视图中选择一个位置(只需单击气球，然后确定)。如果将指针放在气泡上，它们将显示一条消息，提示位置信息：
1.3 选择浏览器(Select a Browser)
最后，需要决定使用什么浏览器进行测试。不同的位置支持不同的浏览器，如果给定的位置没有正在寻找的浏览器，可以尝试不同的位置。 Dulles，VA USA位置支持WebPagetest工作的所有浏览器(IE 6,7,8和9)。现在忽略“dynaTrace”浏览器，这些用于更高级的分析。我们通常建议使用IE7进行初始测试，因为它几乎是最糟糕的情况，并且更容易看到很多问题，所以如果你不知道什么浏览器，开始只需使用IE7。
1.4 提交测试(Submit the Test)
一切配置完成后，点击START TEST按钮，请求将发送到测试位置进行测试。测试可能需要一段时间才能运行，具体取决于有多少次测试(在测试之前至少有一分钟的测试时间，但是它的时间甚至更长)。一旦测试完成，你将得到结果。
二、解释结果(Interpreting the Results)
第一次看到结果信息可能有点吓人，信息量有点大，但首先可以先查看一些关键信息。
2.1 优化等级(Optimization Grades)
在结果页面的顶部是一组最关键的性能优化等级。涵盖了适用于所有网站的基本优化，任何不是A或B的都需要进行进一步的优化。
2.1.1 阻塞时间(First Byte Time)
首字节时间是指浏览器收到HTML内容的第一个字节时间，包括DNS查找、TCP连接、SSL协商(如果是HTTPS请求)和TTFB(Time To First Byte)。
关于First Byte Time和TTFB的区别在Metrics一节中做了简单分析。
预期首字节 = RTT * 3 + SSL
比值 = 100 - (实际观测首字节 - 预期首字节) / 10
其中RTT的指往返通信时间。更多网络术语可以参考整理的网络协议
2.1.2 长连接已启动(Keep-alive Enabled)
请求网页上的内容(图像、JavaScript、CSS、Flash等)需要与Web服务器建立连接。每次都重新连接会耗费一些时间，所以最好复用连接，keep-alive实现了这个方法。默认情况下，在配置中已启用，而且是HTTP 1.1标准的一部分，但有时它们将被破坏(可能是无意的)。启用keep-alive通常只是服务器上的配置更改，不需要对页面本身进行任何更改，通常可以将加载页面的时间减少40-50%。计算公式如下：
比值 = 实际复用连接数 / 预期复用连接数
2.1.3 压缩文本(Compress Text)
除了图片或视频，剩余的都是某种类型的文本(html，javascript，css等)。HTTP提供了一种以压缩形式传输文件的方法。启用文本资源压缩通常只是服务器配置更改，不需要对页面本身进行任何更改，提高性能降低服务内容的成本(通过减少传输的数据量)。由于文本资源通常在页面的开头(javascript和css)下载，因此，提供文本资源的快慢很影响用户体验。计算公式如下：
比值 = 资源压缩后的大小 / 实际资源的大小
2.1.4 压缩图片(Compress Images)
图像压缩检查仅查看照片图像(JPEG文件)，确保质量不会设置得太高。JPEG图像可以在不降低视觉质量的情况下压缩。我们可以在Photoshop的“网络存储”模式中，使用一种质量级别为“50”的压缩图像的标准。在视觉质量不是很差的情况下，尽量多的压缩图像。在照片中经常包含其他数据，特别是如果照片来自数码相机(包含关于相机，镜头，位置，缩略图的信息)，其中一些应该在被发布到网络之前就移除(小心保留任何版权信息)。计算公式如下：
比值 = 图片压缩后的尺寸 / 图片实际的尺寸
2.1.5 缓存静态内容(Cache Static Content)
静态内容是网页上不经常更改的内容(图片，javascript，css)。可以配置它们，以便用户的浏览器将它们缓存起来，浏览器决定一个资源被缓存多久取决于2个因素：缓存寿命和过期时间(TTL)。资源的寿命可以通过2个标签配置：实体标签(ETags)和首部标签(Last-Modified)。过期时间是根据2个TTL首部标签：Cache-Control的max-age属性和Expires Header。如果用户回到页面(或访问使用相同文件的其他页面)，他们可以使用已经拥有的副本，而不是重新请求文件Web服务器。在用户浏览器中成功缓存静态内容可以显著提高重复访问的性能(高达80+%，具体优化率取决于页面)，并能减少Web服务器上的负载。有时可能很难实现缓存而不改变页面，所以不要盲目地启用它(你需要能够更改希望改变的任何文件的文件名)。
比值 = 过期资源数得分 / 静态资源总数
这个评级需要一个缓存生命周期评分系统，如果一个静态资源的生命周期超过一周，就100分，超过一小时，最多50分，以上情况之外都是0分。
2.1.6 合并JS/CSS文件(Combine JS/CSS Files)
提高性能通常意味着减少对内容的请求数，最简单(最重要的)方法之一是减少在页面开头加载的css和javascript文件数量(在 中会阻塞页面显示)。一个简单的实现方法是将JavaScript和CSS分别合并到一个文件中(CSS最好在JavaScript之前加载)。减少用户从屏幕上看到东西的等待时间，对用户体验有巨大的影响。计算方式：
2.1.7 使用CDN(Use of CDN)
每个内容的请求都是从用户的浏览器到Web服务器，再返回。随着距离越来越远，这样一个往返可能消耗很多时间(页面上的请求越多，消耗的时间越多)，把你的服务器建立在离用户比较近的地方就能解决这个问题，这正是内容分发网络(CDN)的作用。他们在世界各地都有靠近用户的服务器，从靠近用户的服务器提供网站的静态内容。使用CDN没有意义的唯一情况是如果网站的所有用户都已经接近Web服务器(例如社区网站)。计算方式：
比值 = 通过CDN服务获取的静态资源数 / 静态资源总数
2.2 高级度量(High-level Metrics)
结果页顶部的数据表提供了有关已加载页面的一些高级信息：
2.2.1 首次视图(First View)
首次视图的测试，将会把浏览器的缓存和Cookie清除，表示访问者第一次访问该网页，将体验到的情况。
2.2.2 重复视图(Repeat View)
重复视图会在首次视图测试后立即执行，不会清除任何内容。浏览器窗口在First View测试后关闭，然后启动新浏览器以执行Repeat View测试。重复视图测试模拟的是用户离开页面后，马上再进入此页面的场景。
2.2.3 文档加载完毕(Document Complete)
从初始化请求，到加载所有静态内容(图片、CSS、JavaScript等)，但可能不包括由JavaScript执行触发的内容，可以理解为开始执行window.onload。
2.2.4 页面所有元素加载时间(Fully Loaded)
从初始化请求，到Document Complete后，2秒内没有网络活动的时间，这包括在主网页加载后由JavaScript触发的任何活动。
2.2.5 整页加载时间(Load Time)
与Document Complete中的时间属性相同。
2.2.6 第一个字节加载时间(First Byte)
这个时间表示从初始化请求到服务器响应后，接收到第一个字节的时间。此时的大部分时间通常称为“后端时间”，服务器为用户构建页面的时间量。
2.2.7 页面渲染时间(Start Render)
渲染时间表示屏幕上显示东西的第一个时间点，在这个时间点之前，用户看到的是一个空白页。这并不表示用户看到了内容，可能只是一个简单的背景色，但这是用户开始看到内容的第一个指标，我理解这个为白屏时间。
2.2.8 DOM元素数量(DOM Elements)
在测试结束时测试页面上的DOM元素的计数。
2.2.9 HTTP请求数(Requests)
浏览器针对页面上的内容(图片，javascript，css等)发出的请求数。
2.2.10 传输的字节量(Bytes In)
浏览器加载页面下载的数据量。它通常也被称为“页面大小”。
本文内容不用于商业目的，如涉及知识产权问题，请权利人联系51Testing小编(021-64471599-8017)，我们将立即处理
