网页加速特技之【美高梅娱乐场网站】 AMP

发布时间:2019-03-13  栏目:计算机教程  评论:0 Comments

AMP,来自 Google 的移动页面优化方案

2015/10/12 · HTML5 ·
AMP

原文出处:
imququ(@屈光宇)   

Web 性能优化(Web Performance
Optimization,WPO)是一个老生常谈的话题,我也写过很多关于「性能优化」的文章。最近
Google 某个团队推出了一项名为 Accelerated Mobile
Pages(AMP)的技术,号称能大大加快移动端页面呈现速度,提高整体体验。本文就带大家认识一下这项新技术。

 

AMP 介绍

Accelerated Mobile
Pages(官网GitHub),直译成中文是「加速的移动页面」的意思。根据官方说明,AMP
在 Speed
Index
(首屏展现时间平均值)测试中,性能有
15% ~ 85% 的提升,测试是在模拟 3G 网络环境并模拟 Nexus 5
的条件下完成(详情)。

AMP
如何让页面性能大幅提升暂且搁置一边,先来看看它是什么。根据官网文档得知,AMP
主要由 AMP HTML、AMP Runtime 以及 AMP Components 三部分组成。

据统计,40%的人会放弃使用加载时间超过3秒的网站。对于加载慢的页面我也是没耐心等待的,同类型网站那么多,为什么不选择加载速度更快体验更好的呢。为了解决网页加载慢的问题,Google联合数十家技术机构和企业等推出了移动网页加速项目(Accelerated
Mobile Pages, AMP)。

AMP HTML

AMP HTML 是 HTML 的子集,在 AMP HTML
中只允许使用有限的标签。例如 <body><article> 这些标签可以直接使用,没有任何限制;有些标签允许有限制的使用,例如 <meta> 标签不能使用 http-equiv 属性;而像 <img><audio> 这样的标签需要替换为 <amp-img><amp-audio> 等
AMP Components;更多的标签如 <frame><form> 不允许使用。

完整说明可以查看官网的 AMP HTML
格式文档
。以下是该文档中的
AMP HTML 示例:

XHTML

<html> <head> <meta charset=”utf-8″>
<title>Sample document</title> <link rel=”canonical”
href=”./regular-html-version.html”> <meta name=”viewport”
content=”width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui”>
<style amp-custom> h1 {color: red} </style> <script
type=”application/ld+json”> { “@context”: “http://schema.org“,
“@type”: “NewsArticle”, “headline”: “Article headline”, “image”: [
“thumbnail1.jpg” ], “datePublished”: “2015-02-05T08:00:00+08:00″ }
</script> <script async custom-element=”amp-carousel”
src=”https://cdn.ampproject.org/v0/amp-carousel-0.1.js"&gt;&lt;/script&gt;
<style>body {opacity:
0}</style><noscript><style>body {opacity:
1}</style></noscript> <script async
src=”https://cdn.ampproject.org/v0.js"&gt;&lt;/script&gt; </head>
<body> <h1>Sample document</h1> <p> Some text
<amp-img src=sample.jpg width=300 height=300></amp-img>
</p> <amp-ad width=300 height=250 type=”a9″
data-aax_size=”300×250″ data-aax_pubname=”test123″
data-aax_src=”302″> </amp-ad> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<html>
<head>
  <meta charset="utf-8">
  <title>Sample document</title>
  <link rel="canonical" href="./regular-html-version.html">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
  <style amp-custom>
    h1 {color: red}
  </style>
  <script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "NewsArticle",
    "headline": "Article headline",
    "image": [
      "thumbnail1.jpg"
    ],
    "datePublished": "2015-02-05T08:00:00+08:00"
  }
  </script>
  <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
  <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Sample document</h1>
<p>
  Some text
  <amp-img src=sample.jpg width=300 height=300></amp-img>
</p>
<amp-ad width=300 height=250
    type="a9"
    data-aax_size="300×250"
    data-aax_pubname="test123"
    data-aax_src="302">
</amp-ad>
</body>
</html>

可以看出,AMP HTML 与普通 HTML
并没有什么太大区别,上面这段代码可以直接存为 .html 文件,并在浏览器中正常运行。下面简单列举一些格式上的要求:

  • DTD 必须是: <!doctype html>
  • 顶层标签必须包含 AMP
    属性,如:<html ⚡> 或 <html amp>(让其他程序能方便地识别出这是
    AMP HTML);
  • 必须在 HEAD
    区域中放置 <link rel="canonical" href="$SOME_URL" /> 标签,用来指定该文档普通版本的
    URL;如果只有一个版本,使用当前 URL
    即可(告诉搜索引擎,这是同一个页面不同的版本,否则可能会被判作弊);
  • 必须将 <meta charset="utf-8"> 放置在 HEAD
    区域最开始的位置(实际上,普通 HTML 也应该这么做);
  • 必须在 HEAD 区域包含这个
    ViewPort:<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
  • 必须将 <script async src="https://cdn.ampproject.org/v0.js"></script> 作为
    HEAD 区域最后的元素;
  • 必须在 HEAD
    区域包含以下代码:<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>

