使用 Google AMP 讓您的 WordPress 網站的移動頁面加載更快

為什麼頁面速度很重要

如果像我們數十億人一樣，您最近在移動設備上消費過 Web 內容，您會注意到體驗可以得到改善。 閱讀新聞文章通常非常緩慢，頁面需要很長時間才能加載。 即使在頁面上加載文本後，頁面仍會在幾秒鐘內繼續加載，因為廣告、跟踪 javascript 和圖像被下載。
移動應用程序讓我們習慣了快速加載內容、離線查看和快速界面。 但從字面上看，移動網站往往落後。 對於新聞和博客網站尤其如此，它們使用許多小部件進行廣告、分析、共享和評論。 您可以通過在 iOS 設備上安裝內容攔截器並註意到速度提高來輕鬆測試這一點。
當然，您可以使用響應式主題來緩解一些問題，但響應式設計不處理頁面加載性能。 大多數時候，響應式是問題的根源：我們設計的網站能夠適應多種不同分辨率的顯示器，但我們未能為最小的顯示器、較低的 CPU 性能和最慢的連接創建優化的體驗。 使用響應式設計，當頁面在移動設備上呈現時，所有桌面資產和功能仍會加載，通常會導致性能不佳。 據 Facebook 稱，移動設備上一篇新聞文章的平均加載時間為 8 秒。
雖然我們中的一些人很幸運能夠在我們的智能手機上擁有 3G 或 4G 網絡連接，但您只需要離開城市中心，網絡速度就會急劇下降。 當然，還有來自發展中國家的“下一個十億”人和設備進行連接，這些國家還沒有快速網絡連接。
幸運的是，事情正朝著正確的方向發展，所有大公司都在努力加快移動設備上的內容加載速度。 Facebook 推出了 Instant Articles，這是一種快速加載網絡內容的解決方案，但僅限於他們的圍牆花園。 蘋果推出了自己的新聞應用程序。 Google 推出了 AMP（Accelerated Mobile Pages），這是一項與 Facebook 目的相似但採用開放標準方法的舉措。
WordPress 最近宣布，他們以免費插件的形式在 WordPress.com 和 WordPress.org 網站上增加了對 Google Accelerated Mobile Pages (AMP) 的支持。
因此，讓我們看看如何將 AMP 添加到您的 WordPress.org 博客或新聞網站，並從最新技術中受益，從而加快您在移動設備上的網站速度。

什麼是谷歌 AMP？

Google 的 AMP 承諾是讓您的網頁在移動設備上立即加載。 它解決了移動互聯網最後剩下的問題之一。 儘管每個人都在使用它，但移動互聯網的速度卻出奇的慢。 AMP 通過限制頁面上的數字功能、剝離設計功能以提高速度來解決此問題。 谷歌聲稱 AMP 的加載速度比普通網頁快 85%。
AMP 為您的網站創建一個特殊的移動視圖。 這個新的移動網站為受支持的客戶端（例如 Google 移動搜索和 Chrome）增強了您的內容。 這個新視圖是對您已有的常規和移動網站的補充。 在此視圖下，您的頁面看起來像普通網頁，但除了內容之外的所有內容都被刪除了。 因此，您需要確保您的 WordPress 網站已準備好

AMP 如何工作？

AMP HTML 本質上是 HTML 的子集，只允許使用特定的 JavaScript 元素。 重點是加快內容繁重的網站（例如新聞網站和博客）的加載速度。 雖然它嚴重限制了 Javascript，但它確實允許在您的頁面上使用特定的分析和廣告元素，使其成為新聞出版商的一個不錯的選擇。
為了創建新的移動視圖，AMP 使用了三個主要元素：

• AMP HTML – HTML 的這個子集添加了一些自定義標籤和屬性，具有許多限制，允許 AMP 客戶端以您想要的方式呈現您的內容，而無需擔心性能。 該插件會自動將這些新標籤添加到您的頁面，但如果需要，您可以在自己的 AMP 特定模板中使用它們。
• AMP JS – 這個 JavaScript 框架是為管理資源處理和異步加載的移動頁面而設計的，這些資源處理和異步加載使 AMP 進程正常工作。 請注意，您不能在 AMP 網頁上使用任何第三方 JavaScript。
• AMP CDN – AMP 提供了一個可選的內容交付網絡，可以進一步緩存和優化您的 AMP 頁面。

安裝 AMP

您需要先安裝插件，然後才能在 WordPress 網站上使用 AMP。 如果您使用的是 WordPress.com，那麼您已經可以使用它。

官方插件

