如何科学的检测衡量一个外贸网站的加载速度
2018年06月12日 / 外贸建站作者：gtyang
Google说，网页速度是要影响排名的。2018年7月将影响移动搜索，详情请看。
Amazon说，首页打开时间每增加100毫秒，网站销售量会减少1%。
所以，网站加载速度很重要！
那怎么科学的判断一个网站的加载速度呢？特别是一个外贸网站？
先纠正一些错误的理解
为说明这些问题，我们使用 GTmetrix 平台，分别对三个网站，进行加载速度测评。这三个网站分别是：
- www.dgcrane.com 我们做的一个起重机械网站
- www.demagcranes.com 全球起重机械行业企业
- www.google.com 这个不介绍
测评环境为：
- 浏览器 Chrome
- 网速 3G Mobile (1.6 Mbps/768 Kbps, 200ms)
- 地点 Vancouver, Canada
测评报告：
- Dgcrane网站测评报告 https://gtmetrix.com/reports/www.dgcrane.com/fET3koPk
- Demag网站测评报告 https://gtmetrix.com/reports/www.demagcranes.com/TBl5ONbW
- Google网站测评报告 https://gtmetrix.com/reports/www.google.com/4l4JxfUH
误区一 Pagespeed 及 YSlow 测评得分
这里的 Pagespeed （来自 Google）、YSlow （来自 Yahoo），代表的是，网页本身的一些速度优化项目做的如何。这些项目都多少会影响网页的加载。但他不能反映网站服务器的性能，也不能反映网页的真实加载速度。也就是说，都是满分的网站，实际加载也可能很慢。实际加载很快的网站，这两个评分也有可能很低。以为这两个指标做好了，网站速度就会很牛，是一个很大的误解。
为防止大家误解，GTmetrix 官方专门写了一篇文章去说明这个问题，有兴趣的同学，可以直接读下。
那这两个指标有什么意义呢？对照这些指标去做，可以让你的网站速度优化，锦上添花。实际中，很少有网站能做到100%，可以挑一些你认为非常厉害的网站测下试试，一般做到八九十就已经不错了。当然，我们的网站，一般来说都能达到八九十。所以，如果你对这块不专业，而只想知道自己网站真实的加载速度，这两个指标真的不用太在意，也别被人忽悠。
误区二 加载时间
如果上面两个指标不好用，那么看显示的加载时间（Fully Loaded Time）准没错了吧！不好意思，还是错的。
上面这些网站检测报告的 Fully Loaded Time 分别为 14.6s / 16.8s / 5.9s，直观告诉我们，都挺渣的不是吗？但，google 也很慢吗？应该不会！
首先，测量加载时间的时候，一定要看测试的地点，及使用的网络环境。如果网速慢的话，打开 google 也不会快，但 google 网站的加载速度是有保证的。
其次，一般来说，不能使用 Fully Loaded Time 去衡量网站的加载速度。为什么呢，Fully Loaded Time 指的是网页里面的所有元素全部加载完成的时间。网站加载出来，并不需要全部元素都加载完毕。你添加的追踪代码、第三方表单、第三方 Online Chat 软件等，都会严重影响你的 Fully Loaded Time。但实际上，他并不影响网页的顺利打开，请打开 www.dgcrane.com 的测试报告，并查看打开录影。
大家可以通过录影看到，1.5s开始输出内容，完全显示发生在3.5s左右，并没有等到14s。
请打开 www.google.com 测试报告，并查看其打开录影。
可以通过录影看到，也是在1.5s开始输出内容，显示完全发生在1.8s左右（google的页面太简单了），并没有等到5.9s。
通过这两个录影，大家应该看到了，用 Fully Loaded Time 去衡量网站的打开速度，是多么不靠谱。
Total Page Size 和 Requests
评分不靠谱，Fully Loaded Time 也不靠谱，那 Total Page Size 和 Requests 可以吗？ 当然不是。
Total Page Size 指的是页面全部资源的总大小，Requests 指的是页面全部资源的个数。这两个参数，虽然和加载速度有一定关系，但不同的设计、不同的效果，需要不同的大小，不同个数的资源。体积越大、个数越多，相应的，网站打开是会慢一点的。于是，同样的设计，同样的效果要求下，尽量减少文件大小，尽量减少文件个数，对于提高网页打开速度是有利的。
大多数使用 Wordpress 主题做的网站，速度上都有很大的缺陷。因为这些主题，要满足很多的效果，就需要更大、更多的 Js 及 CSS 文件。好在，有些的主题，如 Avada 、Enfold、BE 等，已经在这方面做了很大的优化，并不构成多大的问题。而真正定制的网站，其 JS 及 CSS 文件，是根据设计去完成的，不会有太多无用的代码和文件。于是，在 Total Page Size 和 Requests 方面，还是有一定优势的。当然，主题站的问题依旧是自定义性不足。虽然，有那么多好看的demo，那么多自定义功能，但当真正要去认真的做一个好网站时，必然捉襟见肘。
扯远了，总之 Pagespeed 及 YSlow 得分、Fully Loaded Time 、Total Page Size 和 Requests 都不能衡量一个网站真正的加载速度。关子卖的这么远，是时候表演真功夫了！
由时间表征加载速度
引出两个概念，First Paint 时间和 Contentfull Paint 时间
这两个时间，都表征真实的页面输出。而且，Contenful Paint 时间，文字内容已经都输出了，只剩图片了，表征网站加载速度更有意义。这两个时间，在这里可以看到：
眼尖的人看到了，这个时间点并不是页面完全显示的点，还是不理想。好吧，还有一个就是： Speed Index 。
Speed Index
要想深入了解什么是 Speed Index，请看 Google 的解释。
Speed Index 是指获取可见页面加载的视觉进度，并计算内容绘制速度的总得分。这个指标，真的不如 Contenful Paint 时间好懂，但看懂了也很简单，这里对 Speed Index 不做大篇幅的解释。总之，它综合了网页打开的全过程。是表征网页打开速度牛逼的指数，无出其右者。在哪找这个指数呢？
但这个参数并不推荐在GTmetrix 里面测试， 推荐在这里： https://www.webpagetest.org/ 。
如上图，可以设置 Location 、Browser 、Conection 然后进行测试。
看到了吧，就是这个小参数。为什么非要在这个平台上测试呢？
一则，GTmetrix 的 Speed Index ，仍是 bata 版，就是测试版，或许还不够。
二则，主要是因为，Google 根据 Webpagetest 的测试结果，做了一组统计数据（见下图），你可以直接根据这组数据，判断自己网站加载速度如何。
根据统计，在该平台，在5Mbps Cable网络环境下（代表较快网速情况下）：
- 指数低于1388的占前10% —— 就是说，在这个条件下，指数如果低于1388，你网站就是快的 Top10%
- 指数低于2191的占前25%
- 指数低于3519的占前50%
- 指数低于5508的占前75%
- 指数低于10678的占前95%
总的平均指数是4493。
另一组数据，是在1.5Mbps DSL 网络环境下 （代表较慢网速情况下，和国内3G网速差不多）：
- 指数低于 1631的占前10% —— 就是说，在这个条件下，指数如果低于1631，你网站就是快的 Top10%
- 指数低于2777的占前25%
- 指数低于4528的占前50%
- 指数低于7002的占前75%
- 指数低于12350的占前95%
总的平均指数是5408。
如测得 www.dgcrane.com 在1.5Mbps DSL条件下，Speed Index = 1911，那么就说明：该网站加载速度处于前13%的水平，非常简单明了，小外贸网站能达到这个水平已经很不错了。学会的话，可以自己试一下，看看自己网站处于什么水平。
关于 Webpagetest 这个平台，其实是功能是非常丰富的，也有比较简单的信息，比如这几个评级：
还是比较简单明了的，有兴趣的同学可以再了解下。我们做的网站一般都是 + √ ，妥妥的。
到现在，不知道大家对如何衡量一个外贸网站加载速度，是否已经有了一个比较清晰的感念？ 我想是的。
再默念一遍：
走开，什么没用的 Pagespeed 、 YSlow、 Fully Loaded Time、Total Page Size、Requests。
我只认 Webpagetest 平台上的 Speed Index。当然，如果有一个好的 Speed Index 指数，上面的那些指数也不会差。
需要说明的是，你得出的 Speed Index 指数，仅仅代表你的网站在所选的地方及相应网络环境下得出的成绩。如果想的衡量一个网站，你需要根据你的网站针对的地区，多选几个地方进行测试。好在，Webpagetest 平台已经提供了足够多的地区供你测试。
总结
- 如果是想知道自己的网站，在特定区域及特定网速情况下的加载速度，直接使用 Webpagetest 平台进行测试，查看 Speed Index 指数，对比下就心中有数了。
- 如果想进一步分析网站的问题，或是进行加载细节对比，GTmetrix 及 Webpagetest 都是很好的工具。个人更倾向于 GTmetrix ，界面好，功能清晰。
- 当然，如果你想专门对比两个网站，你可在相同的设定下，直接通过 GTmetrix 里面的 Vedio，查看实际的打开情况，这是直观的。
- Google 提供的 PageSpeed Insights 测试平台，也是不错的，因为足够简单，没有任何多余的选项，保证了测评的一致性、公平性，同时，也兼顾了服务器的性能，还是有一定说明力的，而且，他可以同时检测桌面设备和移动设备的加载情况。当然，也在一定程度上，代表了 Google 对你网站的看法，你懂的，SEO + PPC，基本都是针对 Google 的。 另，需要说明的是，这里的 Pagespeed Insight 和 GTmetrix 里面的 Pagespeed 是不一致的。算法不一样，得分也不一样，大家不要混淆。
，做个广告，一般我们工作室制作的网站，保守的说：
GTmetrix 测评 Pagespeed 及 Yslow 分数在85%以上
Webpagetest 测评 + √ ，Speed index 排名前15%
Google 的 Pagespeed insight 评分在90以上
如果你觉的我们做的还可以，有需求，请联系我们！
如果，想了解我的速度优化细节，及与其他网站真实的对比，请看 网站速度优化细节！
