什麼是AMP？ 加速移動頁面的完整指南

第 1 部分：什麼是加速移動頁面？

移動優先的心態將繼續存在——這句話從企業和消費者方面都是正確的。

說用戶，在購買前先諮詢他們的手機將是一種嚴重的輕描淡寫。 在全球範圍內，移動互聯網使用量已超過桌面移動使用量。 甚至印度、墨西哥和印度尼西亞等國家的智能手機使用量也比台式機高出 4 倍以上：

僅在美國，每天就有 300 億次移動時刻（客戶諮詢他們的電話並期望立即得到答复的時刻）。 這意味著您的品牌每天都有 300 億次移動機會向用戶提供他們想要的東西。

移動廣告支出仍然落後於移動媒體消費：

用戶花更多時間在移動設備上瀏覽而不是購買是有原因的——用戶在移動設備上更渴望即時滿足。

回答這個問題 - 您等待移動網頁加載多長時間？

根據谷歌和 SOASTA 收集的數據，40% 的消費者離開的頁面加載時間超過三秒。

三秒鐘。

這就是您必須始終保持喜歡您的廣告並點擊它的用戶的注意力。 如果您的網頁未能在上述時間內加載，那麼您創建的廣告，無論它多麼引人注目，都是徒勞的。 壞消息是，根據數據，大多數零售移動網站的加載時間約為 6.9 秒，這是 40% 的用戶在放棄頁面之前等待的時間的兩倍多。

網頁速度如何影響跳出率

在衡量移動網頁的跳出率時，速度是一個重要因素。 在我們進一步深入研究之前，重要的是要解釋一下，移動網站跳出率主要從兩個方面考慮速度，即 DOM 就緒時間和整頁加載時間：

1. DOM 就緒時間： DOM 就緒時間是瀏覽器接收並解析頁面 HTML 代碼所需的時間——它是跳出率的最大預測指標。 儘管用戶可能不知道何時接收和解析 HTML 代碼，但必須在加載任何頁面元素（如圖像）之前加載代碼。 如果 HTML 代碼花費的時間太長，網站加載時間就會很慢。 為了加快移動網頁的 DOM 就緒時間，最好避免使用 JavaScript，因為它會阻止瀏覽器解析 HTML 代碼。 使用 JavaScript 的頁面元素包括必須在加載頁面之前從外部服務器獲取的第三方廣告和社交小部件。

2、整頁加載時間：整頁加載時間包括圖片、字體、CSS代碼等加載到網頁上的時間。 更快的整頁加載會導致更低的跳出率：

為確保您的網頁具有更快的整頁加載時間，您應該優化圖像、字體，並避免可能會減慢加載時間的第三方文件。

頁面加載時間是頁面跳出的最重要原因之一，更糟糕的是，用戶不僅會放棄該頁面，而且，研究表明 79% 的用戶一旦在網頁上體驗緩慢就不會回來。

考慮以下有關頁面加載速度的驚人啟示：

• 通過 3G 連接加載平均移動站點需要 19 秒，77% 的移動站點需要超過 10 秒加載。
• Google 發現，網頁加載時間每增加一秒，轉化率就會降低 20%。 相比之下，加載時間為 5 秒的網站的移動廣告收入是加載時間為 19 秒的網站的 2 倍。
• 61% 的用戶不太可能再次訪問他們無法訪問的移動網站。

這是什麼意思？

如果移動頁面加載不是即時的，對用戶來說不夠快，他們會反彈，並且可能不會回來。
為確保您的移動網頁不會發生這種情況，您必須放大移動網站和點擊後登錄頁面。

什麼是AMP？

Google 啟動了 Accelerated Mobile Pages 開源項目，以確保移動網頁以最佳速度運行。

AMP 項目旨在通過允許您創建跨設備和分發平台始終快速、美觀和高性能的網頁和廣告，從而“共同構建未來的網絡”。

AMP 是與數以千計的開發商、發行商、網站、發行公司和科技公司合作建立的。 迄今為止，已創建了超過 15 億個 AMP 頁面，並且有 100 多家領先的分析、廣告技術和 CMS 提供商支持 AMP 格式。

當您以 AMP 格式創建移動頁面時，您將獲得：

1. 更高的性能和參與度：在 AMP 開源項目中創建的頁面幾乎可以立即加載，為用戶提供流暢、更具吸引力的移動和桌面體驗。

2. 靈活性和結果：企業有機會決定如何展示他們的內容以及使用哪些技術供應商，同時維護和改進 KPI。

您之前可能點擊過一個 AMP 頁面，只是您沒有意識到。 您可能注意到的唯一一件事是您點擊頁面後的瞬間。 AMP 構建的網頁在搜索結果中有一個閃電指示器。

以下是在搜索結果中識別 AMP 的方法：

這是 AMP 頁面與普通網頁相比的樣子：

