文档章节

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

OneAPM蓝海讯通
 OneAPM蓝海讯通
发布于 2016/01/28 15:39
字数 2538
阅读 43
收藏 0

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

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

据英国的市场研究公司 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 InsightAppDynamicsRuxitNew 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 官方博客

© 著作权归作者所有

OneAPM蓝海讯通
粉丝 94
博文 631
码字总数 1266889
作品 0
海淀
私信 提问
【算法分析】如何理解快慢指针?判断linked list中是否有环、找到环的起始节点位置。以Leetcode 141. Linked List Cycle, 142. Linked List Cycle II 为例Python实现

引入 快慢指针经常用于链表(linked list)中环(Cycle)相关的问题。LeetCode中对应题目分别是: 141. Linked List Cycle 判断linked list中是否有环 142. Linked List Cycle II 找到环的起始节...

rgvb178
2018/10/23
0
0
Web前端慢加密

0x00 前言 天下武功,唯快不破。但密码加密不同。算法越快,越容易破。 0x01 暴力破解 密码破解,就是把加密后的密码还原成明文密码。似乎有不少方法,但最终都得走一条路:暴力穷举。 也许你...

Candy_Desire
2015/12/02
189
0
SPA(单页面应用)和MPA(多页面应用)

原文链接:https://www.jianshu.com/p/a02eb15d2d70 单页面应用 原理: 会感知到的变化,通过这一点可以用动态地将当前页面的内容清除,然后将下一个页面的内容挂载到当前页面上。这个时候的...

Rotation.
08/19
0
0
业务运维实战:腾讯是怎么优化APP用户体验的?

作者简介: 黄伟俊(henry) 腾讯高级运维工程师,多年研发与运维工作经验。专注(移动端+服务端)性能管理,大数据分析领域的探索与实践。 引言 当前,用户体验已成为一种新的产品价值。当技...

yard521
2016/09/19
0
0
让界面动起来!移动动效设计必备灵感网站

原文出处:设计达人 扁平化的兴起,现在越来越流行动效设计,特别对于移动端,对交互动效要求是很高的,今天为大家整理一些以展示动效为主的网站,对交互设计师来说是很好的灵感发源地。 下面...

设计达人
2015/10/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

springboot2.0 maven打包分离lib,resources

springboot将工程打包成jar包后,会出现获取classpath下的文件出现测试环境正常而生产环境文件找不到的问题,这是因为 1、在调试过程中,文件是真实存在于磁盘的某个目录。此时通过获取文件路...

陈俊凯
今天
5
0
BootStrap

一、BootStrap 简洁、直观、强悍的前端开发框架,让web开发更加迅速、简单 中文镜像网站:http://www.bootcss.com 用于开发响应式布局、移动设备优先的WEB项目 1、使用boot 创建文件夹,在文...

wytao1995
今天
9
0
小知识:讲述Linux命令别名与资源文件的区别

别名 别名是命令的快捷方式。为那些需要经常执行,但需要很长时间输入的长命令创建快捷方式很有用。语法是: alias ppp='ping www.baidu.com' 它们并不总是用来缩短长命令。重要的是,你将它...

老孟的Linux私房菜
今天
8
0
《JAVA核心知识》学习笔记(6. Spring 原理)-5

它是一个全面的、企业应用开发一站式的解决方案,贯穿表现层、业务层、持久层。但是 Spring 仍然可以和其他的框架无缝整合。 6.1.1. Spring 特点 6.1.1.1. 轻量级 6.1.1.2. 控制反转 6.1.1....

Shingfi
今天
7
0
Excel导入数据库数据+Excel导入网页数据【实时追踪】

1.Excel导入数据库数据:数据选项卡------>导入数据 2.Excel导入网页数据【实时追踪】:

东方墨天
今天
10
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部