2018年06月12日 / 外贸建站作者:gtyang
Google说,网页速度是要影响排名的。2018年7月将影响移动搜索,详情请看。
Amazon说,首页打开时间每增加100毫秒,网站销售量会减少1%。
所以,网站加载速度很重要!
那怎么科学的判断一个网站的加载速度呢?特别是一个外贸网站?
这里的 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 去衡量网站的打开速度,是多么不靠谱。
评分不靠谱,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,请看 Google 的解释。
Speed Index 是指获取可见页面加载的视觉进度,并计算内容绘制速度的总得分。这个指标,真的不如 Contenful Paint 时间好懂,但看懂了也很简单,这里对 Speed Index 不做大篇幅的解释。总之,它综合了网页打开的全过程。是表征网页打开速度牛逼的指数,无出其右者。在哪找这个指数呢?
但这个参数并不推荐在GTmetrix 里面测试, 推荐在这里: https://www.webpagetest.org/ 。
如上图,可以设置 Location 、Browser 、Conection 然后进行测试。
看到了吧,就是这个小参数。为什么非要在这个平台上测试呢?
一则,GTmetrix 的 Speed Index ,仍是 bata 版,就是测试版,或许还不够。
二则,主要是因为,Google 根据 Webpagetest 的测试结果,做了一组统计数据(见下图),你可以直接根据这组数据,判断自己网站加载速度如何。
总的平均指数是4493。
总的平均指数是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 平台已经提供了足够多的地区供你测试。
,做个广告,一般我们工作室制作的网站,保守的说:
GTmetrix 测评 Pagespeed 及 Yslow 分数在85%以上
Webpagetest 测评 + √ ,Speed index 排名前15%
Google 的 Pagespeed insight 评分在90以上
如果你觉的我们做的还可以,有需求,请联系我们!
如果,想了解我的速度优化细节,及与其他网站真实的对比,请看 网站速度优化细节!
复制成功