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

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

移動優先的心態將繼續存在——這一說法在企業和消費者方面都適用。

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

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

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

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

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

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

三秒鐘。

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

網頁速度如何影響跳出率

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

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

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

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

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

考慮一下這些關於頁面加載速度的驚人發現：

• 通過 3G 連接加載移動網站的平均時間為 19 秒，而 77% 的移動網站加載時間超過 10 秒。
• 谷歌發現，網頁加載時間每增加一秒，轉化率就會降低 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 緩存自動緩存，以加快 Google 搜索的加載速度。

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

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

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

第 2 部分：AMP 是如何工作的？

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

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

自近兩年前推出以來，已有 2500 萬個域發布了超過 40 億個 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 的 Instant Articles 和 Progressive Web Apps 的比較。

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 選擇器。

AMP緩存

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

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

AMP 緩存帶有一個內置的驗證系統，可以確認頁面一定可以正常工作，並且它不依賴於可能會減慢頁面速度的外力。 驗證系統對一系列斷言進行操作，確認頁面的標記符合 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 都具有異步屬性，並且只允許內聯表，沒有 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 倍
• Instant Articles 的平均閱讀量增加 20%
• 70% 的讀者不太可能放棄即時文章

Instant Articles 幫助發布者在 Facebook 上創建快速和互動的文章。 它們為您提供以下優勢：

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

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

然而，AMP 頁面的採用率遠高於 Instant Articles，這主要是因為 Facebook 在其動態消息中越來越多地將視頻優先於文本文章。 這導致多家出版商停止使用 Instant Articles，包括紐約時報和衛報。

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

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

AMP 項目的成功在於它是一個開源計劃，而不是商業夥伴關係。 AMP 項目旨在改變出版商創建移動網頁的方式，而不是讓用戶局限於特定的應用程序，就像 Facebook 對 Instant Articles 所做的那樣。

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

自谷歌於 2015 年初推出 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 與漸進式網絡應用 (PWA)

Progressive Web Apps 是一種通過網絡交付的移動網絡應用程序，它的行為類似於本機應用程序，PWA 和本機應用程序之間的主要區別在於 PWA 不需要從 Google 或應用程序商店下載。

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

對 Progressive Web Apps 的需求源於這樣一個事實，即排名前 1,000 位的移動網站比排名前 1,000 位的本機應用程序覆蓋的人數多 4 倍。 然而，這些網站吸引用戶的時間平均比移動應用程序少 20 倍。

這實質上意味著雖然移動網站傾向於吸引訪問者但不吸引他們。

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

PWA 是：

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

當移動網絡應用程序滿足谷歌概述的必要要求時，移動網絡應用程序可以作為可下載的形式提供給用戶。

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

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

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

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

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

2. AMP 到漸進式網絡應用

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

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

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

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

華盛頓郵報展示了 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 的 Instant Articles 的比較。

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

AMP 的好處

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

AMP 為您的移動頁面提供以下優勢。

吸引觀眾

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

收入最大化

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

AMP 框架讓您可以在任何地方為用戶提供更快的體驗——包括廣告、著陸頁和網站。

保持靈活性和控制力

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

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

降低操作的複雜性

創建 AMP 頁面的過程非常簡單明了。 您可以轉換整個檔案，特別是如果您使用 CMS，包括 Drupal 和 WordPress。

您不需要具備任何特殊技能來優化每個 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 頁面加載速度如此之快的原因之一。 雖然緩存可以讓您的頁面加載得更快，但 Google Analytics 不會跟踪用戶的訪問，除非您對 GA 進行配置並對 AMP 頁面應用單獨的跟踪代碼。

下面介紹瞭如何使用 Google 跟踪代碼管理器在 Google Analytics 中跟踪 AMP 頁面。

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

下一節將重點介紹使用 AMP 實現 KPI 和提高 ROI 的企業的案例研究。

第 4 部分：AMP 成功案例

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

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

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

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

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

• 銷售轉化率提高 20%。 根據 Forrester 模型，接受本研究採訪的兩個電子商務網站進行的 A/B 測試表明，其 AMP 頁面的轉化率提高了 20%，這將帶來超過 20 萬美元的年利潤。
• AMP 網站流量同比增長 10%。 根據該模型，網站流量的增加會帶來額外的銷售額和廣告瀏覽量，這將在第一年為網站帶來超過 75,000 美元的年利潤。
• 每次訪問的頁面增加 60%。 AMP pages performed positively for e-commerce and news publishers who both said that there was a 60% increase in people coming to the site and those people spent twice as long on the site with a small increase in return visitors of 0.3%.

AMP is a relatively new format, and obviously, you have to incur some costs with its adoption. However, the payoff of implementing the AMP format outweigh the initial cost.

Gizmodo uses AMP pages to become 3x faster on mobile

Gizmodo focuses on user experience, with half of their traffic coming from their mobile website, ensuring that the website was fast and clear was essential if they wanted readers to engage with their content on mobile.

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 landing pages, and how connecting optimized AMP ad landing pages leads to better post-click landing page.

SECTION 5: Why you should create AMP 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 landing pages as well.

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

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

1. Pre-connect to landing page: Typical ads don't know the URL of the actual landing page. However, ads connected with ALPs always know the URL, this initiates a pre-connect request to the respective landing page, and the page loads instantly.
2. Pre-fetch landing pages: The non-CPU intensive resources that are visible on the first viewport of the 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 landing page. Ad servers like DoubleClick for Publishers (DFP) are integrating such features over the next couple of quarters to make trafficking of AMP 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 landing page. The format supports the amp-pixel component for third-party tracking redirects which can be performed on the landing page.

AMP-constructed landing pages are designed with the framework to continue the streamlined mobile experience that users initiate when clicking on a mobile AMP ad.

Here's how AMP Ad landing pages compare to regular ad 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 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 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 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 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 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:

After you finish and click Publish, you will be notified if you exceed the 75KB limit:

Once validated, your page is ready to publish.

第 5 步：發布

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

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

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

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

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

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

Instapage 是目前唯一允許您使用 Google 的 AMP 框架創建針對移動設備優化的著陸頁的著陸頁平台。使用 AMP 創建的著陸頁具有近乎即時的加載和流暢的滾動。

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