AMP 頁面立即加載的原因是因為 AMP 限制了 HTML/CSS 和 JavaScript，允許更快地呈現移動網頁。 與常規移動頁面不同，AMP 頁面由 Google AMP Cache 自動緩存，以加快 Google 搜索的加載速度。

用戶在使用移動設備時有一定的期望，他們想要有意義、相關且更快的體驗 - 以確保滿足目標受眾的期望，AMP 是您的最佳選擇。

本指南將帶您了解有關 AMP 開源項目的所有信息。 我們將詳細介紹 AMP 的工作原理，以及頁面加載速度如此之快的原因。

該指南還將提供案例研究，說明使用 AMP 如何幫助不同行業的企業提高轉化率，以及當您使用 AMPlify 頁面時您將獲得的好處。 最後一部分將討論什麼是 Accelerated Mobile 點擊後登錄頁面，以及為什麼您應該創建頁面來為訪問者提供更快、更相關的點擊後登錄頁面。

第 2 部分：AMP 如何工作？

Google 於 2016 年 2 月推出了 Accelerated Mobile Pages (AMP) 開源框架。 構建該框架是因為需要創建優化的、緊密集成的用戶體驗，而不是用戶每天處理的笨拙和緩慢的移動體驗基礎。

Google 啟動了 AMP 項目以創建一個框架，該框架將為創建優化的移動網頁體驗提供準確的路徑。 AMP 開源項目有據可查、易於部署、可驗證，並且在網頁設計中堅持用戶至上。

自兩年前推出以來，已有 2500 萬個域發布了超過 40 億個 AMP 頁面：

由於 AMP 頁面的推出不僅增加了 AMP 頁面的數量，而且它們的速度也增加了，因此從 Google 搜索加載 AMP 頁面所需的中位時間現在不到半秒。

AMP 導致網站流量增加 10%，頁面停留時間增加 2 倍。 與非 AMP 頁面相比，使用 AMP 的電子商務網站的銷售額和轉化次數增加了 20%：

AMP 幫助企業創建精簡、乾淨且相關的網頁版本，為用戶提供更快的移動網絡體驗。

Chartbeat 分析了 2016 年 6 月至 2017 年 5 月使用 AMP 的 360 網站的數據，發現使用 AMP 頁面的典型發布商在其 AMP 內容上看到了所有移動流量的 16%。

AMP 頁面的加載速度大約是標準網頁的四倍，而且用戶對 AMP 頁面的參與度比標準移動網頁高 35%：

現在我們知道您為什麼應該使用 AMP 頁面，讓我們來看看 AMP 的工作原理，它與響應式網頁設計、Facebook 的即時文章和漸進式網頁應用程序的比較。

AMP的3個核心組件

AMP 頁面由以下三個核心組件構建而成：

AMP HTML

AMP HTML 本質上是 HTML，只是對性能可靠有一些限制。 最簡單的 AMP HTML 文件如下所示：

AMP HTML 中的大多數標籤都是常規 HTML 標籤，但是，一些 HTML 標籤會替換為 AMP 特定的標籤。 這些自定義標記稱為 AMP HTML 組件，它們使常見的標記模式易於以高效的方式實施。 AMP 頁面被搜索引擎和其他平台通過 HTML 標籤發現。

您可以選擇頁面的非 AMP 版本和 AMP 版本，或僅 AMP 版本。

AMP JavaScript (JS)

AMP JS 庫可確保快速呈現 AMP HTML 頁面。 JS 庫實現了 AMP 的所有最佳性能實踐，例如內聯 CSS 和字體觸發，它管理資源加載並為您提供自定義 HTML 標籤以確保快速頁面呈現。

AMP JS 使來自外部資源的所有內容都異步化，因此頁面上的任何內容都無法阻止渲染。 JS 還使用其他性能技術，例如對所有 iframe 進行沙箱處理、在加載資源之前預先計算每個頁面元素的佈局以及禁用慢速 CSS 選擇器。

緩存

Google AMP 緩存用於提供緩存的 AMP HTML 頁面。 AMP 緩存是基於代理的內容交付網絡，用於交付所有有效的 AMP 文檔。 緩存會提取 AMP HTML 頁面、緩存它們並自動提高頁面性能。

為了保持最高效率，AMP Cache 會加載文檔、JS 文件和來自使用 HTTP 2.0 的同一來源的所有圖像。

AMP Cache 帶有一個內置驗證系統，可確認頁面可以保證正常工作，並且它不依賴於可能會減慢頁面速度的外力。 驗證系統對一系列斷言進行操作，以確認頁面的標記符合 AMP HTML 規範。

每個 AMP 頁面旁邊都有一個附加版本的驗證系統。 此版本能夠在呈現頁面時將驗證錯誤直接記錄到瀏覽器的控制台中，使您能夠查看代碼中可能對性能和用戶體驗產生影響的複雜更改。

AMP 的三個核心組件協同工作，使頁面能夠快速加載。 下一節將重點介紹七種優化技術，它們結合起來使 AMP 頁面如此之快。

