Google网站管理员：提升移动Web性…_移动管理员网页-CSDN博客

本文链接：https://blog.csdn.net/bensantan/article/details/40354493

http://news.cnblogs.com/n/124027/

移动互联网已经在全球得到了广泛的应用。到 2009 年，有 50%的新增的互联网访问都是来自手机设备的（eMarket，2008和 2009）。来自 Google 的内部资料显示，随着移动浏览器的提升，用户的浏览习惯也在逐步改进。

　　移动浏览器上的页面布局与桌面浏览器有着显著的差异，所以，想要在移动设备上开发出优秀的浏览器，有些注意事项是需要开发者事先了解的。对于如何在移动设备上开发出高性能、体验良好的 web 应用，Google 网络管理员 Jeremy Weinstein 给出了几点技术和非技术方面的建议（译者注：原文来自 Google Code，可以认为是 Google 官方的开发指南）。

　　让你的网页和Apps更适合移动设备访问

　　在桌面版应用上提供一个显著的移动版入口

　　如果你有一个包含大量图像的网站，当你为它开发了一个移动版本，你是否还希望移动用户继续使用原来的桌面版？确保让用户知道你的网站还有一个移动版本存在。

　　移动URL 要遵循习惯用法，并推广之

　　虽然没有规定你必须把原来桌面服务的移动版的地址设置成什么样，但是这里有些地址设计的惯例可以参考：m.yoursite.com，mobile.yoursite.com 或是 yoursite.com/mobile。选择一个简单的移动 URL，并且将它贴在原来的桌面网站上。

　　设计一个与移动设备相适应的用户界面

　　尽量避免让用户输入过多的信息。提供更多的点击功能。将 URL 设计得尽量短一点，方便用户输入。选取合适的 UI 组件和功能，使得你的应用在小屏幕上能够方便地显示和操作。多考虑一下用户的访问情景——或许不是舒服地坐在椅子上，所以尽量让用户能够快速找到想要的信息。确保你的信息足够的清晰简洁。 Google 网站管理员：提升移动 Web 性能的 4 个建议

　　Gmail提供了一个移动版本，更加符合移动设备的访问方式

　　让你的网站适合各种移动浏览器的访问

　　目前存在着全功能（Mobile Safari, Android 等），半功能（BlackBerry），以及低功能（旧款的翻盖手机）浏览器。想想如何让你的移动 web 页面既能在 150×128像素的屏幕上显示，又能在 640×480像素的屏幕上显示。不同国家的移动浏览器标准也有所不同。如果你的用户来自不同的国家，确保你的设计能够符合这些国家的设备标准。

　　减少请求和数据的传输

　　为了减少延迟现象的发生，你的网站或应用程序应该尽量避免向服务器发送请求。在 TCP 和 socket 机制中，一次大数据的请求传输比多次小数据的请求传输速度要快。这一点在移动开发中显得尤为重要。

　　使用 CSS Sprite 处理你的图片，或者将你的图片转换为 data URI scheme。可以参考Google Search 搜索结果页面上的 logo 图标，它就用到了 CSS sprite。Google 的一些服务（例如 Wave）通过使用 data URI scheme 将静态的请求固化，用于在 web 页面中内联静态数据。（data URI技术无法在旧版本的浏览器上使用，它是专门为iPhone，Android和其他最新的移动web浏览器上的网页和应用程序设计的。）

Google 网站管理员：提升移动 Web 性能的 4 个建议

　　如果你的图片里面包含 base64 的字符串，那么在压缩的时候可能会丢失部分数据（这种格式的图片在传输时必须使用 gzip 压缩）。但即使这样，也尽量不要创建一个新的连接或是发送一个新的 HTTP 请求。

　　如果你的应用包含了一个 CSS 文件，那么它还需要导入一些其他的资源；如果包含的是一个 JavaScript 文件，那么也需要下载一下额外的代码，将你的网页需要下载的信息全部放到一个文件中。将你的请求放到一个文件中将提升你的应用的速度。

　　简化代码

　　代码越少，传输的数据越小，你的网页打开得越快。减少传输的数据量不如减少通讯次数有效，对于高延迟的移动连接，每减少一个 bit 都将有助于提升你的应用加载速度。可以看看一篇关于 HTML optional tags and CSS optimization 的文章。

　　避免重定向

　　有时 Web 页面和 Web 服务会对某个请求多次重定向。如果你的服务需要对请求重定向，那么尽量在服务器端处理，而不是在客户端，尽可能减少客户端的网络交互次数。

　　预先考虑并拉长内容下载流程

　　只有在需要的时候才传输数据，可能的话尽可能提前下载数据。不要下载一些用户根本看不到的图片。在移动设备上 Time-to-text 是非常重要的。如果你的设备在显示一组图片，可以考虑一起下载它前后的图片以提升 UI 的速度，但是不要下载一些相隔太远的图片。

　　可以看看 Page Speed 中的 Web Performance Best Practices 介绍。

　　充分利用 HTML 的新功能

　　在移动应用中使用 Appilcation Cache

　　HTML5浏览器（Mobile Safari, Android）通过使用 Application Cache 能够减少页面启动时间，并且允许用户离线访问。

　　如果可能的话，尽量用 CSS3 替代图片

　　支持 CSS3 的 HTML5 浏览器能使用各种丰富的属性，如圆角、渐变色、阴影、文本转换、画布等等。使用 CSS 替代图片来装饰你的页面能够减少数据传输的开销。

　　Google 的移动 Apps 上已经使用了 HTML5 提供的新的 APIs。例如 Mobile Gmail 就用到了 Application Cache。Mobile Google Search 则使用了 HTML5 Geolocation API 来展示搜索到的定位结果。Google Maps for Mobile 以及 Mobile Gmai 都使用了 canvas 标志来避免图片的传输。

查看有关 HTML5 和移动 web App 的 Google Code 博客。

　　将最低配置设备上运行环境考虑在内

　　如果你想让更多的用户访问你的网页或是 app，那么你必须确保你的应用能够在各种设备上兼容。简洁的代码不仅使得你的应用响应更快，通常还会使得应用具有更好的兼容性。

　　一些忠告：