据AMP官网统计目前已有很多新闻类网站和科技类网站开始使用AMP,包括Wordpress、YouTube、Twitter、LinkedIn、BBC等。

AMP Runtime

在上面的 AMP HTML 代码中,HEAD 区域最后外链引入的 JS 就是 AMP
Runtime。AMP Runtime 提供对自定义元素(Custom
Elements)的支持,负责协调资源的加载时机和优先级,以及提供验证器等调试功能。

访问 AMP HTML 时,在 URL
最后追加 #development=1 会开启开发者模式。这时 AMP Runtime
会自动加载验证器,并在控制台显示本页不符合 AMP 规范的位置信息。

不明觉厉,接下来让我们一起来揭开AMP神秘的面纱吧。

AMP Components

AMP Components 是使用浏览器自定义元素(Custom
Elements)实现的组件,用来替换 HTML
中默认的 <img> 和 <video> 等标签,用来实现对资源的自定义加载策略;它也用于实现一些复杂的交互效果,如图片轮播。AMP
Components 分为两类:

1)内置组件,包括:amp-img、amp-audio、amp-anim、amp-ad、amp-pixel、amp-video,在
AMP HTML 引入了 AMP Runtime 之后,这些内置组件就可以直接使用。

2)扩展组件,包括:amp-carousel、amp-lightbox、amp-iframe、amp-instagram、amp-twitter、amp-youtube。要使用扩展组件,需要在
AMP HTML 中引入该组件对应的文件。例如要使用 amp-carousel
就必须引入以下文件(必须要有 async 和 custom-element 属性):

JavaScript

<script async custom-element=”amp-carousel”
src=”https://cdn.ampproject.org/v0/amp-carousel-0.1.js"&gt;&lt;/script&gt;

1
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

这里有一个按照 AMP HTML
规范编写的页面,大家可以直接用浏览器打开查看:AMP
示例
(注:为了保证国内打开速度,我把
AMP JS 托管在了本地,实际上这么做并不符合规范)。

一、什么是AMP?

Accelerated Mobile Pages
(AMP)直译过来就是在移动设备上快速加载的网页。它是由 Google
发起的一个开源项目,主要目的是缩短静态内容的渲染时间从而有效提升网站的加载速度。

那么问题来了,AMP的加载速度到底有多快?

根据 Google 官方说明,AMP 在模拟 Nexus 5 并模拟 3G
网络的测试情况下,首屏展现速度有 15% ~ 85% 的提升。

美高梅娱乐场网站 1

这么NB,让我们来看看AMP到底什么鬼。。。

AMP主要由三个部分组成:

AMP 剖析

1.AMP HTML

\1).AMP HTML 规范*

AMP HTML 在 HTML 的基础上加了一些使用限制,并且添加了AMP自定义的组件。

AMP 禁用部分 HTML 标签如<frame><form><input> 等。

部分 HTML 标签必须使用 AMP
自定义的组件来替换如 <img> 、 <video> 用 <amp-img> 、 <amp-video>替换。

AMP在HTML基础上也提供一些扩展组件,如 <amp-carousel> 、 <amp-iframe><amp-youtube>等,但是使用扩展组件时必须引入相应的JS文件。

一个简单的 AMP HTML 示例:

美高梅娱乐场网站 2

将上面的代码保存为 .html
文件,在浏览器中就可以正常运行,从这个示例可以看出,AMP HTML
的写法和HTML差不多,但是又有自己的规范要求:

  • DTD 必须是: <!doctype html>;

  • 顶层标签必须包含 AMP 属性如: <html amp>,方便其他程序识别 AMP
    HTML;

  • 必须在 HEAD
    区域中放置 <link rel="canonical" href="$SOME_URL" /> 标签,指定该页面普通版本的
    URL;如果只有一个版本,则使用当前 URL;

  • 必须将<meta charset="utf-8"> 放置在 HEAD 区域最开始的位置;

  • 必须在 HEAD 区域包含这个 ViewPort:
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">

  • 必须将 <script async src="https://cdn.ampproject.org/v0.js"></script> 作为 HEAD区域最后的元素;

  • 必须在 HEAD
    区域包含上面示例所示的<style amp-boilerplate> 和 <noscript>的相关代码;

更多 AMP HTML 相关说明,可移步 AMP HTML官方文档

定位:解决单一问题

经过前面对 AMP 的介绍,你一定会感到奇怪,为什么 AMP HTML
有那么多限制和约束,这样阉割后的 HTML 还有什么适用场景。实际上,AMP
只关注于一件事 —— 提高静态页面的性能。