所有 AMP JavaScript 都是異步執行的

JavaScript 可以修改頁面的各個方面，它具有阻止 DOM 構建和延遲頁面渲染的能力——這兩個因素都會導致頁面加載緩慢。 為確保 JavaScript 不會延遲頁面呈現，AMP 僅允許異步 JavaScript。

AMP 頁面不包含任何作者編寫的 JavaScript，而是所有交互式頁面功能都由自定義 AMP 元素處理。 這些自定義 AMP 元素可能包含 JavaScript，但它們經過精心設計以確保不會引發任何性能下降。

AMP 在 iframe 中執行第三方 JavaScript，但無法阻止頁面呈現。

所有資源都是靜態大小的

所有外部資源（例如圖像、iframe 和廣告）都必須說明其 HTML 大小，以便 AMP 可以在下載頁面資源之前確定每個元素的大小和位置。 AMP 加載頁面佈局，無需等待任何資源下載。

AMP 能夠將文檔佈局與大小佈局分開，只需一個 HTTP 請求即可佈局整個文檔。 因為 AMP 已經過優化以避免在瀏覽器中進行任何昂貴的樣式佈局和重新計算，所以在頁面資源加載時沒有任何重新佈局。

擴展機制不會阻止渲染

AMP 不允許擴展機制阻止頁面呈現，它支持燈箱和社交媒體嵌入等元素的擴展，雖然這些確實需要額外的 HTTP 請求，但它們不會阻止頁面佈局和呈現。

如果頁面使用自定義腳本，它必須告訴 AMP 系統它最終將擁有一個自定義標記，然後 AMP 會創建所需的標記，以便頁面不會變慢。 例如，如果 amp-iframe 標記告訴 AMP 將有一個 amp-iframe 標記，那麼 AMP 就會在知道將包含哪些內容之前創建 iframe 框。

所有第三方 JavaScript 都被排除在關鍵路徑之外

第三方 JavaScript 使用同步 JS 加載，這往往會減慢您的加載時間。 AMP 頁面允許第三方 JavaScript 但僅在沙盒 iframe 中，通過這樣做，JavaScript 加載無法阻止主頁面的執行。 即使沙盒 iframe JavaScript 觸發了多個樣式重新計算，它們的小 iframe 也只有很少的 DOM。

與重新計算頁面的樣式和佈局相比，iframe 重新計算的執行速度非常快。

CSS 必須是內聯的並且有大小限制

CSS 會阻止渲染，還會阻止所有頁面加載，並且有導致膨脹的趨勢。 AMP HTML 僅允許內聯樣式，這會從大多數網頁的關鍵渲染路徑中刪除 1 個或大部分 HTTP 請求。

內聯樣式表的最大大小應該為 75kb，雖然這對於非常複雜的頁面來說已經足夠大，但它仍然需要頁面作者保持良好的 CSS 衛生習慣。

字體觸發效率高

Web 字體優化對於快速加載至關重要，因為 Web 字體通常很大。 在包含幾個同步腳本和幾個外部樣式表的典型頁面上，瀏覽器會等待下載字體，直到所有腳本都加載完畢。

AMP 框架聲明零 HTTP 請求，直到所有字體開始下載。 這之所以成為可能，是因為 AMP 中的所有 JavaScript 都具有 async 屬性，並且只允許內聯表，沒有阻止瀏覽器下載字體的 HTTP 請求。

樣式重新計算被最小化

在 AMP 頁面中，所有 DOM 讀取都發生在所有寫入之前，這確保了每幀僅重新計算一次樣式——因此不會對頁面渲染性能產生負面影響。

僅運行 GPU 加速的動畫

要運行快速優化，您必須在 GPU 上運行它們。 GPU 在層中工作，它知道如何在這些層上執行某些操作——這些層可以移動和淡化。 但是，當 GPU 無法更新頁面佈局時，它會將這項任務交給瀏覽器，這對頁面加載時間不利。

動畫相關的 CSS 規則確保動畫可以被 GPU 加速，這意味著 AMP 只允許在轉換和不透明度上進行動畫和過渡，因此不需要頁面佈局。

資源加載優先

AMP 控制所有資源加載，它優先考慮資源加載，只加載需要的內容並預取所有延遲加載的資源。

當 AMP 下載資源時，它會優化下載，因此首先下載最重要的資源。 所有圖像和廣告僅在用戶可能會看到、位於首屏或訪問者可能滾動時才會下載。

AMP 還具有預取延遲加載資源的能力，這些資源盡可能晚加載，但盡可能早地預取。 這種方式加載速度非常快，但只有在向用戶顯示資源時才會使用 CPU。

即時加載頁面

新的 AMP 預連接 API 被大量使用，以確保 HTTP 請求在發出後儘可能快。 因此頁面在用戶明確聲明他們想要導航之前呈現，頁面可能在用戶實際看到它時可用，從而使頁面立即加載。

