旅游移动端网站—慢！慢！慢！

一.前言

随着智能手机和数据网络的不断普及，真正的「移动互联网」的世界必然到来，无论是学生还是工作者，无论是旅行规划时还是旅游途中，使用智能手机进行搜索，应对途中的各种突发请款，这种趋势依然不可避免。

据英国的市场研究公司 Euromonitor 计算表明，到2019年，价值 2.36 万亿美元的旅游和酒店业全球在线预订中，将有四分之一会通过移动设备完成，而随着世界驴友交流的不断扩大，这个比率还会不断提高。美国是使用手机预定最为频繁的国家，到 2016 年，预计使用手机预定量将达到 50% 。

这个看上去惊人的比例不难理解：旅游，就其定义而言，就是一种移动体验，现如今，研究行程，处理酒店、航班、火车和汽车的预订，所有这一切都可以使用随身携带的设备来完成。

但是，移动旅游网站性能的又如何呢？

二.移动旅游网站现状

尽管整个旅游业一直努力，想要满足游客使用智能手机处理信息的欲望，但现实是，大部分移动旅游网站的糟糕性能让用户痛苦万分。

为了感受当下游客的真实体验，笔者使用时下最流行的智能手机，测试了 2015 年 11 月份性能排名前 100 的旅游网站。（该排名是由信息科技公司 SimilarWeb 基于网站流量和用户参与水平的数据融合后得出的）

笔者采用实际移动设备连接 AT&T 4G/LTE 网络来测试网站的用户体验，分别使用苹果 5 和 6、三星 Galaxy S5 和 S6 对每一个被测网站进行了 3 次访问。笔者记录这三次测试的中间数据，并从以下几个方面比较网站的性能：

• Load Time (Fully Loaded)加载时间（完全加载）

• Time to First Byte（第一个字节出现的时间）

• Start Render（开始渲染时间）

• Requests (Fully Loaded)请求（完全加载）

• Bytes In/Total Size in KB字节/总大小（KB）

• Content Breakdown by MIME Type根据MIME类型的内容细分

• Redirects重定向

测试中，笔者发现，在电子商务网站中常见问题，例如：页面臃肿、复杂度加大、图像大小及重定向太多，这些问题在移动旅游网都有，而且都会拖慢页面加载时间，增加延迟率。

三.测试的重要发现

与传统的电商网站相比，移动旅游网站通常具有更加庞大的表格，这就意味着网页最初加载的元素是用于数据输入的字段，而不是与旅行相关的各种图片等图片。

故而，这些移动旅游网站的页面构成很大程度上与传统的移动零售网站是不同的。尽管如此，为了应用的内部性能以及改善用户体验，各个旅游网站的进步空间还是很大的。

重要提示：本次测试的目的不在于对所测试的移动端设备进行性能评估，而是为了揭示不同移动设备间的性能差异。网站所有者需要意识到，用户中存在着这样的体验差异，从而根据各种不同的设备类型和连接方式对网站性能测试进行优先排序，并且使用相关工具进行性能分析监控也是十分必要的。

在排名前 100 的移动旅游网站中：

• 四个设备的平均加载时间都超过预计的四秒的目标值：苹果 6，加载时间中间值为 6.7 秒；苹果 5 为 5.5 秒；三星 Galaxy S5 ，加载的时间中间值为 5.7 秒，其中 S6 的加载时间中间值最短，为 4.1 秒。

• 尽管被测试页面平均只包含 62 个资源请求（例如，图片、CSS 和 JavaScript 文件），然而，18% 的页面都含有超过 100 次资源请求。每一个请求都会增加延迟时间，这些加起来就拖慢了页面加载时间。

• 图片，作为网站整体大小的一部分，健康的平均占比约为四分之一 （22.8%）。然而，在 10% 的被测网站中，其图片含量都超过一半大小，最高达到 86%。

• 与理想的 1MB 总负载量相比，移动旅游网站超过了该预期，平均负载为 1.2MB。

一般来说，加载速度最慢的网站包含的 JavaScript 请求要比加载最快的网站多，JavaScript 的平均负载约为 368K。

四.10个最慢的网站（匿名）

