Google的AMP:有趣且用戶友好的加速移動頁面指南

已發表: 2020-11-25

觀看視頻。 忽略副本。

這是我對您的建議,一旦您登陸專門用於新的“加速的移動網頁(AMP)”項目的Google網站:

“加速的移動頁面(AMP)項目是一個開源計劃,體現了願景,即發布者可以創建一次移動優化內容,並立即將其加載到任何地方。”

如果您不是開發人員,但閱讀了副本,則會被行話吞噬。

但是,觀看視頻,您幾乎會立即了解AMP的全部含義(更不用說有趣的Spinal Tap參考,請參見下文)。

或者,您也可以只閱讀本指南,因為它將是您有史以來關於AMP及其對您的內容營銷產生的最大影響。

我承諾。

什麼是Google的AMP項目?

自Google的“零關鍵時刻”哲學於2011年誕生以來,他們就想“大幅提高移動網絡的性能”已經不是什麼秘密了。

而且,我可能不需要告訴您,移動網絡上的內容性能存在一個小問題。

您可能有移動設備。 而且很可能是您從搜索結果頁面,社交媒體網站或電子郵件收件箱中單擊了該設備上的鏈接……渴望消費內容。

但是它永遠不會來。

好吧,它來了,但是在頁面加載時出現了混亂的拼湊,混亂的圖像,視頻和廣告。 您驚恐地看著,眼睛散開,在地鐵座位上蹦蹦跳跳,就像要去洗手間的人一樣。

“這需要多長時間?” 你特別沒有人哭。

誰知道,但您永遠也找不到,因為像40%的人口一樣,您會在3秒內在加載頁面上保釋。 然後,您會說,就像我的黑貓Apollo Monkeystrap一樣,“嘆氣”。

Google希望通過AMP消除這種難以忍受的移動時刻。

AMP使您的頁面多快?

從1到10的比例,其中一個“根本沒有加載”,有十個“在一秒鐘內加載”,AMP內容將以11的頁面速度加載。(這是我警告過您的Spinal Tap參考)。

但是說真的,有多快?

Pinterest的軟件工程師Jon Parise說:“與傳統的針對移動設備優化的網頁相比,“加速的移動頁面”的加載速度快四倍,使用的數據量少八倍。”

快四倍是好的! 但是,這對我們友好的地鐵通勤人員試圖在他的手機上下載網頁對您意味著什麼?

根據NiemanLab的說法,AMP對《紐約時報》進行了優化的文章完全在2.99秒內在移動設備上下載。 為了進行比較,在快速的iMac上的Chrome中進行的測試中,該頁面的桌面版花費了3.82秒(移動版更快)。

如果您不知道,NYTimes.com就是土星這一邊加載速度最慢的移動新聞網站之一。

此後,他們已修復該問題。

您確定速度足夠快嗎?

但是,您說,等等,2.99秒仍在我們的地鐵通勤者願意等待的時間範圍的上游。 他像40%的人口一樣,在3秒內保釋。 2.99秒將它切近了! 沒有太大的改善。

沒錯,但是區別在於,在台式機上的第一個非AMP方案中,頁面仍在3秒後加載。 在該方案的AMP版本中,它已在2.99中完全下載

更重要的是,AMP版本在0.857秒內達到了“ domContentLoaded –網頁加載的關鍵點,HTML完全下載並且某些重要的解析已完成”。

眨眼大約需要0.33秒。

換句話說,眨眼兩次,借助AMP,您的地鐵通勤者幾乎可以立即開始閱讀內容的有用部分。

是什麼讓傳統的移動頁面加載如此緩慢?

我想我知道,但是由於我不是開發人員,設計師或程序員(甚至不確定這些學科是否不同),所以我在Rainmaker Digital的Mike Hale選拔了一位開發人員來幫助我進行翻譯。

邁克說,當桌面站點進入移動瀏覽器時,您通常會從不同的主機將數十個信息包“調用”到移動瀏覽器中。

在上面的舊的,緩慢的《紐約時報》示例中,一篇文章可能有“ 192個請求,其中一些請求發送給Times的主機,大多數請求是其他許多託管大量腳本的服務器的請求。”

單擊後,最有用的部分將在5秒鐘內下載,但其餘部分仍會進入,這就是為什麼屏幕隨著瀏覽器的設置而跳動然後復位的原因。

我仍然迷失了,我向邁克施壓,“但是要求什麼呢?! 什麼是被稱為?!“

Mike告訴我,您的手機可能正在調用社交插件,圖像輪播,SlideShares和視頻的腳本。 然後可能在後台運行分析軟件,廣告和跟踪腳本。

明智的日常事物,但它們加起來。 又快

問題在於您的移動設備根本沒有處理能力來快速消除這種情況。

下圖說明了移動內容的問題

想像一下,如果您去銀行,走到出納員那裡,要了100美元,但順序卻很奇怪:十五張一美元的鈔票,三張五美元的鈔票,五張十美元的鈔票和一張二十美元的鈔票。

如果銀行現在像移動網絡一樣運作,那麼出納員會進行多次旅行,分別給您每個賬單。