AMP 經過優化，在預渲染 Web 內容時不會使用大量帶寬和 CPU。 當 AMP 文檔被預渲染以進行即時加載時，實際上會下載折疊上方的資源，而不會下載可能佔用大量 CPU 的資源，例如第三方 iframe。

您還可以使用以下視頻來了解“AMP 使您的網頁速度更快的 7 種方式”：

現在我們知道了 AMP 的工作原理，讓我們看看 AMP 與 Facebook 的即時文章、響應式網頁設計和漸進式網頁應用程序的比較。

AMP 與 Facebook 的即時文章

Facebook 於 2015 年推出了 Instant Articles，旨在幫助出版商為 Facebook 上的人們提供令人難以置信的快速和身臨其境的閱讀體驗。 Facebook 的即時文章是：

• 比標準移動網絡文章快 10 倍
• 即閱文的平均閱讀量增加 20%
• 70% 的讀者不太可能放棄即閱文

即閱文可幫助發布商在 Facebook 上快速創建交互式文章。 它們為您提供以下優勢：

• 快速響應：無論用戶使用何種連接或設備，即閱文都會立即加載。 文章易於使用，因為它們會轉變為移動講故事體驗。
• 互動性和吸引力：文章的沉浸式體驗使其更具互動性，這就是為什麼即閱文的分享頻率比移動網絡文章高 30% 的原因。 這有助於擴大您在動態消息中的故事的覆蓋面。
• 輕鬆靈活的貨幣化：貨幣化是即閱文不可或缺的一部分。 為了通過文章發展您的業務，您可以擴展直銷廣告，並使用 Facebook 的 Audience Network 填充可用的廣告庫存，甚至創建原生品牌內容。

AMP 頁面和即閱文都為用戶提供了快速的加載時間，這有助於降低頁面跳出率並提高參與度。 事實上，Facebook 的即時文章加載速度甚至比 AMP 頁面還要快：

然而，AMP 頁面的採用率遠高於即閱文，這主要是因為 Facebook 在其新聞提要中越來越重視視頻而不是文本文章。 這導致一些出版商停止使用即閱文，包括紐約時報和衛報。

根據 Parsley 的說法，谷歌已經超過 Facebook，成為出版商外部流量的最大來源。 Google 現在佔發布商外部流量的 42%：

當 Facebook 推出 Instant Articles 超過谷歌成為媒體和內容網站的主要流量來源時，隨著 AMP 的推出和成功，谷歌重新處於領先地位。

AMP 項目的成功在於它是一個開源計劃，而不是商業夥伴關係。 AMP 項目並沒有像 Facebook 對 Instant Articles 那樣將用戶限制在特定的應用程序中，而是旨在改變發布商創建移動網頁的方式。

AMP 與響應式網頁設計 (RWD)

自 2015 年初 Google 推出 Mobilegeddon 以來，創建適合移動設備的網站一直是營銷人員的首要任務。響應式網頁設計旨在幫助創建注重靈活性的網頁。 響應式網頁可在任何設備或屏幕上運行，提供更好、更吸引人的移動網絡體驗。

從本質上講，AMP 和響應式網頁設計都使用幾乎相同的基本構建塊來創建移動頁面，即 HTML 和 JavaScript。 但是，它們有一些使它們與眾不同的差異，例如：

1. RWD 注重靈活性：響應式網頁設計為您的網站增加了靈活性。 您可以創建一個自動響應訪問者屏幕尺寸的頁面，這使您的頁面能夠在各種屏幕尺寸上為用戶提供良好的移動體驗。 響應式網頁設計並不完全專注於移動設備，而是適用於所有設備和所有用戶體驗。

2. AMP 專注於速度： AMP 開源框架專注於速度，特別是移動頁面速度。 AMP 為移動網絡內容引入了即時渲染。 通過使用內聯樣式表、延遲加載、預取資源和其他優化技術，該框架能夠立即加載移動頁面。

3. AMP 適用於網頁，RWD 取代了網頁：雖然可以在您的網頁上專門使用 AMP，但也可以將 AMP 添加到現有的非響應式或響應式網站，而無需重新設計網站。 但是，要使網頁具有響應性，您需要重新設計頁面。

4. AMP 提供更好的用戶體驗：有兩個主要因素決定移動用戶體驗，即頁面元素是否適合移動設備和速度。 儘管響應式網頁設計在縮放頁面元素以匹配用戶屏幕方面做得很好，但與 AMP 頁面相比，它在速度上表現得非常糟糕。

5. AMP 有 JavaScript 限制：響應式網頁設計有利於所有第三方腳本和媒體庫，AMP 頁面則不能這樣說。 為了加快頁面加載速度，AMP 框架的 JavaScript 和 CSS 功能非常有限。

