一小段js代码引发的网站可用性灾难–WPO优化反面实例
做过WPO前端优化的人都了解什么叫JS阻塞：就是当浏览器下载外部引用的javascript代码的时候，会停止其他组件的下载和渲染（或内容呈现）。
原因可以参见网上这篇关于外部js阻塞的详细介绍
在大多数外贸B2C网站中，都可以看到“即时聊天 Live Chat”工具这个工具方便网站访客直接和客服人员沟通，第一时间激发出用户需求。网上也有免费的livechat工具。最近笔者留意的一个网站发生了“livechat的JS阻塞引发的网站可用性灾难”，现在简略介绍一下具体情况。
下图是livechat所在的位置
下图是这个网站的瀑布图。红色框框的部分是livechat的js代码加载。
可以看到网站加载没多久，livechat代码开始启动，livechat还没有加载完成之前，其他的所有组件都必须排队等着，啥都不能干。这个过程大概持续了453毫秒
453毫秒虽然不快，但还可以忍受。但在三天前，提供livechat服务的第三方服务器出了故障，导致运行上述两个组件需要等待30秒甚至更长，这就造成了大麻烦。整个玩站只能载入导航栏上面的部分，下面都是一篇空白，因为所有的其他组件都被livechat阻塞了。
灾难发生当天的营业额只有平时的1/3，用户平均页面浏览量跌去70%。
解决方法：
1. 尝试将livechat的js代码转移到页面最下方，但无法成功，因为livechat构建时就需要在前边调用，否则页面出错。
2. 采用异步调用的方式载入外域JS组件。
3. 关闭livechat，一切恢复正常。
反思：
使用外部调用的插件，要小心。我们经常会用到Google Analytics 或者Google Translate代码，这些服务因为是Google提供服务的，出故障的机会很小，载入时间也很快。但如果是国内用户调用GA或GT代码，可能因为伟大的WALL的原因，导致服务不稳定，从而影响网站性能表现。
有些国内的网站使用的是TQ，服务器在北京，如果你的主要用户在南方，同样会遇到速度慢得问题。
至于一些小服务商提供的插件，就尽量别用啦。
作者: 谭砚耘@用户体验与可用性设计-科研笔记
版权属于: 谭砚耘 （TOTHETOP至尚国际 ）
版权所有。转载时必须以链接形式注明作者和原始出处
如果你希望与作者交流，请发送邮件到 tanyanyun/at/163.com 别忘了修改小老鼠