黃昏中的諸神總會推出很多有趣的技術(shù)，谷歌推出的AMP(Accelerated Mobile Pages)算的上是一個。

這是一種用于提升移動網(wǎng)頁裝載速度的技術(shù)，官方數(shù)據(jù)是提升4倍速度，1/10或更少的數(shù)據(jù)。

技術(shù)的本質(zhì)是嚴(yán)格控制網(wǎng)頁裝載內(nèi)容大小和順序，達(dá)到明顯提升用戶體驗(yàn)的技術(shù)。通過“奴役”網(wǎng)頁的內(nèi)容，達(dá)到高性能上的“自由”，就是喬治.奧威爾《1984》中提到的“戰(zhàn)爭即和平，自由即奴役，無知即力量”。這種奴役就是你必須使用谷歌的AMP格式制作網(wǎng)站。

一方面，在移動時代，谷歌通過搜索分發(fā)Web內(nèi)容的方式已經(jīng)持續(xù)勢微，即使引入各種Deep Link，App Index或者M(jìn)obile Optimized等有理想的新技術(shù)，也難以阻擋移動的頹勢。另外一方面，社交網(wǎng)絡(luò)和垂直內(nèi)容聚合正在抓住人性的弱點(diǎn)，一波又一波的推薦泛娛樂化內(nèi)容和獵奇的朋友圈更新，無聊的人類已經(jīng)無需主動獲取信息，而淪陷為智能推薦的“俘虜”，這也是另外一種形式的“自由即奴役”。

既然渠道受限，那么谷歌如何繼續(xù)rule整個移動Web世界?抓住體驗(yàn)痛點(diǎn)，行業(yè)合縱連橫，免費(fèi)提供服務(wù)成為AMP(Accelerated Mobile Pages)的谷歌打的三張牌。

用戶體驗(yàn)痛點(diǎn)：新聞內(nèi)容的網(wǎng)頁裝載慢，訪問性能差，用戶跳離率高

行業(yè)合縱連橫：谷歌全線產(chǎn)品支持AMP，鼓勵生態(tài)支持(廣告，數(shù)據(jù)分析等)

免費(fèi)開源服務(wù)：項(xiàng)目開源，免費(fèi)提供全球CDN加速服務(wù)*

(*其實(shí)谷歌免費(fèi)開放CDN服務(wù)，可直接提升網(wǎng)站性能，何必需要AMP :) )

AMP需要改造大力改造網(wǎng)頁內(nèi)容，使用一種全新的AMP-HTML格式，對于網(wǎng)站開發(fā)者來說，這是一種傷筋動骨的改造。要知道，標(biāo)準(zhǔn)HTML格式曾經(jīng)無數(shù)次被仰攻，尚無一人生還，例如Adobe Flash, XHTML,XML都紅火一時后銷聲匿跡了。所以說，AMP的推出，我不知道是一種無知，還是一種力量，或許是一種理想，可謂“無知即力量"。

谷歌AMP是如何實(shí)現(xiàn)“4X更快的速度，1/10或更少的數(shù)據(jù)”? 我總結(jié)了一下是三個部分，十個技術(shù)。

AMP包括三個部分：

• AMP HTML： 定義了一套HTML標(biāo)簽，如amp-img, amp-video。使用這些tag可以確保加載的順滑。同時amp也負(fù)責(zé)管理資源何時加載，避免不必要的流量。

• AMP JS： 實(shí)現(xiàn)了所有的AMP性能優(yōu)化實(shí)踐。其中***的優(yōu)化就是保證外部所有資源都是異步裝載，另外還包括Sandbox處理iFrame的模塊，資源裝載的同時預(yù)先計(jì)算出每一個元素的位置和大小;禁用慢的CSS樣式;

• Google AMP Cache： 為了推動AMP，谷歌提供免費(fèi)的全球CDN服務(wù)，可以緩存圖片，靜態(tài)文件等，使用HTTP2.0協(xié)議保證緩存的高效率。免費(fèi)的代價就是必須使用AMP格式。

AMP十個優(yōu)化技術(shù)(不限于)：