AMP 適用於靜態頁面——不包含大量動態內容的頁面，而 RWD 可用於任何類型的頁面。 然而，響應式網頁加載時間過長，這會導致訪問者反彈，可能永遠不會再次返回。 如果您希望為用戶提供快速的移動響應式體驗，則應考慮使用 AMP 頁面。

AMP 與漸進式 Web 應用程序 (PWA)

Progressive Web Apps 是一個通過網絡交付的移動網絡應用程序，它的行為類似於原生應用程序，PWA 和原生應用程序的主要區別在於 PWA 不需要從 Google 或 App Store 下載。

漸進式網絡應用程序在網絡瀏覽器內運行，即使您的互聯網連接不是很強，也可以立即加載。 PWA 使用預緩存來確保應用程序保持更新，以便用戶只能看到最新版本。

對漸進式 Web 應用程序的需求源於這樣一個事實，即前 1,000 名移動網站的訪問人數是前 1,000 名本機應用程序的 4 倍。 然而，這些網站吸引用戶的時間平均比移動應用程序少 20 倍。

這基本上意味著移動網站容易吸引訪問者，但不能吸引他們。

PWA 旨在以原生移動應用程序的方式進行外觀、感覺和工作。 用戶在瀏覽器中遇到它們，就像在任何移動網站上一樣。 與該網站互動後，系統會提示用戶在其設備上安裝 Web 應用程序。 如果他們選擇安裝，應用會以原生應用的方式下載到他們的設備上。

PWA 是：

• 可靠 -即使在弱網絡條件下，它們也能立即加載。
• 快速 –通過流暢的動畫和無卡頓的滾動快速響應用戶交互。
• 引人入勝——它們感覺像是設備上的原生應用程序，提供身臨其境的用戶體驗。

當移動網絡應用程序滿足 Google 列出的必要要求時，移動網絡應用程序可以作為可下載的方式提供給用戶。

這些是 AMP 和 PWA 之間的主要區別：

您可以選擇僅使用 AMP 來創建快速但簡單的體驗。 您可以依靠漸進式 Web 應用程序來創建動態但速度較慢的用戶體驗。 或者，您可以通過將兩者結合到您的網頁設計中來快速開始並保持快速。

如今，AMP 與漸進式 Web 應用程序的結合使用變得越來越普遍，開發人員可以通過三種方式同時使用這兩種應用程序。

1. 作為漸進式網絡應用的 AMP

如果您的內容主要是靜態的並且您可以滿足於 AMP 的有限功能，則此選項允許您創建作為漸進式 Web 應用程序的閃電般的快速體驗。 例如，AMP 就是這樣構建的——漸進式網絡應用程序完全由 AMP 充電。 它有一個允許離線訪問的服務工作者，以及一個提示“添加到主屏幕”橫幅的清單。

2. AMP 到漸進式網絡應用

另一種結合使用 AMP 和漸進式網絡應用程序的方法是將您的 AMP 頁面視為您網站的掛鉤。 它以瞬時負載捕獲用戶，然後將他們捲入您的漸進式 Web 應用程序。 這允許您將快速加載的 AMP 頁面與比第一個選項更動態的 PWA 相結合。

3. 漸進式網絡應用中的 AMP

就像 AMP 與 PWA 的情況一樣，它不一定是全有或全無。 您不需要使用 AMP 構建所有頁面； 您也不需要將 AMP 和 PWA 作為鉤子和桿分開。 現在，您實際上可以僅 AMP 單個頁面的一小部分，從而減少其大小並縮短其加載時間，而無需完全權衡動態功能。

這涉及使用另一種形式的 AMP，稱為“Shadow AMP”，它允許 AMP 嵌套在網頁的某個區域內。 結果是漸進式 Web 應用程序外殼內的 AMP。

華盛頓郵報展示了 PWA 和 AMP 協同工作以帶來更好的參與度和更快的加載時間的理想示例。 當華盛頓郵報最初使他們的網站響應時，他們的速度是 3500 毫秒。 當他們採用 AMP 時，頁面加載時間減少到 1200 毫秒，然後在 AMP CDN 技術的幫助下進一步減少到 400 毫秒。

在他們採用 PWA 來減輕網站負擔後，用戶可以享受閃電般的頁面加載速度而不會出現任何中斷，以及更好的用戶體驗。

Accelerated Mobile Pages 項目允許您創建可立即加載的移動頁面，幫助訪問者更好地與頁面互動而不是彈跳。 創建 AMP 頁面所涉及的優化技術不僅可以加快頁面加載時間，還可以為訪問者提供良好的用戶體驗。

下一部分將重點介紹在頁面上使用 AMP 框架時獲得的確切好處。

第 3 部分：AMP 的好處和限制

AMP 確保網頁加載速度更快，這有助於提升用戶體驗並使訪問者在頁面上停留更長時間。 AMP 使用 AMP HTML 幫助移動頁面加載速度更快，事實上，根據 Google 的 Gary Illayes 的說法，AMP 頁面的平均加載時間為 1 秒，比普通標準 HTML 頁面快 4 倍。

