初探谷歌AMP技術
阿新 • • 發佈：2019-02-04
參加完騰訊web前端大會後，對其中的AMP技術比較感興趣，遂花了點時間研究了一下，於是有了該篇文章
什麼是AMP？
AMP全稱Accelerated Mobile Pages，意為加速的移動頁面。Google將會免費把他們的網頁快取到Google自己的CDN中。 簡單的說 AMP就是快取…如果符合規則，您將可以使用其中的快取。
谷歌開發AMP初衷
廣告服務
Facebook開發Instant Article的目的是讓你在Facebook上就能看到其他網站上的內容，這個方向是非常正確。如果能夠在Facebook裡享受到比在其他瀏覽器更加快的載入速度的話，使用者又何必再去用別的應用來看呢。
谷歌似乎是認識到了來自於Facebook的這種威脅——通過Instant Article，Facebook完全可以過濾掉Google的廣告服務。於是Google迅速動手開發了AMP專案，其目的實際上就是為了增強它在移動廣告服務領域的市場。至於為什麼電腦使用者被拋棄掉了，那是因為谷歌已經掌握把廣告推送給你的能力了。
AMP特點
- AMP的HTML是標準HTML的子集，限制了部分標籤的使用
- CSS程式碼也簡化，而且要寫在HTML中，不能呼叫外部CSS檔案
- 所有js檔案必須是非同步載入的
- 不允許自定義js指令碼
- 資源控制，比如圖片、視訊等使用者下拉到圖片時再載入
- 高度快取，Google將頁面快取在自己伺服器了
- 根據Google給出的資料，目前所有的AMP頁面的開啟速度都低於1秒，少於1s是符合使用者心理預期的.大於1s後多延遲1s會流失20%的使用者
AMP技術組成
AMP HTML
下面是一些在寫AMP HTML時需注意的：
- 如果 a 標籤的 href 屬性以 javascript: 開頭，則 target 屬性必須設定為 _blank，否則不被允許。
- 內部樣式表必須包含amp-custom 如<style amp-custom>
- 不可使用!important樣式，AMP Runtime需要擁有對元素樣式的最終決定權
- 某些選擇器因為效能問題而被禁用，如(*) 和 (:not)
AMP JS
AMP Cache
- AMP Cache是基於CDN，它會自動抓取AMP HTML頁面，並自動快取，以提高頁面的效能，並且所有JS檔案和圖片使用HTTP2.0。簡單的說，只要大家按照AMP的規範寫AMP頁面，就能夠被收錄到AMP Cache中。
- AMP Cache還帶有一個驗證系統，以確保頁面正常工作，而且不依賴於外部資源。該驗證系統還執行一系列的斷言確保頁面符合AMP HTML規範
AMP適用於哪些場合？
由於AMP HTML對頁面做了許多限制和約束，所以AMP主要用於提高靜態頁面的效能，這個靜態也不是指無服務端參與的頁面，而是指沒有複雜互動、以展示內容為主的頁面，比如無評論功能的部落格、新聞詳情頁面等等
解析一個AMP檔案
<!-- 必須為 doctype html -->
<!DOCTYPE html>
<!-- 方便其他程式能識別出該頁面為AMP HTML ⚡ 也可換為amp-->
<html ⚡>
<head>
<meta charset="utf-8">
<!-- AMP Runtime 該js需翻牆 -->
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- 用於指定該頁面普通版本的url，如果只有一個版本，使用當前url即可 -->
<link rel="canonical" href="my-non-amp.html">
<!-- 在普通頁面版本中 href需指定為amp頁面的url -->
<!-- <link rel="amphtml" href="my-amp.html"> -->
<!-- 必須包含viewport -->
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<!-- 樣板程式碼 start -->
<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>
<!-- 樣板程式碼 end -->
<!-- 內部樣式表(不超過50KB)必須包含 amp-custom屬性 -->
<style amp-custom>
h1{
color: #6cf;
}
.test{
border: 1px solid red;
width: 60%;
margin: 0 auto;
}
</style>
<title></title>
</head>
<body>
<h1>demo</h1>
<div class="test">
<amp-img src="./img/a.png" width="400" height="300" alt="" layout="responsive">
</div>
</body>
</html>樣板程式碼是為了確保頁面在被渲染完畢前不可見（透明度為0）
早先的樣板程式碼如下：
<style>
body {
opacity: 0
}
</style>
<noscript>
<style>
body {
opacity: 1
}
</style>
</noscript>這種樣板程式碼，如果AMP Runtime載入失敗，技術上是不可能讓頁面的透明度從0變為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>AMP上線前驗證
體驗地址
不管我在PC的移動端模式還是手機上，搜尋出來的結果並沒有帶AMP標記的網頁，感到比較奇怪。
補充
AMP技術可以極大提高網站載入速度，但這只是影響搜尋排名的中的一個因素，使用AMP並不能大幅提升你在搜尋結果中的排名