这个「静态」并不是指没有服务端参与的页面,而是指没有复杂交互、以内容展现为主的资源页,典型例子就是新闻详情页。现在的网站类型很多,游戏类、视频类、电商类等等,每一类网站都有着自己的特点,优化策略也各不相同,用一种方案去解决所有问题不切实际。所以
AMP 项目将关注点放在了更容易优化且效果最明显的内容型页面。

2)AMP HTML 组件

自定义组件

AMP HTML 自定义5个组件:
amp-ad、amp-embed、amp-img、amp-pixel、amp-video

组件直接以标签的形式进行使用,如页面中需要加载video、img
使用相应的组件即可,如下:

美高梅娱乐场网站 3

美高梅娱乐场网站 4

amp-video amp-img
组件实际是使用HTML原生<video> <img> 标签来实现,所以在页面上的展示效果和原生HTML一致。

美高梅娱乐场网站 5

amp-ad、amp-embed 组件主要用于引入广告类信息,使用iframe的方式来实现。

扩展组件

AMP HTML的一个重要特性就是可扩展性,它提供扩展组件来实现丰富的功能。

官网目前提供的扩展有youtube视频组件、twitter组件、轮播、滚动、instagramd等等。

使用扩展组件需要在页面头部引入依赖的JS文件,如使用twitter组件:

美高梅娱乐场网站 6

twitter组件的显示效果如图:

美高梅娱乐场网站 7

扩展组件使用iframe来实现,定义扩展组件必须严格遵循AMP的3p contribution
guidelines(为了保证性能,定义扩展组件的要求非常多)。

选型:纯 web 技术方案

Web
优化有很多种方案,每种方案都有自己的适用范围。有些收益很高的优化手段,存在这样那样的限制:例如针对具体业务逻辑所做的优化,很难通用化;部署
Google
的 PageSpeed 模块等服务端优化方案,使用成本很高;借助客户端所做的优化,如现在广为流行的移动端
WebView 容器加速方案,优化效果局限在指定 APP
内,甚至还会导致使用通用浏览器访问速度更慢(这个话题很有意思,有机会以后再讨论)。

以内容为主的新闻详情页,大部分性能消耗在图片、视频等媒体资源以及第三方功能如广告、社会化组件的加载上。将这些内容替换为
AMP Components,避免资源默认被加载,再用 AMP Runtime
统一协调和管理,确实是一个通用化、低使用成本且能让所有浏览器受益的折中方案。而且,AMP
方案不依赖任何特定的服务端或客户端,可以将页面直接托管在
CDN,进一步提高用户访问速度。

2.AMP JS

AMP JS 是 AMP 技术的核心。

美高梅娱乐场网站 8

AMP JS
负责协调资源的加载时机和优先级,让外部资源按不同顺序加载使得页面的主要内容优先加载;AMP
JS
的resources模块根据元素优先级(amp-img的优先级高于amp-ad的优先级)、操作优先级、可视优先级给资源评分,根据评分调整资源加载优先级。

它还负责页面的性能优化,例如在资源加载完成前对页面元素布局预处理,禁用慢的CSS选择器,对
iframe 进行沙盒处理,提供对自定义元素的支持。

AMP JS 也负责提供验证器等调试功能,在URL最后加 #development=1
就会开启调试模式,AMP会自动加载验证器,并在控制台显示本页不符合AMP规范的报错信息。

实现:资源调度与控制

浏览器对不同资源加载和预加载有自己的策略,对于预加载,我们有一些控制权,但总的看来这一块对于开发者来说还是很不可控。例如浏览器默认会并行加载多张图片,但在屏幕小、网速慢、性能差的手机上,串行由上到下加载图片很可能体验更好。

移动设备在网络、CPU、内存等方面与 PC 差距很大,很多 PC
上可以忽略的问题,在移动端不得不重视起来。例如我们都知道图片是异步加载的,页面触发
DOMContentLoaded
事件并不需要等图片加载完,但在移动端,大量图片加载带来性能开销却会大幅延后
DOMContentLoaded
时机。以下是我们在某个移动产品中,将图片进行延迟加载处理后的
DOMContentLoaded
时间对比统计,可以看到明显的变化:美高梅娱乐场网站 9

将图片、视频等标签和第三方功能换成 AMP Components 后,AMP Runtime
可以自动处理延迟加载、按需加载等逻辑,确保页面首屏性能。为了避免延迟加载的资源引发页面抖动,开发者必须给每个
AMP Components 都设置高宽属性,每个 Components 都支持多种 layout
布局,在 responsive 布局下,组件会根据初始高宽比例自动调整大小。