我們已經討論了頁面跳出率和頁面速度之間的聯繫，並且我們已經詳細了解了 AMP 的工作原理以及它與 PWA、RWD 和 Facebook 的即閱文的比較。

本指南的這一部分將重點介紹 AMP 的優勢和限制，幫助您詳細了解創建 AMP 頁面時要存儲的內容。

AMP 的好處

當您的移動網頁加載速度更快時，您會自動改善用戶體驗和 KPI。 由於 AMP 頁面的即時加載，您可以在所有設備和平台（例如 Google、LinkedIn 和 Bing）上為您的用戶提供始終如一的快速 Web 體驗。

AMP 為您的移動頁面提供以下好處。

吸引觀眾

AMP 頁面的平均加載時間不到一秒，這意味著當用戶登陸 AMP 頁面時，他們會立即獲得他們想要的內容。 因為頁面會立即加載，所以他們與頁面的互動時間更長，並且更願意了解您的報價，這使得他們更有可能執行您希望他們採取的行動。

最大化收入

您的頁面加載轉化所需的時間每增加一秒就會下降 12%。 這意味著如果您想吸引受眾並提高投資回報率，您需要確保您的移動頁面滿足訪問者的速度期望。

AMP 框架允許您在任何地方為用戶提供更快的體驗——包括廣告、點擊後登錄頁面和網站。

保持靈活性和控制力

當您採用 AMP 格式時，您可以保留自己的品牌，同時利用 AMP 優化的 Web 組件。 您可以使用 CSS 來自定義網頁的樣式，並在需要時使用動態內容來獲取數據。

您還可以使用 A/B 測試來測試並為您的客戶創造最佳的移動用戶體驗。

降低操作的複雜性

創建 AMP 頁面的過程非常簡單明了。 您可以轉換整個檔案，尤其是在您使用 CMS（包括 Drupal 和 WordPress）的情況下。

您不需要任何特殊技能來優化每個 AMP 頁面的代碼，AMP 格式是完全可移植的，無論用戶如何訪問 AMP 頁面，AMP 頁面都始終保持快速。

最大化您的投資回報率

創建後的 AMP 頁面可以同時分佈在各種分發平台上。 這使您可以在 AMP 和非 AMP 頁面上投放您的廣告，這意味著您只需製作一次廣告即可在任何地方提供令人難忘的品牌體驗。

創造可持續的未來

AMP 項目是一項開源計劃，通過幫助每個人提供更好、更快的移動用戶體驗來保護網絡的未來。 通過加入 AMP 項目，您可以加入 AMP 項目並在一個開放、更快的網絡上為您的企業構建可持續發展的未來。

提供更好的用戶體驗

當然，使用加速移動點擊後登錄頁面的最明顯優勢是它們將提供更高的用戶滿意度。 當有二分之一的人不願意等待僅僅 10 秒來加載網站時，將過程加快 15-85% 會對訪問者的幸福感產生巨大影響。

獲得 SEO 提升

Google 的算法考慮了頁面速度和移動響應能力。 您的頁面在移動設備上加載的速度越快，它在搜索引擎結果頁面上的排名就越高。

所有啟用 AMP 的頁面都將以輪播格式顯示，即使在搜索結果中的付費廣告上方，標題下方也有綠色閃電。

雖然使用 AMP 頁面為您提供了很多優勢，但 AMP 也有一些缺點。

沒有第三方 JavaScript

由於您無法使用第三方 JavaScript，因此您必須告別分析和跟踪功能，這些功能可讓您提供具有高度針對性的廣告體驗。

不僅如此，而且使用 Google 的輕量級 JavaScript 版本，無法在 AMP 頁面上使用需要傳輸數據的頁面元素。

沒有谷歌分析跟踪

Google 向用戶使用緩存版本的 AMP 頁面，而不是訪問您的服務器，這是 AMP 頁面加載如此之快的原因之一。 儘管緩存可以讓您的頁面加載速度更快，但除非您對 GA 進行配置並將單獨的跟踪代碼應用於 AMP 頁面，否則 Google Analytics 不會跟踪用戶的訪問。

以下是使用 Google 標籤管理器在 Google Analytics 中跟踪 AMP 頁面的方法。

AMP 頁面有其優點和缺點，但是，如果您希望為訪問者提供快速且優化的移動體驗，那麼 AMP 的優點肯定會超過缺點。

下一部分將重點介紹使用 AMP 來實現 KPI 和提高投資回報率的企業的案例研究。

第 4 部分：AMP 成功案例

當我們談論移動網頁時，速度等於收入。 SOASTA 的研究表明，即使頁面加載時間延遲 100 毫秒，也會導致轉化率降低：

為了突出 AMP 對移動網頁的影響，Google 委託 Forrester Consulting 對使用 AMP 的發布商和電子商務網站進行了全面的經濟影響™研究。

