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

一.前言

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

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

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

可是，移动旅游网站性能的又如何呢？浏览器

二.移动旅游网站现状

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

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

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

• Load Time (Fully Loaded)加载时间（彻底加载）app

• 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 端和移动设备端，任何有利于为用户提供良好体验的方法都应进行利用与尝试。

笔者建议：

一、整合 JavaScript 和 CSS

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

二、压缩代码

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

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

在页面彻底渲染以前，许多脚本代码库是没必要要的。所以，能够放心地将下载和解析这些脚本延迟到 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 官方博客