观察这些最慢的网站，可以发现它们通常（虽然并非全部）含有较多的请求，占用资源较多。

另一个拖慢访问的关键因素：第三方JavaScript和跟踪器/分析工具！

业界试图获取更多的客户数据，来进行各种市场营销活动，这也是可以理解的。但是，数据跟踪器（例如 GA、百度统计）加重了网站的负荷，增加了读取任务的数据量，拖慢了网速。

下面，来看看某个最慢网站的瀑布流图：

以黄色突出的条目，表示的是「警告」。它们与广告网络和分析工具有关，往往包含了不受欢迎的重定向，而 JavaScript 元素的总和（包含 110 个请求）占了整个移动网页的 60.2%。

图片来源: WebPagetest.org

五.真实用户体验监控工具

就像我们之前说过的，包括移动互联网行业在内的所有网站对用户体验的关注越来越多，传统的拨测已经不能满足各个公司的需求，而一款好的工具就更加重要了，像上面的两个图（瀑布流图以及各个请求占用比例），都是通过这类工具得到的。

除了那两类表格之外，对于访问者的手机系统的类型以及网络制式的统计也很重要，这样才能更加有针对性的进行优化动作。


现在 APM 监控领域能做到上面说的资源耗时瀑布流图、各个资源占用比例、以及访客系统分类统计的工具还不多，做的比较好的有：OneAPM Browser Insight、AppDynamics、Ruxit、New Relic

这几款工具均采用的是页面插码的方法，而且还支持本地化部署，也就不用担心 JS 的下载时间给页面带来的缓慢问题了。

六.结论和建议

总结

对于移动旅游万展或者酒店网站的所有者来说，需要权衡下第三方跟踪器(GA、百度统计、CNZZ 等)造成的性能冲击及其带来的好处，是否值得消耗部分用户访问时间。

整个旅游业界的网站跳出率约为 41%，包括所有的网站、台式 PC 端和移动设备端，任何有利于为用户提供良好体验的方法都应进行利用与尝试。

笔者建议：

1、整合 JavaScript 和 CSS

将 JavaScript 代码和 CSS 样式整合到统一的文件，并在多个页面间进行共享无疑是最常见的方法。这种技术简化了代码维护，改进了客户端的缓存效率。在 JavaScript 文件中，确保同样的脚本不会在一个页面上多次下载（现情况是，当大型团队或者多个团队共同参与页面开发时，重复脚本下载的概率尤其高）。

2、压缩代码

压缩，通常适用于脚本和样式表，它消除了不必要的字符，如空格，换行符和评论。正确压缩的资源无需任何特殊处理就能在客户端运行，与此同时文件大小平均减少 20% 左右。HTML 页面中的脚本和样式块也可以压缩，许多优质的代码库都可以进行压缩，常伴随把多个文件合并成一个的服务，这就进一步减少了请求数量。

3、延迟加载和执行非必需的脚本

在页面完全渲染之前，许多脚本代码库是不必要的。因此，可以放心地将下载和解析这些脚本延迟到 onload 事件之后，而不妨碍页面重要可见内容的初始渲染。

延迟加载的脚本可以是你自己的，或者更重要的，是来自第三方的脚本。广告、社交媒体工具、或分析工具支持的劣质脚本会妨碍一个页面的渲染，有时甚至使加载时间延长宝贵的数秒。

遵从这些建议和一些最佳实践有助于提高网站用户的参与水平。记住，对于用户来说，即使是相貌平平的输入字段页面也可能反应太慢。

你也不想他们问：「页面加载出来了吗？」

注：
本文参考原文链接，
http://www.webperformancetoday.com/2015/12/16/were-not-there-yet-images-scripts-and-redirects-are-slowing-down-the-top-mobile-travel-sites/
（作者：KENT ALSTAD）

由 OneAPM 产品运营翻译整理。

Browser Insight 是一个基于真实用户的 Web 前端性能监控统计平台，能够帮大家定位网站性能瓶颈，网站加速效果可视化；支持浏览器、微信、App 浏览 HTML 和 HTML5 页面。想阅读更多技术文章，请访问 OneAPM 官方技术博客。

本文转自 OneAPM 官方博客