雖然您可以在 WordPress 插件商店中找到官方 AMP 插件，但您只能在項目的Github 站點上找到最新版本。 因此，您可以做出選擇。
通過 WordPress 安裝插件是最快的。 您只需在插件 WordPress 管理面板的“添加新”部分中搜索 amp-wp。 然後，您只需單擊安裝，然後激活即可開始在您的網站上使用 AMP。
如果出於任何原因需要最新版本，則必須手動安裝插件。 下載 Github 包後，您只需在“添加新”插件面板中單擊“上傳插件”。 只需找到包含該包的 zip 文件，然後讓 WordPress 從那裡獲取內容。 上傳完成後，您只需激活插件即可開始使用它。

PageFrog 和其他 AMP 插件

官方插件直接來自 Google 的 AMP 項目團隊，使其成為最新版本的 AMP。 它會為每個頁面創建一個 /amp/ 版本並發布您擁有的內容。 您只需將 /amp/ 添加到 URls 的末尾即可自己查看它們。
但是，您無法編輯這些 AMP 頁面。 如果您需要的不僅僅是基本插件為您提供的東西，您將需要其他 AMP 插件之一，例如 PageFrog。
PageFrog 建立在核心 AMP 插件之上，允許您編輯它所做的一些更改。 它甚至可以讓您添加一些樣式和主題功能，以及其他協議，例如 Facebook 的 Instant Articles。 您可以在 WordPress 插件商店中找到 PageFrog 和其他一些 AMP 插件。

為 AMP 配置 WordPress 站點

激活插件後，您就完成了。 對於大多數安裝，您只需要像往常一樣創建內容，插件會處理其餘的事情。 但請注意，您的 Google Analytics（分析）代碼等內容不會在您的 AMP 頁面上開箱即用。 通讀以了解如何將分析和 SEO 功能添加到新的 AMP 頁面。 .

將 Google Analytics 添加到您的 AMP 頁面

如果您的移動頁面也需要這些功能，則必須手動將它們添加到插件的 single.php 頁面模板中。
為此，您必須單擊插件列表中 AMP 插件名稱旁邊的編輯選項。 從那裡，您只需單擊 single.php 鏈接即可開始編輯它。 請注意，您可能必須在每次更新插件時重做此操作。

SEO 插件和 AMP

由於您的 AMP 頁面不包含任何 SEO 功能，因此您將需要一個新的兼容 AMP 的 SEO 插件。
幸運的是，大多數 SEO 插件開發人員都擁有或將擁有您可以使用的 AMP 擴展。 您必須單獨安裝它們，但您需要它們來確保您的所有頁面都有助於改善您網站的 SEO。
截至本文為止，只有三個 SEO WordPress 插件發布了 AMP 擴展或更新。

• Glue for Yoast SEO – 為 Yoast SEO WordPress 插件添加 AMP 支持
• Schema App Structured Data – 帶有來自 schema.org 的 AMP 的 SEO 模式插件
• WP SEO Structured Data Schema – 來自堪薩斯城 SEO 的帶有 AMP 的 SEO 模式插件

修復任何錯誤

與添加到您網站的任何內容一樣，您希望測試 AMP 頁面是否存在錯誤和不一致，並進行更正。
AMP 仍在不斷發展，許多功能可能仍然存在錯誤。 在公開 AMP 頁面之前，您必須手動修復模板文件中的這些錯誤。 請記住，您可能必須在每次更新插件時重新進行編輯，以防發生任何變化。

在您的 AMP 網頁上投放廣告

AMP HTML 不允許使用 JavaScript，因此無法直接嵌入廣告——相反，它們存在於沙盒 iframe 中，無法訪問主要文章內容。
谷歌設計的 AMP 允許某些類型的廣告通過。 您只需要與 AMP 兼容的廣告插件版本。 您可以在AMP Github 頁面上找到這些兼容插件的完整列表。
當前支持的廣告提供商包括以下內容：

• A9
• 反應器
• AdSense
• 廣告技術
• 雙擊

AMP 還是移動應用程序？

雖然 AMP 在某些情況下可以幫助加快您網站的文章頁面的速度，但它並不適用於所有情況和所有設備。 不僅如此，它還對你可以在你的頁面上運行什麼樣的分析（沒有 js！）和廣告有很大的限制。
AMP 可以成為來自搜索的流量的有效解決方案，但您最忠實的讀者呢？
對於那些，我相信一個應用程序仍然很有意義，這取決於你的受眾的類型和規模。 即使 AMP 或 Instant Articles 無法提供，應用程序仍然可以提供許多好處：內容交付和通過推送通知重新激活、內容緩存和離線使用、在應用程序商店中的存在，更重要的是，用戶的主屏幕。
因此，如果您正在尋找一個平台，該平台將幫助您隨著時間的推移推動增長，同時保留對內容的控制權以及用於廣告和分析的移動特定選項，那麼請考慮發布您自己的應用程序。 如果您在新聞或博客網站上使用 WordPress，那麼我們可能會在MobiLoud為您提供合適的解決方案。