响应式设计与性能优化整合应对移动挑战
作者:网络转载 发布时间:[ 2014/3/10 13:26:50 ] 推荐标签:性能优化 网页设计 移动
在当今的超级互联世界中,网络和移动应用程序的性能在推动客户的采纳和参与方面发挥着前所未有的关键作用。终端用户有着非常高的期望值,包括更快的页面加载速度,更丰富、更引人入胜的网络体验和应用程序。
与此同时,移动是快速发展的全球性现象,无论是业务、信息还是娱乐,移动正在改变我们与内容互动的方式。因此,通过快速高质量的网络体验与移动用户进行互动的能力成为一项业务要求,以及成功的首要条件。如果忽视移动用户的需求,有可能损失很大一部分、甚至越来越多的业务。
响应式网页设计采用正在迅速增长
然而,在这个美好的新世界提供快捷优质的体验并不容易,需要面临跨越不同浏览器、屏幕尺寸、网络和设备来优化性能的挑战。因此,企业寻求能够同时适用于每种设备的技术,这一过程使响应式网页设计(RWD)应运而生。
响应式网页设计是一种网页开发方法,指网页能够应响应载入的环境(主要是屏幕尺寸)并相应地更改用户界面。这种技术包括一系列灵活的网格和布局组合、图片以及对CSS3媒体查询的智能运用。RWD页面包含了展示所有版本的网站,包括移动和桌面视图在内所需的HTML。CSS和JavaScript会在浏览器中运行,并会隐藏或修改内容,以适应屏幕尺寸。
RWD的使用与日俱增,一个原因是RWD可在每次有新移动设备类别进入市场时,免于重新设计和开发。
如前所述,采用RWD战略听上去像是一个理想的解决方案。但是,它并不是改进移动用户体验的杀手锏。事实上通过RWD网站成功与移动用户进行互动并不总是那么容易。随着移动设备变得更强大,网络变得更快、更加一致,移动终端用户的期望值也会随之增长。
提供快速优质的网络体验并不容易
如果RWD不是的,那么这类网站面临的分发挑战又是什么呢?在近对RWD网站组成及其对网络性能影响所做的调查中,347个 RWD网站在不同的屏幕分辨率上进行了测试,并且对比了在每种分辨率上下载每个页面所需的字节数。调查结果显示,72%的RWD网站在不同的屏幕分辨率上的尺寸都大致相同,22%的网站只是稍微小一点。
同样重要的是,不仅大部分页面会在不同的设备上提供相同的payload,并且相同的有效荷载也与页面内容更多的总体趋势保持一致(平均页面大小接近1.2MB)。
RWD开发页面带来的一个更大更复杂的挑战是它们必须交付到终端用户的浏览器上,随后这些浏览器需要对页面进行处理和渲染。在计算能力有限、动力不足的移动设备上,以及受限的无线和蜂窝网络上,这会对用户体验产生不利影响。
从终端用户角度来看,在移动设备上提供大型复杂页面意味着什么?下图显示了一个终端用户在各种同类佳设备/网络上访问美国零售商的RWD网站主页的体验。图中的性能指标通过一个使用Safari远程调试功能的空浏览器缓存来捕捉。每个设备/网络进行的十项测试是通过下图显示的中间数字页面加载时间(onLoadevent)而进行的。结论显而易见,在无线网络上向移动设备交付相对比较小的700KB网站也会导致严重的性能缺陷。
图1:示例RWD网站并未达到终端用户的性能期望值
从根本上说,终端用户并不关心在无线和蜂窝网络上向受限设备提供优质速度的基础技术挑战。他们只要求网站能够像他们希望的那样快速加载和运行。终端用户期望值只会变得越来越高,相应地,他们也希望网络应用程序变得更快、更丰富、更加引人入胜。
提供快速优质响应式网页设计网站的步骤
如何才能提供快速、高质量的RWD网站?如前所述,RWD页面包含了展示所有版本的网站,包括移动和桌面视图在内所必要的HTML。CSS和JavaScript在浏览器中运行,并会隐藏或修改内容,以适应屏幕尺寸。在智能手机上,这往往意味着浏览器需要下载并展示桌面网站所需的全部内容,让CSS/JS隐藏绝大部分内容。
第一步要关注真实页面以及向终端用户提供的相关对象。对于那些希望交付复杂RWD网站相关的开发者来说,也有多种选择。首先,让内容尽可能地靠近终端用户,例如使用CDN并充分利用SPDY(一个传输网络内容的开放式网络协议,与无线网络尤为相关)这样的佳交付机制。
相关推荐
更新发布
功能测试和接口测试的区别
2023/3/23 14:23:39如何写好测试用例文档
2023/3/22 16:17:39常用的选择回归测试的方式有哪些?
2022/6/14 16:14:27测试流程中需要重点把关几个过程?
2021/10/18 15:37:44性能测试的七种方法
2021/9/17 15:19:29全链路压测优化思路
2021/9/14 15:42:25性能测试流程浅谈
2021/5/28 17:25:47常见的APP性能测试指标
2021/5/8 17:01:11