1. 只允許異步的Script裝載
2. 靜態(tài)計(jì)算資源的布局大小
3. 不允許擴(kuò)展機(jī)制阻止頁面生成
4. 關(guān)鍵路徑中不允許第三方腳本
5. CSS通過直接嵌入，并且有大小限制
6. 字體下載優(yōu)化
7. 最小化樣式重新計(jì)算
8. 只運(yùn)行GPU加速的動畫
9. 資源裝載的優(yōu)先級管理
10. 預(yù)裝載于急速顯示

AMP的設(shè)計(jì)理念：

1. 越快越好(Faster is better)
2. 美麗也非常重要('Beautiful' matters)
3. 安全是必須的(Security is a must)
4. 合作成長(We're better together)

這里是一個AMP的代碼例子：

幾個小注釋：

Canonical定義了經(jīng)典地址，如客戶端不支持AMP，跳回傳統(tǒng)鏈接。

AMP定義了很多amp-開頭的Tag，限制了很多動態(tài)效果

AmpProject.org/v0.js包含了很多優(yōu)化技術(shù)，透明使用即可獲得加速

AMP技術(shù)目前主要用于內(nèi)容發(fā)行商出版內(nèi)容，例如新聞網(wǎng)站，報社等。他們通過改造CMS系統(tǒng)，生成AMP-HTML格式網(wǎng)頁，以提升網(wǎng)頁裝載性能，免費(fèi)使用Google的全球CDN服務(wù)。同時，為了支持傳統(tǒng)的頁面，他們也需要生成傳統(tǒng)的頁面鏈接(HTML)。

AMP的一些標(biāo)簽可以也許可以足夠表達(dá)靜態(tài)內(nèi)容，但是作為一個移動生態(tài)，這是遠(yuǎn)遠(yuǎn)不夠的，任何一個生態(tài)就是流量和變現(xiàn)的相輔相成。變現(xiàn)需要廣告SDK支持，流量需要精細(xì)化運(yùn)營提升，需要統(tǒng)計(jì)分析工具。因此,AMP需要成長必須完善下面兩個方面：

1.廣告

2.數(shù)據(jù)統(tǒng)計(jì)

AMP在這兩個方面也有獲得了積極的支持。AMP社區(qū)開始支持部分的廣告服務(wù)和數(shù)據(jù)分析服務(wù)。廣告服務(wù)包括Double Click，A9等，數(shù)據(jù)服務(wù)包括Adobe, Google Analytics。

支持的數(shù)據(jù)分析服務(wù)商：

支持的廣告服務(wù)提供商：

AMP的戰(zhàn)友：

懷揣移動性能提升的理想，不僅僅有通用領(lǐng)域的AMP，還有它的戰(zhàn)友們。有些巨無霸平臺也推出垂直的解決方案，等待時機(jī)和技術(shù)成熟隨時向通用發(fā)展。下面列舉幾個例子。

1)Facebook Instant Articles

Facebook應(yīng)用內(nèi)的文章框架，采用基于HTML編碼框架，類似AMP的想法，支持Facebook中，通過預(yù)先裝載提高速度。這個框架直接對接了主流的大的新聞網(wǎng)站(NYtimes,國家地理，NBC,BBC等)。官方數(shù)據(jù)是：性能大大提升，20%更多點(diǎn)擊;70%更少的逃離率;30%更多的分享;

2)微信公眾號/QQ瀏覽器X5

公眾號的內(nèi)容的展現(xiàn)樣式有很多限制，正是這些限制保證了裝載速度要快于普通的富交互網(wǎng)站。公眾號文章在微信的閉環(huán)里，高速的裝載和自由的傳播。”自由即奴役“。

如何擁抱AMP

1.訪問AMP官網(wǎng)

– http://ampproject.org 官網(wǎng)，教程，文檔，F(xiàn)AQ等

– http://github.com/ampproject/amphtml 源代碼

2. 開發(fā)AMP-HTML，對接CMS系統(tǒng)

3. 發(fā)布AMP-HTML并且兼容舊格式，觀察性能提升

***的話

AMP技術(shù)是一個宏大的理想，壯志有些像1996年剛出生的Java語言，“糜克有初，鮮克有終”，希望AMP能夠走的更遠(yuǎn)，更好。除了幫助出版行業(yè)的新聞內(nèi)容，也能夠幫助廣告主的Ad Landing Page裝載的更快更好!

【本文為51CTO專欄作者“歐陽辰”的原創(chuàng)稿件，轉(zhuǎn)載請聯(lián)系作者本人獲取授權(quán)】