這些旅行的每一次都是一次“呼喚”。

但是,如果使用AMP對銀行進行了優化,出納員會立即給您所有賬單。 此外,他可能會忽略您對某些帳單的特定要求,而只提交一百美元的帳單。

AMP旨在簡化瀏覽器的要求。

“唯一可以調用的腳本是AMP javascript,” Mike說。 “所有東西都包裹在一起。 我馬上把一切都交給你。”

以下是Yoast描述AMP移動內容的方式:

“讓我們將其與賽車進行比較。 如果要使賽車更快,可以給它提供更快的引擎,並減輕所有的重量。 在此減肥過程中,您還需要卸下後座,空調等物品。AMP與此不同。 它是普通網絡的精簡版,因為Google關心速度而不是漂亮功能。”

在最後一行感覺到那種痛苦的刺痛? 這不是你的想像力。 稍後我們將解決這個問題。 首先,讓我們看一下AMP的經驗,以幫助您了解我的意思。

AMP優化的移動內容是什麼樣的?

幸運的是,您可以測試AMP新聞內容的演示。

  1. 挑出您的智能手機。
  2. 打開瀏覽器(任何瀏覽器)。
  3. 輸入g.co/ampdemo。
  4. 在Google搜索框中輸入諸如“賈斯汀·比伯誕辰”,“珍妮弗·勞倫斯”或“小野洋子”之類的熱門關鍵字詞組。
  5. 點擊“發送”。

這是結果外觀的一個示例:

如您所見,AMP內容獲得了最高的收入。 它位於折疊上方的轉盤中。 標準條目位於其下方。

您可以滾動瀏覽該輪播,然後在找到自己喜歡的AMP支持的文章時,單擊它。 它是這樣的:

有趣的閱讀,!

Google為什麼要這樣做,您應該注意嗎? (有點)

這就是奇怪的地方。

正如我上面提到的,過去五年來Google一直致力於移動網絡性能的優化,這就是為什麼我們一直在寫非常快的網站速度的重要性的原因(該文章中有六種工具可以測試您的網站速度,順便說一句)。

這就是為什麼我們去年就Google移動更新“ Mobilegeddon”向您發出警告的原因。

因此,在這一點上,AMP有點像Google專注於移動網絡優化的巔峰之作,但是它如何幫助發布商呢?

聽起來很簡單,但Google認為:用戶喜歡內容。 他們喜歡快速的內容。 分發快速內容的速度越快,可以消耗的內容就越多。

不過,此舉還有其他方面:Google試圖贏得新聞消費大戰。

AMP與Instant Articles和Apple News有何不同?

去年,Apple和Facebook都發布了允許用戶消費新聞文章的應用程序:Apple News和Instant Articles。

這兩個應用程序都是獨立產品。

Adobe XD團隊的高級經驗開發工程師Christian Cantrell在Smashing Magazine上寫道:“它們本質上是花哨的新聞聚合器,具有基於專有聯合格式的自定義渲染器。”

換句話說,Instant Articles和Apple News都重生了RSS。

另一方面,Google尋求直接與發布商聯繫,並讓他們優化移動內容以在開放的Web上消費,從而可以輕鬆輸入和輕鬆分發,這是您在應用程序中無法獲得的。

到目前為止,一些知名新聞出版商已參與其中:

  • 時代公司
  • 大西洋組織
  • 沃克斯
  • 英國廣播公司
  • 赫芬頓郵報

WordPress,Twitter,Adobe Analytics,Chartbeat,LinkedIn和Pinterest等許多技術公司也加入了。

關於AMP的兩個常見抱怨

投訴至少有兩種:

  1. 批評者討厭移動內容可以做什麼。
  2. 批評者感嘆小出版商將受到懲罰。

酵母菌屬於第一類。 Joost de Valk寫道:“ AMP限制了HTML頁面中的功能。 花哨的設計被剝奪了速度。 AMP很大程度上是表單項目的功能。”

請注意,不僅外觀受到了影響-開箱即用,AMP不支持表格,這意味著AMP頁面不會幫助您增加電子郵件列表。 有可用的技術解決方法,但是這種情況仍然太新以至於無法看到它們將如何發展。

您會注意到大多數大型發行商都在使用AMP,但這是否意味著AMP傷害了較小的發行商?

Search Engine Land的Paul Shapiro這樣說:

“儘管經驗豐富的開發人員通常可以通過密集的性能優化來獲得相似的結果,但是由於資源的限制,發布者常常忽略了這一點。 AMP可以輕鬆實現這些優化,而無需改變主要的移動網絡體驗。”

AMP可能被證明是優化移動體驗的可靠工具。 那你應該AMP嗎?

誰應該擔心AMP?

這取決於。

  • 您是新聞的巨型出版商嗎? 然後恐慌,除非您已經有了針對移動用戶體驗的可靠策略。 您應該在幾個月前就已經擁有了,但是,嘿。
  • 您從移動設備獲得大量流量來源嗎? 再次,您需要確保您的移動體驗戰略牢不可破。 您可能希望觀察並了解AMP的發展,但值得進行一些實驗。
  • 您是否在競爭不激烈的新市場中? 在接下來的30天內將您的移動內容優化為重點,但不要驚慌。
  • 不屬於上述任何類別嗎? 然後坐在您的手上,監視發生的情況。