該研究重點介紹了 4 家一直在使用 AMP 格式的網絡公司。 通過查看 4 家公司的結果，Forrester 創建了一個模型來預測三年內實施 AMP 的預期回報。

利用這種模型，一個每月網站訪問次數為 400 萬且利潤率為 10% 的網站有望收回植入 AMP 頁面的成本，並在不到 6 個月的時間內開始看到積極的收益：

這些是從研究中收集到的主要結果：

• 銷售轉化率提高 20%。 本研究採訪的兩個電子商務網站進行的 A/B 測試表明，根據 Forrester 模型，其 AMP 頁面的轉化率提高了 20%，這將帶來超過 20 萬美元的年利潤。
• AMP 網站流量同比增長 10%。 根據模型，網站流量的增加會帶來額外的銷售額和廣告瀏覽量，這將在第一年為網站帶來超過 7.5 萬美元的年利潤。
• 每次訪問的頁數增加 60%。 AMP 頁面對電子商務和新聞出版商表現積極，他們都表示訪問該網站的人數增加了 60%，而這些人在網站上的停留時間增加了兩倍，回訪者僅增加了 0.3%。

AMP 是一種相對較新的格式，顯然，您必須在採用它時承擔一些成本。 然而，實施 AMP 格式的回報超過了初始成本。

Gizmodo 使用 AMP 頁面在移動設備上的速度提高了 3 倍

Gizmodo 專注於用戶體驗，他們一半的流量來自他們的移動網站，如果他們希望讀者在移動設備上與他們的內容互動，確保網站快速清晰至關重要。

The blog implemented a number of optimization techniques in order to increase their mobile engagement, such as improving page load times, removing unnecessary page scripts, lazy loading for below the fold page elements, and setting a fallback font for web fonts. Still Gizmodo team thought something more could be done to improve user experience for mobile users.

Head of Gizmodo's Data Analytics, Josh Laurito felt this was their main challenge:

We delivered the same (large) JavaScript & CSS payloads to users on mobile and desktop, making it difficult to improve one experience without degrading the other.

Gizmodo found the solution to their problem by implementing the AMP framework in May 2016, and is currently publishing all their posts on AMP pages, they are even creating AMP versions of their previous posts.

Gizmodo has now published over 24,000 AMP pages and is receiving 100k visits to these pages daily:

AMP has helped make Gizmodo mobile pages 3x faster than the regular mobile website, and over 80% of Gizmodo's traffic from AMP pages is new traffic compared to under 50% of all mobile sessions. Plus, the blog has a 50% increase in impressions per page view on AMP.

TransUnion increases conversions with AMP

TransUnion had a problem of slow loading mobile pages that were causing higher bounce rates and lower mobile conversion rates compared to desktop conversion rates. The credit reporting agency wanted to create a best-in-class mobile website on their CMS, HP TeamSite to improve user experience and get the high return on investment.

TransUnion started using AMP with the hope of increasing mobile conversions at an efficient cost per order. As their website was already mobile friendly, TransUnion didn't need to redesign the content – they went online with AMP pages in a week.

The AMP pages loaded in 1.6 seconds on a 3G connection compared the non-AMP pages that loaded in 7.1 seconds. TransUnion's AMP pages quickly starting bringing 3% more conversions, bounce rate was lowered by 26% and users spent 2.5x more amount of time on the website:

Implementing AMP pages provides users with a faster mobile experience which leads to a decrease in bounce rates and an increase in conversions.

When engaging mobile visitors, creating AMP pages gives you the highest probability of engagement and conversions.

The next section will highlight the importance of AMP post-click landing pages, and how connecting optimized AMP ad post-click landing pages leads to better post-click landing page.

SECTION 5: Why you should create AMP post-click landing pages

The stats have spoken – fast loading pages lead to a lower bounce rate and higher conversions. The best way to create lightning-fast pages is with the AMP framework.

Though the AMP framework was first developed for news stories and articles, it has since then evolved to include AMP Ad post-click landing pages as well.

To ensure that mobile users experience doesn't stay restricted to websites, the AMP framework has introduced AMP Ad post-click landing pages – pages created in AMP HTML that load incredibly fast, in less than one second.

The Accelerated post-click landing page or (ALP) loads fast because of the following optimization techniques:

1. Pre-connect to post-click landing page: Typical ads don't know the URL of the actual post-click landing page. However, ads connected with ALPs always know the URL, this initiates a pre-connect request to the respective post-click landing page, and the page loads instantly.
2. Pre-fetch post-click landing pages: The non-CPU intensive resources that are visible on the first viewport of the post-click landing page are downloaded before the user clicks the ad, so the page loads instantly.
3. Using Google Cache URL: when you input a canonical destination URL for a creative, the ad server can switch it to the AMP version of the URL (with trafficker consent) using the AMP URL API. The ad server can also embed code required by the creative to pre-fetch and pre-connect to the post-click landing page. Ad servers like DoubleClick for Publishers (DFP) are integrating such features over the next couple of quarters to make trafficking of AMP post-click landing pages easy.
4. No redirects: AMP eliminates redirects to the ad server, AMP only initiates redirect requests once the user has landed on the post-click landing page. The format supports the amp-pixel component for third-party tracking redirects which can be performed on the post-click landing page.

