首页 > 新锐资讯动态

BBC的网站加载为何比ESPN慢?数据验证JS影响网站加载速度

发布时间:2017-07-25 发布者:新锐传媒 查阅 [563] 评论 [0]

用户体验是我们日久常谈的问题,而网站的用户体验关键点之一就是加载速度。当提到网站的加载速度时,我们通常会想到多方面的影响因素,包括:网站服务器的性能,是否使用了CDN(内容分发网络),使用图像的大小,广告banner等等。
最近,在Search Engine Watch的专栏作家Andy Favell的一份调查研究中,借用BBC等在Alexa流量排名前四的大型英文新闻网站在移动端上的加载速度对比,用数据实例说明了JS对网站加载速度的影响。
首先,针对BBC的网站测速后,测速网站HTTP Archive提出的改进建议中显示:BBC网站的代码中含有8个阻塞型JS与7个阻塞型CSS。(具体的加载速度比较在下文中会展出)
BBC网站加载速度优化建议byHTTPArchive
BBC网站加载速度优化建议byHTTPArchive
这四大新闻网站的阻塞型JS与CSS数据如下:(阻塞型—blocking,指的是浏览器在遇到这种类型的JS与CSS时,会停止其他一切元素的读取与加载,优先处理阻塞型资源直到处理完毕。当没有对元素赋予延迟或异步加载属性时,阻塞型为默认形式。)
BBC:8个阻塞型JS,7个阻塞型CSS
纽约时报:0个阻塞型JS
ESPN:两个阻塞型JS,三个阻塞型CSS
CNN:6个阻塞型JS,两个阻塞型CSS

这4大网站的首页文件有多大?

在这项测试中,BBC的网站文件大小展现的颇为惊异:BBC在移动端的首页大小居然只有609KB,其中图片仅占用了70kb,占比最大的JS大小为458kb。根据数据统计,流量排在前一百万的网站移动端首页,平均的页面文件大小为2225kb。
BBC与网站平均首页文件大小比较图
BBC与网站平均首页文件大小比较图
将BBC的首页文件大小与其他三大新闻站点比较,更显示出了BBC在页面文件瘦身上取得的成效是多么的惊人:
网站
页面文件大小
JS文件大小
JS大小占比
JS请求(次)
BBC
609KB
458KB
75.2%
39
纽约时报
2953KB
1511KB
51%
73
ESPN
1802KB
1183KB
65.7%
50
CNN
2182KB
1484KB
68%
67
可以看到不论是从页面文件大小,还是JS的请求次数,BBC的网站都将轻量化做到了极致。似乎BBC在加载速度上胜出也是十拿九稳了。

4大网站加载速度对比,BBC是最快的吗?

根据HTTP Archive网站返回的结果,4大网站的加载速度测试结果如下:
BBC:18.3秒
纽约时报:27.4秒(纽约时报有自己的二级域名的独立移动端站点—mobile.nytimes.com,然而HTTP Archive无法测试该移动站点的加载速度,因此这个数据在这个例子中讨论价值不大)
ESPN:8.8秒
CNN:31.5秒
BBC的加载时间确实比纽约时报与CNN的短了不少,然而令人惊讶的是,ESPN的加载速度居然比BBC还快了不少。
在测速网站的加载过程可视化的功能中,BBC的网站在9秒内不会显示出任何内容,ESPN的内容在第5秒就有展现。具体的测试结果如下图(每一张图片间隔一秒种)
BBC与ESPN移动端可视化加载图
BBC与ESPN移动端可视化加载图
正如文章开头说过的,影响网站加载速度的因素很多:网站服务器的性能,是否使用了CDN(内容分发网络),使用图像的大小甚至是测试服务器的地点与时间。
但是,通过对比ESPN与BBC的数据,BBC的页面文件大小与JS的请求次数都比ESPN要少,然而ESPN却在加载速度上更上一筹。由此得出的一个非常可靠的推论就是:JS对网站加载速度有影响,并且阻塞型JS对网站加载速度影响非常大。
实际上,随着web技术的发展,许多以前只能用JS实现的功能,已经可以用HTML与CSS来完成了,最令人熟知的例子就是网站的响应式。现在,我们已经可以给JS赋予延迟与异步等加载属性来告知浏览器如何加载页面,让页面更加快速的呈现在用户的面前。
过时的设计、技术与实现方式在现在已经不再适用,甚至会伤害到用户体验。有的时候,一次简单的改版就可以让转化率大增。
发自 [] | 评论 [0] | 查阅 [563]

网友点评:0 条评论

      免责声明 | 新锐观点 | 网站运营 | 网站推广 | 联系我们 | 网站地图