目前有 230 位成員在線上
目前有 230 位成員在線上
Google官方佈告欄
star_border

Google AMP 行動網站加速計劃 技術介紹+學習資料

        大家都知道在這個速度優先的互聯網時代,速度就是王道。据統計,40%的人会放弃使用加载时间超过3秒的网站。尤其是行動網站,速度越快就代表您的收益越高。為此 Google 官方特別推薦 AMP 技術為您的業務加油提速。那到底什麼是 AMP ,如何使用 AMP, 請看下面的懶人包從頭為您講解什麼是AMP。您還可以點擊這裡,回顧我們往期關於提升行動網站速度的線上課程。

 

為什麼用 AMP?

        您有這樣的經歷嗎?您正在車站無聊地等待巴士,巴士都要開走了,您的網頁還沒有加載成功,或者只出現了一個商品推銷的廣告。這種經歷對於使用者和內容發佈者來說這都是惡夢。據統計,40%的人會放棄使用加載時間超過3秒的網站。這意味著使用者失去了閱讀優秀內容的機會,內容發佈者錯過了展示更多好的內容的機會,還可能因為使用者安裝的廣告過濾插件對主要收入來源造成影響。為了解決這個問題,Google 開發出了一個簡潔的網頁製作方法,既不用花費網頁開發者過多精力,又能讓使用者擁有流暢的閱讀體驗。它,就是 AMP。

 

什麼是 AMP(Accelerated Mobile Pages)?

          Accelerated Mobile Pages (AMP) 是一種根據開放原始碼規格所設計的網頁。透過 AMP 製作技術,您能夠大大縮短靜態內容的渲染時間從而有效提升網頁效能。AMP 包括三個部分:分別是AMP HTML,AMP JS以及Google AMP Cache。下面詳細介紹這三個組成部分。 

AMP HTML

         AMP HTML 本質就是HTML,為了取得更穩定的效能,對原本HTML的使用做了一些限制,同時增添了一些有特定功能的 AMP HTML 標簽。如下就是一個最簡單的AMP HTML 範例:

AMP JS

         AMP JS 庫集合了所有AMP的操作實例。AMP JS 的主要作用是讓您有效地管理資源載入並提供上述的客製化標簽。最佳化操作的最大的一個好處就是讓外部資源按照不同的順序加載 (異步載入),使得頁面的主要內容優先被載入。此外還包括其他的性能優化科技, 比如對 iframe 的沙盒處理 (sandboxing), 在資源加載完成前對頁面元素作布局預處理, 禁用慢的 CSS 選擇器等。更多關於最佳化的操作可點擊此處,特定的AMP HTML標籤可參考這裡

Google AMP Cache (可選)

        Google AMP Cache (AMP 緩存)是一個基於代理機制的內容分發網絡 (CDN),它會分發所有合格的 AMP 文件。它會抓取 AMP 頁面並進行緩存,然後自動改進頁面的性能。Google AMP Cache在工作的時候,從頁面、JS文件到圖片等都是從同一個源載入,並且使用HTTP 2.0 來最佳化其性能。
        這個緩存機制還附帶一個內建的驗證系統,以確保您的網站不受外部資源的限制,能隨時隨地正常運行。它能自動驗證您的網頁標記語言是否符合 AMP HTML 的特定要求。另一種驗證機制是綁定在每個單獨的 AMP 頁面上的。載入頁面時,它能直接將錯誤發送到瀏覽器的控制台上,這樣您就能直接看到您所寫的代碼給用戶帶來的影響。

 

 AMP 的好處是什麼?

        研究表明,需要10秒才能打開的網頁的使用者跳出率高達58%。使用 AMP 格式的網頁對使用者來說更有吸引力,並且有助於您推送出更多的內容。除了提升速度和性能,我們還希望借此讓發佈者充分利用開放網絡的潛力,在包括 app 在內的各個平台發佈他們的內容,從而透過廣告和訂閱取得更高的收益。

 

 AMP 的提速原理是什麼?

智能內容優先處理

  • 優先載入必要資源。AMP 頁面能夠控制頁面資源的下載,比如智能優先下載必要的資源(如使用者在檢視口首先看到的資訊),預先存取頁面佈局元素,讓使用者快速加載網頁。
  • 無須重新佈局(relayout),靜態讀取資源的大小。 在用AMP編寫的網頁上,外部資源(如圖片、廣告或iframes)的大小需要預先在 html 中說明,這樣使用者就無須耗時下載外部資源,可快速打開網頁。
  • 異步載入。AMP能從各個方面最佳化您的網頁,比如為了防止您的網頁因為JavaScript出現延遲載入的情況,我們不支持使用者自寫的JavaScript,而是用不影響網頁性能的AMP 元素來替代。而第三方庫的JavaScript則需要在iframe 沙盒中進行,但不會影響網頁渲染。

響應式設計

  • 永遠支持適合瀏覽設備屏幕尺寸的圖片 (支持全屏)。

限制設計元素帶來載入負擔

    • 除了AMP-iframe外沒有客製化的Javascript。這樣就能夠避免客製化的Javascript 阻塞頁面主要內容的載入。並且即使觸發了多個佈局,iframe 也只佔用很少的DOM。 
  • 不需要頁面滾動元素。
  • CSS 使用內聯式,內聯式樣式表(inline stylesheet) 最大不超過50kbCSS 也會讓頁面渲染和加載變慢,因此在用AMP HTML製作的網頁上只允許使用內聯式的 CSS ,以減少在關鍵的渲染路徑上發送HTTP 請求的次數。
    • 避免延伸機制延遲網頁加載。 即使像 lightboxes, instagram embeds, tweets這類外延伸機制需要發送額外的請求,但這些請求不會阻塞網頁的佈局和渲染,所以受到 AMP 的支持的。但是用到客製化腳本標籤的網頁就需要提前告知 AMP 系統。 
  • 只運行經GPU加速的動畫。AMP 網頁上的動畫可以進行變形和透明度調整,從而節省重新佈局頁面的時間。
  • 項目是開源的, 歡迎開發者共同改善。

 如何著手用AMP設計網頁?

1. 探索

      瀏覽相關的技術指導資料 ,加入 GitHub 以及 StackOverflow 的社群。

2. 開發及測試

      著手開發您的 AMP 文件並進行驗證。您可以參考 ampbyexample.com 上的範例。 

3. 參照 Google 搜尋指南的要求

       檢視 Google 搜尋要求(Google Search requirements)以及 AMP 搜尋控制台報表(AMP Search Console Report)。根據指南和報表的建議進行調整。

4. 搜尋廣告並進行分析

       看看有哪些可供您使用的廣告分析

▼ 5. 發佈
       在標準網頁中指向 AMP 文檔發佈,讓 Googlebot 可以檢索到您公開的 AMP 文檔內容。

0
評論
修訂者 社群站長 ZoeWei 社群站長
‎2016-05-12 18:09

如果有什麼問題和反饋,歡迎大家在下面留言討論~

修訂者 佳麟 潘
‎2016-05-12 20:32

感謝總算有個詳細指標可以學習

 

修訂者 社群站長 ZoeWei 社群站長
‎2016-05-13 09:36

@佳麟 潘 也謝謝您支持我們的amp計劃 快樂貓