网站建设   网站建设技术   网站建设百科  

移动端网页优化

人浏览  发布时间:2022-02-22

响应式网页设计的普及使各个终端的用户都能够访问所需网站。当下有关响应式设计的讨论大多围绕自适应布局的实现展开,的确,网页内容能与浏览器窗口缩放进行精巧的交互是响应式设计的优势,但也是巨大障碍-一响应 式设计的初衷本应该是在任意终端显示内容。 时至今日,访问响应式的网站终端从高速联网的机顶盒到装载低端CPU网速欠佳的手机,应有尽有。对于后者的适配愈发重要,因为17%的美国公民把手机当做主力上网设备。 用圣母大学Erik Runyon的话来说,我们对RWD的认知不应该只停留在响应式网页设计,应该更进一步到有责任感的网页设计。我们应该竭尽所能优化网站性能,从当前的设计现状来看,我们还有很长的路要走。 网页臃肿化 的确,近年来网页变得越来越臃肿。自2003年以来,单一页面的平均文件尺寸已经从300 KB增加到1098 KB,超过了1 MB (平均每个页面要进行85次请求! )。用如此大量的内容来呈现一个简单的页面,真是令我感到既惊奇又困惑。Tim Berners-L _ee的第一个页面只有2.5 KB,只相当于现在页面平均文件尺寸的1/420。影响文件尺寸的原因有二:图片和JavaScript,一共占用页面文件的82%。图片本身就占用64%。除此之外,更重要的原因存在于我们自身。作为设计师和开发者,我们都受了网速会越来越快念头的驱使。没错,这个想法能使我们的工作合理化。 屏幕越来越大,我们拥有更多填充图片的空间。新的浏览器和JavaScript库使我们能够提供更丰富的浏览体验。网速越来越快,为什么要担心网页文件尺寸呢?我们先走一步,网速总会慢慢追上来的。但在移动终端上, 网速越来越快这个认知已经超过了真实发展情况:现在的网速虽然比拨号上网有了很大改观,但还远远不够快。想当然地认为网速必然提升会掩盖我们许多错误做法。我们根据桌面端的开发经验,-味追求根据网速优化网页性能,却忽视了移动端网页性能提升最本质的瓶颈:延迟。 延迟: 移动网络杀手 虽然移动网络速度不如有线网络,但也没那么糟糕。导致两者网页性能差距的罪魁祸首便是延迟。lyaGrigorik在延迟:网页性能的新瓶颈中提到,单纯提升网速并不能明显缩短页面加载时间。网速超过某个特定值后,无论再如何提速,网页加载速度都不会发生明显变化。举个例子,将网速从5Mbit/s提升到10Mbit/s,网页加载时间只缩短了5%。 但降低网...
 响应式网页设计的普及使各个终端的用户都能够访问所需网站。当下有关响应式设计的讨论大多围绕自适应布局的实现展开,的确,网页内容能与浏览器窗口缩放进行精巧的交互是响应式设计的优势,但也是巨大障碍-一响应 式设计的初衷本应该是在任意终端显示内容。
时至今日,访问响应式的网站终端从高速联网的机顶盒到装载低端CPU网速欠佳的手机,应有尽有。对于后者的适配愈发重要,因为17%的美国公民把手机当做主力上网设备。
用圣母大学Erik Runyon的话来说,我们对RWD的认知不应该只停留在响应式网页设计,应该更进一步到有责任感的网页设计。我们应该竭尽所能优化网站性能,从当前的设计现状来看,我们还有很长的路要走。
  1. 网页臃肿化
