Google网站管理员：提升移动Web性能的4个建议
openkk 13年前
<p align="left"> 移动互联网已经在全球得到了广泛的应用。到 2009 年，有 50%的新增的互联网访问都是来自手机设备的（eMarket，2008和 2009）。来自 Google 的内部资料显示，随着移动浏览器的提升，用户的浏览习惯也在逐步改进。</p> <p align="left"> 移动浏览器上的页面布局与桌面浏览器有着显著的差异，所以，想要在移动设备上开发出优秀的浏览器，有些注意事项是需 要开发者事先了解的。对于如何在移动设备上开发出高性能、体验良好的 web 应用，Google 网络管理员 Jeremy Weinstein 给出了几点技术和非技术方面的建议（译者注：原文来自 Google Code，可以认为是 Google 官方的开发指南）。</p> <p align="left"><strong> 让你的网页和</strong><strong>Apps</strong><strong>更适合移动设备访问</strong></p> <p align="left"><strong> 在桌面版应用上提供一个显著的移动版入口</strong></p> <p align="left"> 如果你有一个包含大量图像的网站，当你为它开发了一个移动版本，你是否还希望移动用户继续使用原来的桌面版？确保让用户知道你的网站还有一个移动版本存在。</p> <p align="left"><strong> 移动</strong><strong>URL 要遵循习惯用法</strong><strong>，并推广之</strong></p> <p align="left"> 虽然没有规定你必须把原来桌面服务的移动版的地址设置成什么样，但是这里有些地址设计的惯例可以参 考：m.yoursite.com，mobile.yoursite.com 或是 yoursite.com/mobile。选择一个简单的移动 URL，并且将它贴在原来的桌面网站上。</p> <p align="left"><strong> 设计一个与移动设备相适应的用户界面</strong></p> <p align="left"> 尽量避免让用户输入过多的信息。提供更多的点击功能。将 URL 设计得尽量短一点，方便用户输入。选取合适的 UI 组件和功能，使得你的应用在小屏幕上能够方便地显示和操作。多考虑一下用户的访问情景——或许不是舒服地坐在椅子上，所以尽量让用户能够快速找到想要的信 息。确保你的信息足够的清晰简洁。<a><img style="display:block;margin-left:auto;margin-right:auto;" title="Google 网站管理员：提升移动 Web 性能的 4 个建议" alt="Google网站管理员：提升移动Web性能的4个建议" src="https://simg.open-open.com/show/ebd727d35f5d324425b0ce212eae37c1.jpg" width="345" height="321" /></a></p> <p align="left"><em> Gmail</em><em>提供了一个移动版本，更加符合移动设备的访问方式</em></p> <p align="left"><strong> 让你的网站适合各种移动浏览器的访问</strong></p> <p align="left"> 目前存在着全功能（Mobile Safari, Android 等），半功能（BlackBerry），以及低功能（旧款的翻盖手机）浏览器。想想如何让你的移动 web 页面既能在 150×128像素的屏幕上显示，又能在 640×480像素的屏幕上显示。不同国家的移动浏览器标准也有所不同。如果你的用户来自不同的国家，确保你的设计能够符合这些国家的设备标准。</p> <p align="left"><strong> 减少请求和数据的传输</strong></p> <p align="left"> 为了减少延迟现象的发生，你的网站或应用程序应该尽量避免向服务器发送请求。在 TCP 和 socket 机制中，一次大数据的请求传输比多次小数据的请求传输速度要快。这一点在移动开发中显得尤为重要。</p> <p align="left"> 使用 CSS Sprite 处理你的图片，或者将你的图片转换为 data URI scheme。可以参考 <a href="https://simg.open-open.com/show/50f71ce51a340069836c391f208a20f1.jpg" rel="nofollow" target="_blank">Google Search 搜索结果页面上的 logo 图标</a>，它就用到了 CSS sprite。Google 的一些服务（例如 Wave）通过使用 <a href="/misc/goto?guid=4958202803337823890" rel="nofollow" target="_blank">data URI scheme</a> 将静态的请求固化，用于在 web 页面中内联静态数据。<em>（data URI</em><em>技术无法在旧版本的浏览器上使用，它是专门为</em><em>iPhone</em><em>，</em><em>Android</em><em>和其他最新的移动</em><em>web</em><em>浏览器上的网页和应用程序设计的。）</em></p> <p align="left"><a><img style="display:block;margin-left:auto;margin-right:auto;" title="Google 网站管理员：提升移动 Web 性能的 4 个建议" alt="Google网站管理员：提升移动Web性能的4个建议" src="https://simg.open-open.com/show/2df1622f199145c949de082243a24a44.jpg" width="205" height="104" /></a></p> <p align="left"> 如果你的图片里面包含 base64 的字符串，那么在压缩的时候可能会丢失部分数据（这种格式的图片在传输时必须使用 gzip 压缩）。但即使这样，也尽量不要创建一个新的连接或是发送一个新的 HTTP 请求。</p> <p align="left"> 如果你的应用包含了一个 CSS 文件，那么它还需要导入一些其他的资源；如果包含的是一个 JavaScript 文件，那么也需要下载一下额外的代码，将你的网页需要下载的信息全部放到一个文件中。将你的请求放到一个文件中将提升你的应用的速度。</p> <p align="left"><strong> 简化代码</strong></p> <p align="left"> 代码越少，传输的数据越小，你的网页打开得越快。减少传输的数据量不如减少通讯次数有效，对于高延迟的移动连接，每减少一个 bit 都将有助于提升你的应用加载速度。可以看看一篇<a href="/misc/goto?guid=4958202804177620942" rel="nofollow" target="_blank">关于 HTML optional tags and CSS optimization 的文章</a>。</p> <p align="left"><strong> 避免重定向</strong></p> <p align="left"> 有时 Web 页面和 Web 服务会对某个请求多次重定向。如果你的服务需要对请求重定向，那么尽量在服务器端处理，而不是在客户端，尽可能减少客户端的网络交互次数。</p> <p align="left"><strong> 预先考虑并拉长内容下载流程</strong></p> <p align="left"> 只有在需要的时候才传输数据，可能的话尽可能提前下载数据。不要下载一些用户根本看不到的图片。在移动设备上 Time-to-text 是非常重要的。如果你的设备在显示一组图片，可以考虑一起下载它前后的图片以提升 UI 的速度，但是不要下载一些相隔太远的图片。</p> <p align="left"> 可以看看 <a href="/misc/goto?guid=4958202804913377852" rel="nofollow" target="_blank">Page Speed</a> 中的 <a href="/misc/goto?guid=4958190678398484344" rel="nofollow" target="_blank">Web Performance Best Practices</a> 介绍。</p> <p align="left"><strong> 充分利用 HTML 的新功能</strong></p> <p align="left"><strong> 在移动应用中使用 Appilcation Cache</strong></p> <p align="left"> HTML5浏览器（Mobile Safari, Android）通过使用 <a href="/misc/goto?guid=4958202806343164200" rel="nofollow" target="_blank">Application Cache</a> 能够减少页面启动时间，并且允许用户离线访问。</p> <p align="left"><strong> 如果可能的话，尽量用 CSS3 替代图片</strong></p> <p align="left"> 支持 CSS3 的 HTML5 浏览器能使用各种丰富的属性，如圆角、渐变色、阴影、文本转换、画布等等。使用 CSS 替代图片来装饰你的页面能够减少数据传输的开销。</p> <p align="left"> Google 的移动 Apps 上已经使用了 HTML5 提供的新的 APIs。例如 <a href="/misc/goto?guid=4958202807076901638" rel="nofollow" target="_blank">Mobile Gmail 就用到了 Application Cache</a>。Mobile Google Search 则使用了 <a href="/misc/goto?guid=4958202807827616043" rel="nofollow" target="_blank">HTML5 Geolocation API</a> 来展示搜索到的定位结果。Google Maps for Mobile 以及 Mobile Gmai 都使用了 <a href="/misc/goto?guid=4958202808565193651" rel="nofollow" target="_blank">canvas 标志</a>来避免图片的传输。</p> <p style="text-align:left;" align="left"> <a href="/misc/goto?guid=4958202809300681748" rel="nofollow" target="_blank">查看有关 HTML5 和移动 web App 的 Google Code 博客。</a></p> <p align="left"><strong> 将最低配置设备上运行环境考虑在内</strong></p> <p align="left"> 如果你想让更多的用户访问你的网页或是 app，那么你必须确保你的应用能够在各种设备上兼容。简洁的代码不仅使得你的应用响应更快，通常还会使得应用具有更好的兼容性。</p> <p align="left"> 一些忠告：</p> <ul> <li>即使是 iPhone 或 Android 这样的浏览器现在也不支持 Flash，不要在移动网站中使用 Flash。</li> <li>许多 BlackBerry 手机默认禁用 CSS 和 JavaScript，不要指望用户懂得在菜单中开启这些功能。</li> <li>在性能较差的移动设备上运行 JavaScript 的代价太高。除了优化网络处理，还应该尽量使客户端的代码精炼高效，要尽量减少应用对内存的占用。<strong> </strong></li> </ul> <p align="left"><strong> 测试、测试，再测试</strong></p> <p align="left"> 如果你是一个 web 开发者，那么你应该对跨桌面 web 浏览器开发的痛苦深有体会了。跨浏览器测试对于移动设备开发是非常重要的一项工作。</p> <p align="left"> 为了使得应用适应各种移动设备的屏幕，移动浏览器需要灵活地调整文本、图像以及 CSS 的显示方式。</p> <p align="left"> 在你手掌上访问移动 web 网页或是使用移动 app 的体验与在 PC 机上的体验是非常不同的。不要用你在 PC 上的交互体验代替你在移动设备上的体验测试。</p> <p align="left"> 测试资源：</p> <ul> <li><a href="/misc/goto?guid=4958202810037882739" rel="nofollow" target="_blank">Android Emulator</a></li> <li><a href="/misc/goto?guid=4958202810787308615" rel="nofollow" target="_blank">BlackBerry Device Simulators</a></li> <li><a href="/misc/goto?guid=4958202811520887958" rel="nofollow" target="_blank">iPhone</a></li> <li><a href="/misc/goto?guid=4958202812266586679" rel="nofollow" target="_blank">Opera Mini Simulator</a></li> <li><a href="/misc/goto?guid=4958202813010464385" rel="nofollow" target="_blank">Palm Pre</a></li> <li><a href="/misc/goto?guid=4958202813745883329" rel="nofollow" target="_blank">Windows Mobile</a></li> <li><a href="/misc/goto?guid=4958202814482406683" rel="nofollow" target="_blank">User Agent Switcher extension for Firefox</a>. 更换桌面上的用户代理，检测在更换代理后网页能否继续正常显示。</li> <li><a href="/misc/goto?guid=4958198477816240751" rel="nofollow" target="_blank">Page Speed Firefox/Firebug Addon</a>.评估网页的性能并给出改善建议。</li> </ul> <p align="left"><strong> 其他资料</strong></p> <ul> <li><a href="/misc/goto?guid=4958202815930044997" rel="nofollow" target="_blank">W3C Mobile Web Best Practices</a></li> </ul> <p align="left"> 文章来源：<a href="/misc/goto?guid=4958202816663955249" rel="nofollow" target="_blank">Make the mobile web faster</a><br /> 来自: <a id="link_source2" href="http://blog.jobbole.com/9107/?utm_source=rss&utm_medium=rss&utm_campaign=google%25e7%25bd%2591%25e7%25ab%2599%25e7%25ae%25a1%25e7%2590%2586%25e5%2591%2598%25ef%25bc%259a%25e6%258f%2590%25e5%258d%2587%25e7%25a7%25bb%25e5%258a%25a8web%25e6%2580%25a7%25e8%2583%25bd%25e7%259a%25844%25e4%25b8%25a" target="_blank">blog.jobbole.com</a></p>