澄清對AMP的十個誤解

1. AMP 是一個新的渲染引擎 / 編程語言

AMP 是一套開源的 web 組件格式和類庫。與其它類庫或者框架相比，AMP 最大的區別在於，它採用了白名單策略，來約定你可以做什麼。

為什麼要限制一些東西的使用呢？這是因為一些看起來很無辜的小代碼很容易拖慢網站的性能。而且一段時間後回來排查這些性能問題會是一件非常困難的事情。這就像你在德國的 Autobahn 快速路上開車，卻只在右道行走，不知道最左邊的道路才是更快的。AMP 就是這樣一種技術，強迫你走到最左邊的快速道路，並且保證你前方的道路是沒有障礙的。

AMP 帶來的並不只有限制，它還提供了很多的自定義標籤，這些標籤都有各自內置的功能。當你使用這些自定義標籤，並遵守一些其它的規則，那麼 AMP 將通過一些手段保證你的網站速度是非常快的。這些手段主要包括強制靜態布局、高效率資源載入和一些其它的優化。

AMP 有一份文檔，規定了什麼樣的標籤是兼容的，什麼樣的標籤是不兼容的。它還發布了一個內置的驗證工具，可以讓你看到當前頁面的是否符合 AMP 文檔的要求。需要強調的是，從技術上來說，即使不遵守所有的規定，AMP 頁面也能運行得很好，只是你的頁面無法通過 AMP 驗證（從性能上來說，不遵守 AMP 規定到一定程度的時候，AMP 做的性能改進也會全部失效，另外如果有一些東西是要求與 AMP 頁面協作的，那麼你的頁面可能無法正常顯示 ）。但同時，這也意味著 AMP 所強調的一些特性全部沒有了。

還有更多解釋嗎？

真的沒有了。AMP 只是一套 web 組件生態系統而已。但是，因為可以很容易通過編程的方式來確定一個頁面是合法的 AMP，就可以做更多炫酷的事情了。比如：

合法的 AMP 可以使用免費、高速的緩存（例如 Google AMP Cache）

基本可以確認合法的 AMP 頁面速度很快，且對用戶友好

AMP 頁面是「自包含」（self-contained）的（譯註：指頁面是完整、獨立的），所以可以被嵌入第三方平台

這也允許第三方平台做一些很炫酷的事情：

出現在 Google 搜索的 Top Stories 輪播上

從 Pinterest 上鏈接到 AMP 頁面

在 PWA 中使用 AMP 頁面

2. AMP 是 Google 的項目

AMP 最早是由出版行業和 Google 在 2015 年提出來的（當然，一些促使 AMP 誕生的體驗問題，比如移動端 web 頁面載入慢等，屬於明顯的行業內共性問題）。從一開始，它就是由出版行業、廣告行業、技術提供者和平台提供方一起攜手開發的，除了 Google 以外，參與者還包括 Twitter、Linkedin 和 Pinterest 。AMP 從提出來的第一天起就是一個通過 Github 進行開放協作的開源項目。到現在為止，AMP 接受了來自超過 200 名貢獻者的 Pull Request，這些貢獻者絕大部分不是 Google 的員工。

Google 確實有一支團隊在全職為 AMP 項目工作，AMP 項目的大部分貢獻也來自這個團隊，但這個團隊也是通過和其它人一樣的 Intent to implement 流程來工作。Google 團隊也會將它們的周會紀要以及其它的文檔發布出來，盡量保證外部貢獻者都可以參與進來。

更新：

針對這一點，外界有一些疑問和評論。上面這兩段話仍然有效，但是我補充一個更精簡的結論：AMP 項目當前的核心貢獻者都是 Google 員工，所以 AMP 可以稱作是 Google 領導（Google-led）的項目。但是它是被當作一個獨立的開源項目來看待的，我們正在邀請開發者和社區參與進來一起貢獻，讓他們也變成核心貢獻者，使 AMP 項目更加獨立。

3. AMP 需要 Chrome 才能運行

絕對不是這樣！AMP 是一個跨平台、跨瀏覽器的類庫，支持所有流行的移動瀏覽器和桌面瀏覽器的最新兩個版本:

AMP 可以運行的瀏覽器

4. AMP 限制了我的布局和設計

你肯定會被 AMP 能做的事情驚訝到。AMP 確實限制了一些標籤和對性能影響很大的 CSS 屬性的使用，但是整體來看，在為站點編寫樣式時，受到的限制非常小。想寫一個瘋狂的 5 層 flexbox 嵌套布局？那就寫吧。想基於偽元素寫一個瘋狂的 UI ？也 OK。

下圖中可以看到 AMP 頁面被完美的嵌入到另一頁面的元素中：

5. AMP 只適合輕量級頁面

有幾分道理，但也有誤導性。這主要取決於你如何理解「輕量」。嚴格來說，AMP 的目標是靜態內容。但我們所說的靜態內容同樣可以包含具有藝術氣息的動畫、側邊欄、燈箱廣告、手風琴導航、輪播等等。你可以查看 AMPByExample 中的一些高級例子：

https://ampbyexample.com/#advanced

6. AMP 只適用於移動端