另外,一些资源非常消耗性能,例如 gif 和 video,AMP Runtime
可以在它们处于不可见时销毁元素,释放资源。总之,使用了 AMP
方案,相当于将页面资源托管给了 AMP Runtime
管理,一次修改就可以坐享后续所有策略升级带来的性能提升。

3.Google AMP Cache

Google AMP
Cache是一个基于代理机制的内容分发网络(CDN),它会分发所有合格的AMP文件,它会抓取AMP页面并进行缓存,自动提升页面的性能。使用Google
AMP
Cache,页面、JS文件、图片等都是从同一个源获取,并且使用HTTP2.0来优化性能。

这个缓存机制还带有的验证系统,以确保网页不受外部资源的限制,能随时随地正常运行。它能自动验证网页是否符合AMP
HTML的规范。

观点:很有借鉴意义

本文到这里,差不多快要结束了。经过上面的介绍,大家对 AMP
项目应该有了一定的认识。最后谈谈我的看法:

AMP 项目对书写代码设置了大量限制,例如所有资源只能托管给 AMP Runtime
加载;不允许使用 AMP Runtime、AMP Components 之外的 JS;不允许使用
inline JS;只能使用有限的 inline CSS 样式;JS 和 Web Font 必须使用指定的
CDN
等等,这都是为后面的优化策略做准备。整体原理并不复杂,难点是配套设施的建立,以及如何说服网站主改造代码。不过,Google
后续很可能对使用了 AMP 的页面提权,这样一来大家就有动力了。

符合 AMP 规范的页面不会比由 WPO
专家优化后的页面更快,它是一个通用化的技术,肯定包含很多业务用不上的代码逻辑,也有很多优化手段它无法提供。但对于不知道如何
WPO 的网站来说,使用 AMP 则是一个非常不错的选择。

不过,我认为 AMP 很难直接用在国内项目中。首先,前面说过,AMP
Runtime、Components 必须从 cdn.ampproject.org 加载;Web Font
必须从 fonts.googleapis.com 加载。这样做的出发点是为了更可控,以及更好的在各网站之间共享缓存,但是这些域名在国内很难访问甚至直接被墙。其次,从目前
AMP 目前已有的扩展组件来看,instagram、twitter、youtube
这类国外媒体常用的服务在国内都无法使用,内置的 ad 组件也不符合国情。

但是,AMP 项目对我们进行移动 Web
优化仍然很有借鉴意义。实际上,控制资源加载、处理响应式元素避免页面抖动、主动释放资源等策略,我们在项目中都有自己的尝试与经验,但我们的方案要么过分依赖服务端,要么没有抽象成通用模式,导致无法推广到更多产品,这些都是后续可以努力的方向,而
AMP 规范和代码实现,将会是最好的参考资料。

1 赞 3 收藏
评论

美高梅娱乐场网站 10

二、AMP HTML 和 HTML 比较

简单了解了 AMP 的相关规范,我们来验证下 AMP 是不是如传说中那么NB。。。

分别用 AMP HTML 和 HTML
写了两个一样的页面,页面中有33个HTTP请求,包含一个video、28张图片等资源。不多说,直接上图:

3G(1Mbps 40ms RTT)网络状态下,HTML页面:

美高梅娱乐场网站 11

3G(1Mbps 40ms RTT)网络状态下,AMP页面:

美高梅娱乐场网站 12

从上图对比可看出,3G网络下,AMP页面的onload时间比HTML页面快50%以上,当然这是在HTML页面图片没做lazy-load优化的情况下。

3G(1Mbps 40ms RTT)网络状态下,HTML页面:

3G(1Mbps 40ms RTT)网络状态下,AMP页面:

从上面两图对比可看出,3G网络下AMP页面的渲染时间明显快于HTML页面。

AMP页面优化资源加载,自动对资源做延迟加载,首屏完整展现的速度明显快于HTML页面。

上面的测试页面是静态内容页面,不涉及到服务器数据拉取和复杂的页面交互,所以有一定的局限性。要深入了解AMP页面和HTML的差异,还需要更多的测试。

三、AMP如何提升性能?

在静态内容页面测试数据中,AMP页面的加载速度确实更快,那么AMP提升页面加载速度的秘诀是什么捏,我们一起来看看。

1.只允许异步加载script

HTML 解析器遇到 script 标签,它会暂停构建 DOM,并移交控制权给 JavaScript
引擎;等 JavaScript 引擎执行完毕,浏览器从中断的地方恢复 DOM
构建。执行内联脚本会阻塞 DOM
构建,也就延缓了首次渲染。为了减少JS对页面渲染的延迟,AMP不允许直接使用内联脚本,只允许异步加载JS。

AMP页面不允许直接包含任何内联JS,页面交互可在AMP组件中处理,AMP组件是经过精心设计的保证不会影响页面性能。第三方JS只允许在
iframe 中使用,这样就不会阻塞主页面的渲染。

留下评论

网站地图xml地图