的确,近年来网页变得越来越臃肿。自2003年以来,单一页面的平均文件尺寸已经从300 KB增加到1098 KB,超过了1 MB (平均每个页面要进行85次请求! )。用如此大量的内容来呈现一个简单的页面,真是令我感到既惊奇又困惑。Tim Berners-L _ee的第一个页面只有2.5 KB,只相当于现在页面平均文件尺寸的1/420。影响文件尺寸的原因有二:图片和JavaScript,一共占用页面文件的82%。图片本身就占用64%。除此之外,更重要的原因存在于我们自身。作为设计师和开发者,我们都受了“网速会越来越快”念头的驱使。没错,这个想法能使我们的工作合理化。
屏幕越来越大,我们拥有更多填充图片的空间。新的浏览器和JavaScript库使我们能够提供更丰富的浏览体验。网速越来越快,为什么要担心网页文件尺寸呢?我们先走一步,网速总会慢慢追上来的。但在移动终端上,“ 网速越来越快”这个认知已经超过了真实发展情况:现在的网速虽然比拨号上网有了很大改观,但还远远不够快。想当然地认为网速必然提升会掩盖我们许多错误做法。我们根据桌面端的开发经验,-味追求根据网速优化网页性能,却忽视了移动端网页性能提升最本质的瓶颈:延迟。
  1. 延迟: 移动网络杀手
虽然移动网络速度不如有线网络,但也没那么糟糕。导致两者网页性能差距的罪魁祸首便是延迟。lyaGrigorik在“延迟:网页性能的新瓶颈”中提到,单纯提升网速并不能明显缩短页面加载时间。网速超过某个特定值后,无论再如何提速,网页加载速度都不会发生明显变化。“举个例子,将网速从5Mbit/s提升到10Mbit/s,网页加载时间只缩短了5%。” 但降低网络延迟却能明显提高页面加载速度。
那么,究竟什么是延迟呢?延迟指浏览器向服务器发出资源请求到开始接受响应的时间。
有线网络的延迟可以达到平均每个请求为20ms,3G网络的平均延迟则有200 ms秒,相差10倍之巨。下边我们通过实例来说明延迟如何影响网页性能:在有线网络环境中,浏览器同时打开4个页面,平均每个页面85个请求,总加载时间中延迟占0.4 s; 3G网络环境中,同样条件,延迟本身就高达4.5 S。
  1. 不能降低移动端的性能期望
由于延迟的差异,我们设计的响应式网页在移动端的读取时间是桌面端(我们的开发和测试环境)的10倍。但仔细想想,延迟并没那么可怕,毕竟用户也知道移动端页面的读取时间要长一-些,所以应该很容易体谅我们吧。大错特错! 调查报告显示,74%的手机用户认为移动端网页的加载速度应该和桌面端-样快。两年前,这个数字只是58%。同一调查表明,57%的用户表示在手机上网页浏览体验不佳,包括加载速度慢等问题,不会向别人推荐该网站或服务; 46%不会再访问该网站。报告中最惊人的数据与页面读取时间有关。2009年, 20%的调查对象表示不会访问移动端比桌面端加载速度慢5s以上的网站。2011年,同样是5s的最长等待时间,比例却上升到74%。如前文所说,这至关重要的5 s中,延迟就占用了4.5 s。这些数字对设计师和开发者而言意味着什么呢?
  1. RWD视外下载
作为移动开发技术,RWD的丑恶一面在于它可以有效隐藏页面文件尺寸。有的开发者将RWD视为至宝,媒介查询就像万金油一样,一经采用, 立刻就能诞生一个体验友好的移动端网站。就像Jason Grigsby所说: “CSS的媒介查询功能已经成了掩饰问题的利器,还给开发者造成轻松打造多终端页面、前景无限的假象。”
点击浏览下载讲义资料
(编辑:360°搜索建站)

备注:本网站资料免费下载浏览,为百度空间下载资料,需用户注册有百度账号,登陆后才可浏览下载,如有疑问联系我们免费解答。


你可能喜欢的:

友情链接
24小时服务电话:13992352808 地址:广东省深圳市宝安区西乡街道东方商务大厦 WebDesign ©2012 Corporation 360°搜索建站网 网站地图