初探 Google AMP 项目,助力静态网站加速

Posted by Zhangjd on April 2, 2016

什么是 AMP ?

AMP 全称 Accelerated Mobile Pages Project, 是由 Google 发起一个开源项目, 目的是提升静态网站的加载速度, 目前项目也一直在保持更新中.

AMP HTML is a way to build web pages for static content that render with reliable, fast performance. It is our attempt at fixing what many perceive as painfully slow page load times – especially when reading content on the mobile web.

AMP HTML is entirely built on existing web technologies. It achieves reliable performance by restricting some parts of HTML, CSS and JavaScript. These restrictions are enforced with a validator that ships with AMP HTML. To make up for those limitations AMP HTML defines a set of custom elements for rich content beyond basic HTML.

项目地址: https://github.com/ampproject/amphtml

文档地址: https://www.ampproject.org/docs/get_started/about-amp.html

体验 AMP

amplify 就是一个使用了 Google AMP 的 Jekyll 主题, Medium 风格.

demo 地址: http://ageitgey.github.io/amplify/2016/03/08/example-post.html http://tvvocold.coding.me/amplify/ (这个地址部署在 coding, 国内访问可能快一点)

AMP 的组成部分

  • AMP HTML
  • AMP JS
  • Google AMP Cache (可选)

AMP HTML

AMP HTML 在基础的 HTML 上面扩展了一些自定义的 AMP 属性, 以下是最简单的 demo:

<!doctype html>
<html ⚡>
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Hello World!</body>
</html>

完整的 AMP HTML 规范请参考 HTML Tags in the AMP spec

更详细的入门指引请参考 Create Your AMP HTML Page

AMP JavaScript

可以看到上面的 demo 中, 通过异步加载了一个 js 文件, 其作用主要是管理资源加载, 让所有外部资源都通过异步引入, 使得页面的渲染不受阻塞.

此外还包括其他的性能优化黑科技, 比如对 iframe 的沙箱处理, 在资源加载完成前对页面元素作布局预处理, 禁用慢的 CSS 选择器等.

参见 AMP JS library 源码

Google AMP Cache

Google AMP Cache 是一个基于代理的 CDN (proxy-based content delivery network), 它会抓取 AMP HTML 页面, 缓存并自动提高页面性能. 为了提升性能, Google AMP Cache 还使用了 HTTP 2.0.

AMP 是如何做到性能加速的?

  • 只允许异步加载 js, 不允许包含用户自己的 js
  • 所有静态资源必须指定大小(比如图片/ iframe 的宽高)
  • 扩展插件(比如lightboxes, instagram embeds)不能阻塞加载
  • 第三方库的 js 加载只允许在 iframe 沙箱中进行
  • 所有 CSS 必须使用内联样式
  • 字体加载的有效触发
  • 尽量避免样式的重新计算
  • 只允许使用 GPU 加速的动画
  • 优化资源加载次序
  • 使用 preconnect API
  • 项目是开源的, 欢迎开发者共同优化

参见 How AMP Speeds Up Performance 获取详细信息.

验证 AMP 页面

AMP 提供了验证机制, 让开发者检查代码是否符合 AMP 规范, 步骤很简单:

  1. 在浏览器打开页面
  2. 在 URL 后面添加 #development=1, 比如: http://localhost:8000/released.amp.html#development=1
  3. 打开 console, 获取验证报告

总结

AMP 的一些特点与限制:

  • 针对静态内容
  • 移动端体验优先
  • 面向性能
  • 基于原始的 HTML 作封装, 快速上手
  • 需要遵循比较繁琐的代码规范指引
  • CSS/JS 部分功能受限
  • 引入的第三方资源受限

谷歌现在已经在搜索产品上使用 AMP HTML。想要了解关于 AMP 的更新资讯, 可以关注 AMP 官方博客


本文采用知识共享署名-非商业性使用 3.0 中国大陆许可协议,可自由转载、引用,但需署名作者并注明文章出处且不能用于商业用途。