我們的首席產品官兼StudioPress創始人Brian Gardner告訴我:“絕對有一件事情需要發行商關注。” “但我猜測這將在一段時間內成為一項不穩定的交易。”

誰知道? 可能會有更簡單的方法來完成所有這些工作-WordPress內容管理諮詢公司10up的總裁兼創始人Jake Goldman還建議:

“考慮到時間,我們懷疑AMP最終將變得像'不受限制'的HTML一樣複雜,或者由於移動硬件,寬帶速度和標準化隱私功能的進步而變得毫無意義–解決了我們不再存在的問題。

但是,假設您確實想和AMP一起玩。

如何創建您的第一個AMP頁面

在這裡,您可以拉大男孩/女孩開發者的褲子,因為使用AMP需要一些基本的標記。

我建議您通過本基本教程來完成工作。 它將教您如何:

  • 使用樣板代碼創建您的第一個AMP頁面。
  • 上演它。
  • 使用Google的驗證器驗證它是否符合AMP要求(這是非常重要的一步)。
  • 準備發布和分發。

在標記中,您會看到一些元素帶有AMP標籤。 因此,<img>標記變為<amp-img>。 <anim>標籤變為<amp-anim>。 <video>標籤變為<amp-video>。

等等。

WordPress用戶應該怎麼做?

如果您想嘗試AMP,那就很幸運。

2016年2月24日,Automattic發布了正式的AMP插件。 因此,WordPress用戶只是遠離AMP優化內容的可下載插件。

但是請記住這一點:根據官方AMP插件頁面,該插件不支持頁面或檔案。 只是帖子。

但是,一旦激活插件bam,您的所有帖子都會自動放大!

激活插件後,您網站上的所有帖子都會動態生成與AMP兼容的版本。

您可以通過在網址末尾添加“ / amp”來查看網絡帖子的AMP版本。 例如, yourwebsite.com / amp-wicked-fast的AMP版本將變成yourwebsite.com/amp-wicked-fast/amp。

如果您是Rainmaker Platform客戶:我們在雷達屏幕上安裝了AMP。 鑑於Google經歷了驚人的180度周轉,我們將不著急。 但是,如果AMP在將來確實很重要,我們將為用戶提供簡單的AMP解決方案。

AMP是搜索排名因素嗎?

沒有。

Google的John Mueller表示AMP不是排名因素。 他確實說過:“將頁面轉換為AMP格式將滿足對移動設備友好的排名信號,但沒有排名信號僅與AMP相關聯。”

搜索引擎雜誌的資深作者Matt Southern指出:

“我的問題是,如果AMP是排名信號,或者如果AMP內容已經在首頁頂部具有單程票證,那有什麼關係? 在大多數情況下,AMP內容的排名已經超過自然結果,這是人們可以要求的最大排名提升之一。”

因此,走出去並在移動內容遊戲中領先於競爭對手是有優勢的-在本週五白板視頻中,蒸餾出的人們揮舞著一根胡蘿蔔。

我建議您觀看Whiteboard Friday視頻的另一個原因是Distilled的員工感到困惑,這是AMP提供的另一個重要區別:通過緩存服務器實現超快速交付。

Distilled研發主管湯姆·安東尼(Tom Anthony)說:

“然後,所有這些都被設計為真正被大量緩存,以便Google可以託管這些頁面,在此處託管您的實際內容,因此它們甚至不再需要從您那裡獲取它。”

只是出於笑容,這就是Google Blog關於其新的緩存方法必須說的:

“因此,作為這項工作的一部分,我們設計了一種新的緩存方法,該方法允許發布者繼續託管其內容,同時允許通過Google的高性能全局緩存進行有效分發。 我們打算開放我們的緩存服務器,任何人都可以免費使用。”

我喜歡自由。

AMP是否會影響您的廣告?

不應該這樣

Google表示:“我們希望支持各種廣告格式,廣告網絡和技術。 任何使用AMP HTML的網站都將保留其選擇的廣告網絡以及任何不會影響用戶體驗的格式。”

如果您想知道,以下是Google AMP Project官方網站上支持的廣告網絡的列表:

  • A9
  • 廣告形式
  • AdReactor
  • AdSense廣告
  • AdTech
  • 點與媒體
  • 雙擊
  • Flite
  • 普拉斯塔
  • 智能AdServer
  • 耶德莫
  • 轉載

順便說一句,我認為AMP的目的還在於緩解發布商對越來越多采用廣告攔截器的擔憂。 但這是另一回事了。 我們可能應該總結一下。

交給你...

哇。 我們在這裡覆蓋了很多領域。

謝謝你堅持我。 希望您覺得這很有用,我回答了您有關Google AMP項目的所有問題。

如果沒有,請在下面的評論中給我留言。 另外,如果您有什麼要補充的內容,或者如果我錯過了什麼,請發表評論。

無論哪種方式,我都希望收到您的來信。