【译】Optimize for mobile-移动端优化

移动端优化

由于移动设备有限的CPU处理能力，移动网络的高往返时间，以及移动应用的快速增长，对移动端的理解以及优化相对于PC端来讲变得更加重要。Page Speed Insights 现在可以让你轻松地分析和优化您的移动端网站的性能。下面讲的很多移动端的最佳优化方案也同样适用于PC端，所以这些建议也包含在PC端浏览器的网页速度分析报告中。

推迟JavaScript的解析

使登录页（着陆页，landing page）重定向可缓存

推迟JavaScript的解析

---

概览

为了加载一个页面，浏览器必须解析所有 <SCRIPT>标签的内容，这额外的增加了页面的加载时间。最小化页面加载所需的JavaScript，推迟解析JavaScript直到需要执行的时候，通过这种方式你可以有效降低页面初始加载时间。

详细介绍

有几种方式可以用来推迟JavaScript的解析。最简单同时又是最优的方式是简单地延迟JavaScript的加载，直到需要的时候。第二种方法是在适当的时候使用<script async>属性，将它推迟到UI线程比较空闲的时候加载，以此来阻止对页面加载造成的阻塞。如果这些技术都不合适，在移动应用中，下面还有一些额外的常用技巧：

当构建移动应用程序时，预先加载所有需要使用的JavaScript非常重要，这样就算用户处于脱机状态仍然能够继续使用。在这种情况下，一些应用，如移动Gmail，发现在注释（comments）中加载Javascript并且直到需要使用时才eval（）这种方式非常有用。这种方法保证了所有的JavaScript在初始页面时加载，但是不要求去解析这些JavaScript。

在注释（comments）中存储代码的一种替代方式是在JavaScript字符串常量中存储代码。当使用这种技术时，Javascript只有在需要的时候通过再次调用eval（）对JavaScript字符串常量进行解析。这种方式同样可以让应用程序预先加载Javascript，但推迟解析，知道需要使用的时候。

请注意，将<SCRIPT>标签移到页面的尾部是次优的，因为浏览器在将Javascript解析完之前将一直呈现一个繁忙的状态。用户可能会等到页面加载状态显示完全加载完毕才会进行页面操作，所有，最大限度地减少浏览器中显示的页面加载完成的时间是很重要的。

在2011年初进行的测试中，我们发现，在现代移动设备，JavaScript每增加1千字节，页面总的加载时间将会多出1ms的js解析时间。因此，页面初始化加载时100KB的Javascript对用户来讲会增加100ms的加载时间。因为每次访问页面时JavaScript都将被解析，这些时间将会成为每个页面加载时间的一部分，不管是从网络加载，还是通过浏览器的缓存，又或者是使用HTML5的离线模式。

使登陆页（着陆页，landing page）重定向可缓存

---

概览

很多页面，尤其是移动页面，会将用户重定向到一个不同的URL，例如从www.example.com 到m.example.com。通过让用户的浏览器对此重定向进行缓存可以在用户重复访问该网站时加快页面加载时间。

详细介绍

如果可能的话解决重定向最好的方式是删除重定向，但有些情况下确实很难取消登录页重定向，尤其是重定向到移动端网站。举例来说，一个网站的移动版本部署在不同的Web服务器上，这就要求访问时重定向到一个不同的域名。在这种情况下，使重定向到移动特定的网站的请求可缓存，以减少用户重复访问页面加载的时间就非常重要。如果您的网站的移动版本与PC站点是使用的同样的web服务器，你就不应该使用重定向到移动版本的方式而是应该使用与PC站点同样的URL。

建议

移动专用站点的重定向必须是私有高速缓存，以防止代理服务器将移动站点重定向给非移动用户。我们建议您使用302重定向，并存缓存一天。重定向应包括一个Vary：User-Agent 头以及一个Cache-Control：private头。这些头防止代理服务器将移动专用站点重定向给非移动用户。您可能还需要包括一个Expires头，以防止旧的HTTP/1.0代理缓存这些重定向然后发给非移动用户。

查看英文原版