WPO实验:如果Google被墙,网站会出现怎样的杯具?

原文:http://tanyanyun-163-com.iteye.com/blog/1294722

《一小段js代码引发的网站可用性灾难–WPO优化反面实例》中,我们提到,“在线聊天”的JS代码下载如果出了状况,会影响到后续的页面组件加载,从而造成可用性巨大灾难。

今天再来一个更形象的例子,而且更有代表性。

很多的网站都加载了Google Analytics(简称GA) 代码,不少外贸网站添加了Google Translate (简称GT)代码。还有一些注重社会化营销的,会添加Facebook或Twitter的JS代码。

如果GA或GT在某个时间突然被墙了,会给你的网站带来什么样的杯具呢?我们看看下面六幅视频截图(图片左边是正常打开网页,简称正常态;右边是被墙了之后的打开网页,简称墙态)。

0秒:正常态和墙态都一样,什么都没有

3.1秒:正常态的页面顶部和目录区已经载入;墙态只载入了顶部,因为GT被墙了,正在等待。

5.2秒:正常态已经基本加载完毕,呈现给用户的是可使用的网页;墙态还在等GT,等等等……等不到……

7.3秒:正常态的各组件彻底加载完成;墙态还在等GT,等等等……等不到……

25.7秒:正常态加载完,没变化;墙态终于等到了——GT超时信号,开始加载网页其他组件,

这个时候黄花菜可能都凉了。不过GT超时了,GA还没有超时,还要继续等待大约20秒。不过幸运的是,GA的代码放在页面底部,所以这个等待已经不影响用户使用了。

46.3秒:正常态加载完,没变化;墙态终于等到了——GA超时信号,苦难终于结束了。

 

幸运的是,好长一段时间GA和GT还都正常,但世事难料,谁知道哪天墙来了,那么对于你的网站而言就无疑是一个灾难了——用户需要25秒才能勉强打开一个首页。所以未雨绸缪,总是好的。

 

解决方法:

1. 将外部站点的JS代码放到页面底部。这样页面虽然没有加载完成,至少用户能看到大部分内容。

2. 如果无法做到第一点,用异步加载(或Ajax)来载入外部站点的JS代码。

3. 如果上述两点都做不到,那就经常保持警惕,随时留意“墙来了”马上取消JS。

 

另外,上述视频地址:http://www.webpagetest.org/video/view.php?id=111204_f99d8ca8263aeb4b652d1b7e53116b38fa14ae6b

 

作者: 谭砚耘@WPO及网站可用性-科研笔记

版权属于: 谭砚耘 (TOTHETOP至尚国际 )

版权所有。转载时必须以链接形式注明作者和原始出处

http://www.wpowhy.com/wpo-experiment-what-happened-when-google-is-blocked-by-firewall-353/

如果你希望与作者交流,请发送邮件到 tanyanyun/at/163.com 别忘了修改小老鼠


发表评论