改善用戶體驗的 9 個最新 Amp 更新

自從谷歌在 2015 年宣布推出 AMP 以提高頁面加載速度並增強整體移動用戶體驗以來，開源框架的受歡迎程度一直在持續增長。

不僅如此，該框架還進行了重大更新，以支持大量頁面元素、更好的功能和選項以及改進的界面——所有這些都是為了繼續改善用戶體驗。

以下是一些最新的 AMP 更新。

您可能還不知道的 9 個 AMP 更新

一、簽約交流

當 AMP 誕生時，谷歌做出了權衡以提供保護隱私的即時加載網絡內容。 一是地址欄中顯示的 URL 以“google.com/amp”開頭，而不是發布商的域：

這是 AMP 最突出的批評之一。 企業不希望谷歌顯示 AMP URL 來代替內容實際來自的域，因為域名對於品牌和發佈內容至關重要。

2019 年 4 月，谷歌宣布了一項解決方案——一種在顯示內容原始 URL 的同時仍保留即時加載功能的方法。 該解決方案是簽名交換。

谷歌聲明：

簽名交換是一種文件格式，在 Web 打包規範中定義，它允許瀏覽器信任文檔，就好像它屬於您的來源一樣。 這允許您使用第一方 cookie 和存儲來自定義內容並簡化分析集成。

不過，最重要的是，當人們使用 Google 搜索並點擊 AMP 鏈接而不是“http//google.com/amp”鏈接時，signed exchange 會顯示發布商的真實網址：

這很重要，原因有二：

1. 域名是品牌標識的核心部分
2. 使用您自己的 URL 更容易獲得 AMP 分析

（注意：Google 僅在發布者、瀏覽器和搜索上下文都支持時鏈接到已簽署的交換。這意味著您需要同時發佈內容的已簽署交換版本和未簽署交換版本。）

2.服務端渲染（SSR）

服務器端呈現 (SSR) 是一種可應用於 AMP 頁面的技術，可使它們的加載速度更快——事實上，速度最多可提高 50%。

SSR 的工作原理是改進呈現頁面客戶端的框架的首次內容繪製時間 (FCP)。 客戶端呈現的缺點是需要先下載呈現頁面所需的所有 JavaScript，這會延遲頁面內容加載時間並可能增加跳出率。

作為一種解決方案，AMP SSR 刪除了 AMP 樣板代碼並在服務器上呈現頁面佈局。

（注意：AMP 樣板代碼的存在是為了防止頁面加載期間內容跳轉，隱藏內容直到 AMP 框架被下載並建立頁面佈局。這就是為什麼 AMP 頁面會遇到與其他客戶端框架相同的問題——渲染是在下載 JavaScript 之前被阻止。）

通過刪除樣板代碼，AMP SSR 使 FCP 時間加快了 50%。

SSR 的 AMP 優化違反了 AMP 規範的規則，這使得文檔無效。 但是，只要在設置期間用標誌指示，AMP 驗證器仍會將 SSR 的 AMP 視為有效 AMP。

目前，有兩種工具可用於 AMP SSR：

1. AMP Optimizer — 用於生成優化 AMP 的 NodeJs 庫
2. AMP Packager — Ago 命令行工具，可用於服務簽名交換

3.輸入屏蔽

在線填寫表格可能會非常麻煩，以至於他們會阻止用戶這樣做。 在屏幕較小且導航更困難的移動設備上更是如此。 但如您所知，表格對於收集潛在客戶和完成銷售至關重要。

為了幫助簡化表單填寫過程並提高時效性，AMP 啟用了輸入屏蔽。 此功能允許開發人員添加空格和間隙字符等格式，這在用戶填寫日期、付款明細、電話號碼等時特別方便：

隨著越來越多的人在當今的數字世界中在線提交他們的信息，擁有一個更簡單、更快的系統可以使一切變得不同。

4. 視頻優化

引入了多項視頻改進以增加 AMP 的諸多優勢。

對接
如果未正確實施優化，移動網頁上的視頻通常會遮擋用戶的視線。 這很容易導致糟糕的用戶體驗，並阻止他們查看任何未來的內容。

這個新的停靠屬性最小化了用戶向下滾動頁面時當前正在觀看的視頻，允許他們同時觀看內容和視頻，沒有任何阻礙：

您還可以自定義視頻停靠的位置和方式，以找到向用戶展示視頻的最佳方式。

視頻播放器
另一個新更新是 <amp-video-iframe>，它允許您安裝一個定制的視頻播放器，其中包括您可能需要的所有 AMP 視頻接口功能（自動播放、停靠等）

視頻廣告
視頻廣告也可以集成和優化到 AMP 中——來自任何支持 IMA SDK 的視頻廣告網絡，這樣您就可以跟踪廣告和收入。

5.優化列表

AMP 最近添加了兩個新組件來優化網頁上的列表：

調整大小
<amp-list> 允許您指定何時希望列表容器根據用戶交互調整大小，以更好地適應不同類型的內容（例如，當 <amp-list> 包含用戶點擊的 <amp-accordion> ).