誠然，AMP（Accelerated Mobile Pages）中的「Mobile」無助於澄清這個問題，但是這個說法還是跟事實完全不符。

AMP 是一個非常強大的跨平台解決方案，它希望出版行業和開發者將工程資源從細碎的多平台兼容支持中解放出來，將焦點放到創建偉大的新產品特性上，而這些產品特性可以被任何設備上的所有用戶輕易訪問到。

AMP 本身是在響應式設計的概念支持下被創造出來的。目前有與 AMP 集成的平台大部分是聚焦移動端的，但是在桌面端，你也可以從 AMP 中獲取得很多好處。

想知道如何使用 AMP 來處理不同解析度和不同設備的話，可以看我的另一篇文章「AMP 中的』mobile』」：

https://paulbakaus.com/2016/07/01/about-that-mobile-in-accelerated-mobile-pages/

7. 我現有的網站上無法使用 AMP

我們已經澄清過第 4 點，並沒有什麼特別的理由讓你現在的網站無法使用 AMP，因為當你讀完第一個問題後，就知道了 AMP 只是一個 web 組件類庫而已。事實上，AMP 項目主頁就是完全使用的 AMP：

AMP 項目主頁使用的 AMP

當然，和其它類庫一樣，AMP 並不適合每一個人。在動手前想一想在 AMP 的強制限制（同時也帶來好處）下，你的網站是否能正常運行。如果答案是肯定的，那麼就切換到 AMP 吧。有一個基本的原則，如果你的網站沒有靜態內容，並且頁面並不是最深層次的頁面（譯註：原文 leaf pages，leaf 指樹狀結構中的葉子節點，對應到網站一般指最深層次的頁面，例如文章頁），例如入口頁，也就是用戶從搜索中點進來的頁面，那麼 AMP 可能不適合你。

8. 如果我自己做優化，那 AMP 就沒什麼用

AMP 的優化是「無腦優化」，即使你身邊沒有 web 開發大師，它也能幫助你。我們對將網站性能優化到極致這件事情感到自信和驕傲。事實上，因為 AMP 是一個通用庫，它可能會漏掉一些針對你的網站特殊場景下的優化策略，這意味著你自己的手工優化工作很可能會帶來更好的性能。

但到今天為止，瀏覽器和一些大的平台例如 Google 搜索，仍然沒有辦法來確認你的網站是非常快速且對用戶友好的。所以如果你選擇自己做優化工作，你可能能得到一個非常快的網站，但是沒有辦法讓其它人確信。而 AMP 的驗證使得它對於第三方平台非常有吸引力。

9. AMP 只對出版發行行業有好處

沒錯，如果你將你的新聞站點變成 AMP，就有機會出現在 Google 的 Top Stories 輪播上，並且 Google 會在移動端搜索結果中使用一個內聯的查看器來加速 AMP 頁面。但是 eBay 也創建了 AMP 頁面（示例），儘管它們並不是新聞網站。

為什麼 eBay 要選擇 AMP？它們自己是這麼說的：

AMP 的好處之一在於，它是一套構建移動端 web 頁面的最佳實踐的集合。我們之前已經在遵守這些最佳實踐中的一部分，但是這些不同的做法分散在各個團隊中，而且每個團隊都有自己的偏好。AMP 的出現讓我們可以更好地整理加固這個最佳實踐的清單，並將它們作為常規開發周期中的一部分。

10. 我得在 AMP 和 PWA 中做出選擇

AMP 和 PWA 是互補的技術，它們的使用場景完全不一樣。如果將它們結合在一起使用，你就能使用它們創建出我認為目前最完美的內容站點：

用戶發現了你的內容的鏈接，點進來了

內容被瞬間載入完畢，並且看起來很舒服

閱讀完之後，用戶被邀請閱讀更多內容，或者邀請用戶使用一個更好體驗的版本，它們由快速導航、通知推送、離線支持等技術支持

當用戶接受了你的邀請後，他們將被引導到一個可以安裝到桌面的版本，這個版本的使用體驗就像 App 一樣

聽起來非常棒對吧？你需要做的只是下面這些（或許有稍許變化）：

最深層面的頁面（有內容的頁面，而不是概覽頁面）使用 AMP 發布，以獲得瞬間載入的體驗

當用戶瀏覽你的內容的時候，在這些 AMP 頁面中使用初始化緩存和 PWA 應用外殼（PWA app shell）

當用戶點擊網站上的其它鏈接的時候（例如，在類似 App 的體驗中，點擊底部的按鈕），Service Worker 接管請求，然後載入 PWA 應用外殼

最後，已經載入好的 PWA 應用外殼可以將 AMP 作為數據源嵌入到頁面，這將使得你只需要為相同內容創建一個後台（既可以作為單獨的 AMP 瀏覽，也可以作為 PWA 的數據源）

如果同時談到 AMP 和 PWA 的話，還有更多話題可以說，所以請期待在這個主題上的後續深度文章吧。

總結

現在你有答案了。針對 10 個誤解，我們給了 10 個澄清的答案，希望能給你一個對 AMP 更大更清晰的印象，也讓你想清楚 AMP 對你來說是否適合。

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！