AMP 構建的點擊後著陸頁採用該框架設計，以延續用戶在點擊移動 AMP 廣告時啟動的簡化移動體驗。

Here's how AMP Ad post-click landing pages compare to regular ad post-click landing pages:

This is how fast an ALP loads once the ad is clicked, not only that but the user can easily go back to the content they were reading before the clicked the ad:

Accelerated post-click landing pages give a better post-click landing page to visitors because:

• Users will be more willing to click on ads when they know their ad expectations will be met.
• Marketers will benefit from increased user engagement, lower bounce rate and higher conversions.
• Marketers will benefit from boosted revenue with better ads while allowing their readers a way back to their content.

Creating ALPs seems like a no-brainer when you consider the fact that Google looks at post-click landing page experience as one factor to determine ad rank, which ultimately contributes to your click-through rate.

And while publishers have embraced frameworks like AMP to speed up web content delivery on mobile devices, the marketing industry has not yet caught up. As more consumers and B2B buyers spend more time on mobile, marketers and advertisers are forced to adapt with mobile-optimized campaigns.

Businesses that are using AMP pages are already seeing massive ROI, so what's holding you back from creating Accelerated post-click landing pages?

How to create AMP pages with Instapage

In February 2018 we announced our partnership with Google to develop Accelerated Mobile Pages (AMP) functionality in the Instapage platform. They invited us to speak at their global AMP Conference where we discussed How to Balance AMP Limitations with Optimization Features.

Fast forward to May 2018 and Instapage now empowers marketers with the ability to create post-click landing pages using the AMP framework. The AMP framework allows for faster page load speeds on mobile devices, enabling you to provide a better user experience for mobile browsing.

With this new Instapage capability, digital marketers can create AMP post-click landing pages directly from our platform in a matter of minutes just by following these steps.

Step 1: Create a new page

Select AMP Page from the modal:

The next screen prompts you to name the page. This is different than the standard builder where it asks which template you wish to use (or build from scratch). AMP pages are built from scratch, so no template options are available.

Step 2: Add elements to the page

The second difference you will see is that Timer and HTML widgets are absent from the toolbar, but you still have the remaining widgets:

AMP does not support HTML/CSS or JavaScript so you won't find those settings in the Instapage AMP builder. You will, however, still see these options:

Note: Collaboration (“Comment”) and Instablocks™ are both functional within the AMP builder. Unfortunately, heatmaps and Global Blocks are not applicable.

AMP post-click landing pages have a 75KB limit, and each widget in the Instapage AMP builder is weighted. As you build a page, a validator operates in the background so that your page doesn't exceed the 75KB limit. If you reach 80% of the limit, this warning indicator appears near the bottom of the screen:

Step 3: Create a variation to A/B test

Click “Create an A/B Test” and add a new variation or import one of your own:

With the new variation, you can either duplicate, pause, rename, transfer, or delete it at any time:

Step 4: Validate the page

As you continue building and approach the 75KB limit, another indicator appears requesting you validate the page to confirm it is within acceptable limits:

Should the page pass validation, you will see this on-screen message:

完成並單擊發布後，如果超過 75KB 限制，您將收到通知：

驗證後，您的頁面就可以發布了。

第 5 步：發布

WordPress 和自定義域可以在 Instapage 中發布 AMP 點擊後登錄頁面。 單擊藍色發布按鈕後，您可以選擇任一方法：

對於 WordPress，請在您的網站上安裝並登錄 Instapage 插件，然後將您的新 AMP 點擊後登錄頁面發佈到 WordPress：

否則，請輸入您的域和子域：

頁面上線後，您將在儀表板中的頁面旁邊看到 AMP 徽標：

如果您的移動頁面由於頁面加載速度緩慢而出現高跳出率和低訪問者參與度，那麼創建 AMP 頁面是一個很好的解決方案。

AMP 框架部署的優化技術不僅有助於提高頁面速度，還可以為用戶提供令人愉悅的移動體驗。 創建 AMP 廣告點擊後登陸頁面可幫助您向訪問者提供優化、快速且相關的點擊後登陸頁面。

Instapage 是目前唯一允許您使用 Google 的 AMP 框架創建針對移動設備優化的點擊後登錄頁面的點擊後登錄頁面平台。 使用 AMP 創建的點擊後登錄頁面具有近乎即時的加載和平滑滾動。

立即開始使用 Instapage 創建 AMP 頁面，以創造更好的移動瀏覽體驗、提高質量得分並產生更多轉化。