無限滾動
無限滾動現在可用，因此當用戶到達項目列表（搜索結果、產品卡片等）的末尾時，列表會自動填充更多項目：

這使用戶可以從單個頁面無縫訪問更多內容，而不必單擊“下一步”按鈕並訪問另一個列表頁面。

6.第三方集成

Cookies和數據收集是品牌記錄用戶信息必不可少的。 然而，隨著 GDPR 的頒布，有關數據同意和隱私的規則在所有網站上變得更加嚴格和規範。 這導致許多發布商依賴第三方同意管理平台 (CMP) 來收集符合 GDPR 的數據。

考慮到這一點，AMP 推出了 <amp-consent>，因此 CMP 可以輕鬆地與 AMP 集成。 這意味著，支持 AMP 的網站現在可以繼續使用 CMP 來收集和管理用戶數據，而不會出現兼容性問題。 他們還可以集成數據同意 UI 並在用戶提供信息之前提示用戶。

7.燈箱模式

通過燈箱查看圖像——展開元素以填滿屏幕直到用戶再次關閉它越來越普遍。 然而，開發人員可能很難順利過渡到燈箱模式，因為它涉及在不同位置和大小的兩個圖像之間進行插值。

這導致 AMP UI 工作組優化燈箱轉換並提高圖像可見性：

現在，<amp-lightbox-gallery> 為廣告商提供了嘗試網站不同尺寸並優化他們希望用戶查看圖片的方式的機會。

8. 自定義 JavaScript 的可用性

Google AMP 的最新更新之一是 <amp-script> 的可用性——提供在單獨的工作線程中運行 JavaScript 的選項，這樣廣告商就可以將自定義 JavaScript 添加到他們的 AMP 頁面，同時仍然保持其快速加載速度。

新的 <amp-script> 可讓您涵蓋以前存在的 AMP 組件無法實現的用例。 它還允許您在 AMP 和非 AMP 頁面之間共享代碼，並使用 JavaScript 框架。

AMP 團隊為 <amp-script> 構建的一些示例包括：

• 使用 Vue 的 Todo MVC
• 密碼檢查器
• 使用 D3.js 的文章中的數據可視化
• 多頁表單，其中每個部分都需要在繼續下一部分之前進行驗證：

不過，為了保持 AMP 的性能保證，有一些限制條件：

• 內容跳轉——為避免意外的內容跳轉，<amp-script> 需要用戶交互來更改頁面內容。
• 頁面加載- 由於 <amp-script> 不會在沒有用戶交互的情況下更改頁面內容，因此它也不會在頁面加載時修改內容。
• 腳本大小— 單個 <amp-script> 中使用的腳本必須小於 150kB。
• API 支持——並非所有 API 在 Web Worker 中都受支持，一些 DOM 方法和屬性尚未實現

（注意：<amp-script> 與您可能已經在使用的框架兼容，例如 React、Preact、Angular、Vue.js、jQuery 和 D3.js。）

9.AMP 工具箱

AMP 工具箱是命令行工具和 JS API 的集合，用於簡化 AMP 頁面發布。 工具箱中的每個工具都可以單獨下載和使用：

AMP CLI
適用於 AMP 工具箱中包含的大多數功能的命令行界面，可通過 NPM 在全球範圍內安裝。

AMP 棉絨
新的工具箱 linter 會檢查您的 AMP 文檔是否存在常見錯誤和最佳做法。

AMP 優化器
AMP Optimizer 服務器端通過實施 AMP 性能最佳實踐來增強 AMP 頁面的呈現性能。

AMP 緩存網址
檢查 AMP 頁面是否適用於所有 AMP 緩存是個好主意，您可以使用 toolbox-cache-url 組件來執行此操作，因為它將原始 URL 轉換為 AMP 緩存 URL 格式。

AMP 緩存列表
這提供了所有官方 AMP 緩存的列表，這在快速更新 AMP 文檔或從 AMP 緩存中刪除 AMP 文檔時非常有用。

擴音器
許多 AMP 組件（例如 amp-list 或 amp-state）通過使用 CORS 請求來利用遠程端點。 AMP CORS 是一個連接/快速中間件，它將自動添加您的 AMP 頁面所需的所有 CORS 標頭。

AMP 驗證規則
這只是一個用於查詢 AMP 驗證程序規則的 JavaScript 庫。

獲取 Instapage AMP 點擊後登陸頁面演示

由於 AMP 在移動優化中變得司空見慣，像這樣的持續更新對開發者、出版商和廣告商來說至關重要且有益。 上述最新更新都非常適合改善用戶體驗，並為品牌提供更多選項來進行試驗和測試，以增強其網站的功能和頁面參與度。

對於 AMP 廣告點擊後體驗，獲取自定義的 Instapage AMP 演示，了解如何使用對設計人員友好的構建器、內置驗證器、高級分析等，在幾分鐘內創建快速加載的頁面。