如何科学的检测衡量一个外贸网站的加载速度

2018年06月12日 / 外贸建站作者:gtyang

news img

Google说,网页速度是要影响排名的。2018年7月将影响移动搜索,详情请看

Amazon说,首页打开时间每增加100毫秒,网站销售量会减少1%。

所以,网站加载速度很重要!

那怎么科学的判断一个网站的加载速度呢?特别是一个外贸网站?

先纠正一些错误的理解

为说明这些问题,我们使用 GTmetrix 平台,分别对三个网站,进行加载速度测评。这三个网站分别是:
测评环境为:
  • 浏览器 Chrome
  • 网速 3G Mobile (1.6 Mbps/768 Kbps, 200ms)
  • 地点 Vancouver, Canada
测评报告:
误区一 Pagespeed 及 YSlow 测评得分
news

这里的 Pagespeed (来自 Google)、YSlow (来自 Yahoo),代表的是,网页本身的一些速度优化项目做的如何。这些项目都多少会影响网页的加载。但他不能反映网站服务器的性能,也不能反映网页的真实加载速度。也就是说,都是满分的网站,实际加载也可能很慢。实际加载很快的网站,这两个评分也有可能很低。以为这两个指标做好了,网站速度就会很牛,是一个很大的误解。

为防止大家误解,GTmetrix 官方专门写了一篇文章去说明这个问题,有兴趣的同学,可以直接读下。

PageSpeed and YSlow are Half the Battle Your page load speed depends on more than just PageSpeed and YSlow scores.

做好这些,只是完成了一半的优化(另一半,多指的是服务器端的优化);网站加载速度,远不止靠这两个得分。

那这两个指标有什么意义呢?对照这些指标去做,可以让你的网站速度优化,锦上添花。实际中,很少有网站能做到100%,可以挑一些你认为非常厉害的网站测下试试,一般做到八九十就已经不错了。当然,我们的网站,一般来说都能达到八九十。所以,如果你对这块不专业,而只想知道自己网站真实的加载速度,这两个指标真的不用太在意,也别被人忽悠。

误区二 加载时间

如果上面两个指标不好用,那么看显示的加载时间(Fully Loaded Time)准没错了吧!不好意思,还是错的。

news

上面这些网站检测报告的 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测试报告,并查看打开录影。

news

大家可以通过录影看到,1.5s开始输出内容,完全显示发生在3.5s左右,并没有等到14s。

请打开 www.google.com 测试报告,并查看其打开录影。

news

可以通过录影看到,也是在1.5s开始输出内容,显示完全发生在1.8s左右(google的页面太简单了),并没有等到5.9s。

通过这两个录影,大家应该看到了,用 Fully Loaded Time 去衡量网站的打开速度,是多么不靠谱。

Total Page Size 和 Requests

评分不靠谱,Fully Loaded Time 也不靠谱,那 Total Page Size 和 Requests 可以吗? 当然不是。

news

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 时间

news

这两个时间,都表征真实的页面输出。而且,Contenful Paint 时间,文字内容已经都输出了,只剩图片了,表征网站加载速度更有意义。这两个时间,在这里可以看到:

news

眼尖的人看到了,这个时间点并不是页面完全显示的点,还是不理想。好吧,还有一个就是: Speed Index 。

Speed Index

要想深入了解什么是 Speed Index,请看 Google 的解释

Speed Index 是指获取可见页面加载的视觉进度,并计算内容绘制速度的总得分。这个指标,真的不如 Contenful Paint 时间好懂,但看懂了也很简单,这里对 Speed Index 不做大篇幅的解释。总之,它综合了网页打开的全过程。是表征网页打开速度最牛逼的指数,无出其右者。在哪找这个指数呢?

news

但这个参数并不推荐在GTmetrix 里面测试, 推荐在这里: https://www.webpagetest.org/

news

如上图,可以设置 Location 、Browser 、Conection 然后进行测试。

news

看到了吧,就是这个小参数。为什么非要在这个平台上测试呢?

一则,GTmetrix 的 Speed Index ,仍是 bata 版,就是测试版,或许还不够精确。

二则,主要是因为,Google 根据 Webpagetest 的测试结果,做了一组统计数据(见下图),你可以直接根据这组数据,判断自己网站加载速度如何。

news
根据统计,在该平台,在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 这个平台,其实是功能是非常丰富的,也有比较简单的信息,比如这几个评级:

news

还是比较简单明了的,有兴趣的同学可以再了解下。我们做的网站一般都是 5A + √ ,妥妥的。

到现在,不知道大家对如何衡量一个外贸网站加载速度,是否已经有了一个比较清晰的感念? 我想是的。

再默念一遍:

走开,什么没用的 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 测评 5A + √ ,Speed index 排名前15%
Google 的 Pagespeed insight 评分在90以上

如果你觉的我们做的还可以,有需求,请联系我们!

如果,想了解我的速度优化细节,及与其他网站真实的对比,请看 网站速度优化细节

复制成功