移动端网页优化

发布：2022-02-10 12:20:40 浏览：2336

  响应式网页设计的普及使各个终端的用户都能够访问所需网站。当下有关响应式设计的讨论大多围绕自适应布局的实现展开，的确，网页内容能与浏览器窗口缩放进行精巧的交互是响应式设计的优势，但也是巨大障碍-一响应 式设计的初衷本应该是在任意终端显示内容。
时至今日，访问响应式的网站终端从高速联网的机顶盒到装载低端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库使我们能够提供更丰富的浏览体验。网速越来越快，为什么要担心网页文件尺寸呢?我们先走一步，网速总会慢慢追上来的。但在移动终端上，“ 网速越来越快”这个认知已经超过了真实发展情况:现在的网速虽然比拨号上网有了很大改观，但还远远不够快。想当然地认为网速必然提升会掩盖我们许多错误做法。我们根据桌面端的开发经验，-味追求根据网速优化网页性能，却忽视了移动端网页性能提升最本质的瓶颈:延迟。

2. 延迟: 移动网络杀手

虽然移动网络速度不如有线网络，但也没那么糟糕。导致两者网页性能差距的罪魁祸首便是延迟。lyaGrigorik在“延迟:网页性能的新瓶颈”中提到，单纯提升网速并不能明显缩短页面加载时间。网速超过某个特定值后，无论再如何提速，网页加载速度都不会发生明显变化。“举个例子，将网速从5Mbit/s提升到10Mbit/s，网页加载时间只缩短了5%。” 但降低网络延迟却能明显提高页面加载速度。
那么，究竟什么是延迟呢?延迟指浏览器向服务器发出资源请求到开始接受响应的时间。
有线网络的延迟可以达到平均每个请求为20ms，3G网络的平均延迟则有200 ms秒，相差10倍之巨。下边我们通过实例来说明延迟如何影响网页性能:在有线网络环境中，浏览器同时打开4个页面，平均每个页面85个请求，总加载时间中延迟占0.4 s; 3G网络环境中，同样条件，延迟本身就高达4.5 S。

3. 不能降低移动端的性能期望

由于延迟的差异，我们设计的响应式网页在移动端的读取时间是桌面端(我们的开发和测试环境)的10倍。但仔细想想，延迟并没那么可怕，毕竟用户也知道移动端页面的读取时间要长一-些，所以应该很容易体谅我们吧。大错特错! 调查报告显示，74%的手机用户认为移动端网页的加载速度应该和桌面端-样快。两年前，这个数字只是58%。同一调查表明，57%的用户表示在手机上网页浏览体验不佳，包括加载速度慢等问题，不会向别人推荐该网站或服务; 46%不会再访问该网站。报告中最惊人的数据与页面读取时间有关。2009年， 20%的调查对象表示不会访问移动端比桌面端加载速度慢5s以上的网站。2011年，同样是5s的最长等待时间，比例却上升到74%。如前文所说，这至关重要的5 s中，延迟就占用了4.5 s。这些数字对设计师和开发者而言意味着什么呢?

4. RWD视外下载

作为移动开发技术，RWD的丑恶一面在于它可以有效隐藏页面文件尺寸。有的开发者将RWD视为至宝，媒介查询就像万金油一样，一经采用， 立刻就能诞生一个体验友好的移动端网站。就像Jason Grigsby所说: “CSS的媒介查询功能已经成了掩饰问题的利器，还给开发者造成轻松打造多终端页面、前景无限的假象。”