速度与激情——1.2 　对移动用户的影响

随着越来越多的用户开始使用移动设备，以及越来越多的工作通过在线的方式完成，网站整体用户体验的重要性也愈发凸显。StatCounter Global Stats 的一份数据（http://gs.statcounter.com/）显示，移动设备的流量在互联网总流量中的比例正在稳步递增（图1-1）。 图1-1：从StatCounter Global Stats 的这份数据中可以发现，互联网流量中移动流量的比例正稳步上升。根据这个趋势，移动设备流量的增长在短期内并不会放缓 很多公司已经注意到移动设备流量的快速增长。Mary Meeker 的互联网趋势报告（http://slidesha.re/1ttKWvZ）显示，2013 年早期Groupon 的交易有45% 来自移动设备，而两年前还不足15%。在Etsy 公司（我负责性能工程团队），2014 年年初的流量有50% 来自移动设备。 几乎所有网站的移动流量都在增长，这将会突出网络上页面加载时间的问题，特别是对手持设备用户来说。一项研究（http://slidesha.re/eW8wQ9）显示，对于全球大量的互联网用户来说，手持设备是主要的互联网接入方式。接近50% 的非洲和亚洲互联网用户只使用移动设备，对比之下美国只有25%。这项研究将那些从不或很少使用“桌面”互联网的用户归类为“只使用移动设备”（这项研究将平板电脑归类为“桌面”设备）。总而言之，大量用户主要使用手持设备来访问互联网，而在这些设备上都有其独特的一系列挑战。 1.2.1 　移动网络 手持设备需要花费更多的时间来加载网页，其首要原因是移动网络中数据 的传输特点。在移动设备接收或发送数据前，需要同网络建立一个无线传输通道（图1-2）。在3G 连接的情况下这可能需要花费数秒的时间。在设备同无线基站通信询问何时能传输数据后，网络运营商首先要将数据从无线基站传输到自己的内部网络，然后再传递到公网。这些步骤组合在一起很容易造成数十到数千毫秒的额外延迟。而且，当无线通道中没有数据传输时，超时会让通道进入空闲状态。这时需要重新建立通信通道来从头开始整个流程，对Web 页面加载来说这就是一场噩梦。 用户的手机信号塔你的网络主机必须首先连接到信号塔建立连接后，用户的浏览器就可以连接到你的服务器 图1-2：在移动设备取回加载网站所需的资源前，设备必须同网络建立无线通道。这个过程会消耗数秒的时间，严重拖慢页面加载速度 Ilya Grigorik 写道（http://dwz.cn/29zWGz）：“如今，延迟已成为网络浏览体验的制约因素，而不是带宽。”用户所体验到的延迟越久，用户的设备获取数据所需的时间就会越久，页面完全加载的耗时就会越长。我们在第2 章中会更详细地介绍页面速度相关的基础内容。 延迟和带宽是什么？ 延迟是指数据包从一个点传输到另一个点所消耗的时间。例如，服务器收到并处理请求有延迟，服务器将资源发送回去到浏览器接收之间也有延迟。延迟同基础的物理属性息息相关（比如光速）。通常用毫秒来衡量延迟（一毫秒是一秒的千分之一）。 带宽是通信通道的最大吞吐量，比如光线或者你的移动服务商能够同时传输多少数据。打个比方，一辆出租车和一辆大客车跑在同一条公路上，它们的延迟相同，但大客车的带宽更高。 尽管网络本身的确在缓慢地加速，但当前用户在移动设备上加载页面时可 能正在忍受非常糟糕的体验。一个普通的美国用户的桌面电脑在连接WiFi 时，请求来回的平均延迟只有50 毫秒（http://slidesha.re/1ttLhPw）。这是浏览器发送请求到服务器再通过网络将响应发送回来所需要的时间。但是， 在移动网络情况下，数据来回的时间需要300 毫秒以上。用更直观的例子来比较这个差异：移动网络和老式的拨号连接一样慢。 将加载页面的每一个请求的来回所需的时间添加到起初与网络建立无线通道所使用的时间（大概1000~2000 毫秒）中，你就会明白移动网络性能是如何直接对网站的用户体验产生影响的。而且，由于一些因素，比如用户正在参加一个大量人群聚集的活动或者正处在一个信号不好的区域，很难预测无线网络何时会断掉连接。 这意味着你真的需要在为移动设备优化网站设计时更加重视性能，因为页面加载时间对移动用户的体验以及他们是否会使用你的网站有很大影响。很多公司的研究都为此提供了证据。我在Esty 的团队发现，在页面添加160 KB 的隐藏图片，将会使移动端网页跳出率增加12%。Google 的广告产品DoubleClick 移除了客户端的一个重定向（http://dwz.cn/29zWaE），然后发现移动设备上的点击率提高了12%。为移动用户进行性能优化的一大好处是，使用其他任何设备访问网站的用户也将同时从这些优化中受益。 1.2.2 　移动行为模式 无论通过何种设备访问网站，用户体验都会被页面加载时间所影响。但是， 如果用户使用的是移动设备，则缓慢的加载时间会导致更差的用户体验， 因为除了网速慢，移动用户的使用习惯也不同。 Google 的一项研究（http://dwz.cn/29zXBa）发现，用户在以下情况下使用智能手机： • 外出及家中 • 为了交流和通信 • 使用时间短 • 需要快速地获取信息时 类似地，平板电脑主要用来娱乐或浏览信息。而另一方面，桌面电脑主要 用来进行更严肃或研究密集型的任务。根据这个研究的结果，通常情况下智能手机是下面这些在线行为的入口： • 搜索特定信息 • 浏览 • 购物 • 网络社交 当设计网站时，需要考虑用户以有限的时间在设备上完成这些任务的便捷性， 以及移动网络对此的影响程度。同时要记住，只使用移动设备的用户没有选择的余地，只能在手机上完成这些任务，同时无论使用什么设备，所有的用户都不喜欢浪费时间。设计应该直观且简单易用，而且无论在什么平台上，页面都要尽可能快地可以进行交互操作。 1.2.3 　移动硬件 另外，即使是在手持设备上使用WiFi，受天线长度和输出功率的影响，用户的速度体验也可能会很慢。WiFi 可以同时使用不止一根天线来发送和接收信号，但是大部分智能手机并不支持多信道技术。而且手持设备的WiFi 天线长度也比笔记本和桌面电脑的要短很多。 同时手持设备试图让电池电量更高效（这是智能手机用户体验的重要部分），而省电的主要途径之一就是限制无线信号的发送。桌面电脑并不使用电池，因此使用WiFi 时并不需要限制信号强度。最后，现在大部分智能手机只支持比较老且慢的WiFi 标准，只有新式的手持设备才支持最新的802.11ac 标准。 很多对页面加载时间的优化同时也会优化设备的电量消耗，从而对用户体验产生影响。在移动设备上，诸如WiFi 信号强度、JavaScript 渲染和图片渲染等都会对电量消耗产生影响。在一项研究中（http://www2012.org/ proceedings/proceedings/p41.pdf） 研究者发现， 如果Amazon 将它全部的图片文件转成92% 质量压缩的JPEG 文件，在Android 手机上加载首页将节省20% 的电量，而同样的改动对Facebook 来说则可以节省30% 的电量。这个改进通过减少电量消耗提升了用户体验，而图像质量的损失几乎可以忽略不计。另一项研究（https://www.usenix.org/system/files/conference/ nsdi13/nsdi13-final177.pdf）发现，移动设备上的主要页面中，多达35% 的加载时间花费在处理诸如HTML 解析和JavaScript 执行等任务上。 总而言之，优化网站的性能将会对整体的用户体验产生影响，包括电池续航能力。