AMP項目實戰分享

本文轉自前端之旅https://www.tripfe.cn/amp-project-development-practice/

目錄

1. AMP是什麼
2. 咱們爲何選擇AMP
3. AMP項目開發
4. 咱們踩過的"坑"兒
5. 如何優化AMP SEO頁面
6. 談談AMP的侷限性
7. eamp框架，讓開發AMP項目更簡單

AMP是什麼

Google 前沿的 AMP 「 Accelerated Mobile Pages 」技術，能使用戶從搜索引擎當中進入咱們頁面的體驗獲得一個極大的提高。確切地說，AMP並非一門新的技術，它只是一種能讓頁面打開得更快的解決方案。你只要會HTML、CSS、略懂JS，就能夠開發你本身的AMP頁面。

有關AMP更多內容能夠參看官網。

咱們爲何選擇AMP

看看AMP能給咱們帶來什麼：

1. AMP可以帶來SEO排名優化。
2. AMP Cache可以讓咱們充分藉助Google CDN Cache的優點。雖然咱們內部已經作了不少優化，包括DNS預熱（有關DNS預熱可參見咱們組同事寫的一篇文章——網站性能優化——DNS預熱與合併HTTP請求），但若是能有Google全球CDN支持就更是件好事。
3. Google搜索結果對AMP頁面有預加載處理，能讓用戶更快地到達咱們的着陸頁。

因此，做爲攜程的海外業務部門，咱們率先試水了AMP項目。

AMP項目開發

AMP項目開發和普通站點的開發模式幾乎同樣，可是爲了最大限度提高性能，AMP項目頁面有很多要求。好比：

1. 爲了不 JavaScript 延緩頁面渲染，AMP頁面不能包含本身編寫的JavaScript。
2. CSS都必須內聯，以減小HTTP的請求，而且有50KB的大小限制。
3. AMP 頁面容許第三方 JavaScript，但僅限在沙盒環境下的 iframe 中。
4. 用戶幾乎可使用全部原生的HTML標籤，可是對img等會產生外部資源依賴的標籤，只能使用amp-img自定義標籤。

基於以上幾點，頁面上全部交互邏輯都必須經過css實現，沒法依賴JS。對於實現複雜的交互，AMP會顯得力不從心。可是這實際上是和AMP原則相一致的，JS豐富了頁面，但JS也是頁面優化噩夢的開始。What Google AMP means for the JavaScript community這篇文章將闡述JavaScript對性能的影響。

當開發完成後，必須保證頁面是符合AMP規範的，只有符合AMP規範的頁面纔會被搜索引擎收錄。在Chrome中安裝AMP Validator插件，當你的頁面是徹底符合AMP規範的時候，Chrome Validator AMP按鈕會呈現綠色。以下圖：

當頁面經過驗證之後，咱們還須要在link中配置amphtml和canonical，讓Google搜索發現咱們的頁面。

若是同一個頁面同時具備非AMP版本和AMP版本:

爲非AMP頁面添加如下標記：

<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
複製代碼

爲AMP頁面添加如下標記：

<link rel="canonical" href="https://www.example.com/url/to/full/document.html">
複製代碼

只有一個版本的網頁:

若是隻有一個版本的網頁，而且該版本是 AMP 網頁，則仍要爲其添加規範連接，該連接會指向其自身：

<link rel="canonical" href="https://www.example.com/url/to/amp/document.html">
複製代碼

至此，AMP頁面開發工做基本完成，能夠發佈了。

咱們踩過的"坑"兒

AMP有很多限制要求，開發中不免碰到很差解決的問題。如下對咱們碰到過的問題及解決方法進行分享。

1. AMP對錶達式複雜度有限制要求，最大值是50。複雜度50是什麼概念呢，好比如下例子，只有純粹的字符串鏈接，可是如下複雜度已經接近是46，若是再增長一個鏈接，會達到53的複雜度，控制檯會直接報錯：

<a href='<%- searchData.defaultSearchUrl %>' [href]='"/m/hotels/" + location.concatResult + "/?checkin=" + date.selectedStartDate + "&checkout=" + date.selectedEndDate + "&starID=" + activeStarKeys.keys + "&adult=" + guestsSelectResult.adultsNum + "&children=" + guestsSelectResult.childNum + "&ages=" + guestsSelectResult.childAges'>
複製代碼

對於此問題，除非AMP放開復雜度限制，不然咱們能作的只能是儘可能提早運算，當須要某個計算結果的時候，能夠直接使用。好比例子中，location.concatResult就是在location組件內部先進行concat，再將concat的結果拼接到href。此外，能夠儘可能簡化交互，減小參數。

此問題在AMP開發中勢必會碰到，詳細討論能夠看ISSUES-11434

2. AMP限制編寫JavaScript，也就不容許咱們讀寫Cookie、LocalStorage，可是記錄用戶行爲是很重要的事情，好比一些表單信息，用戶的選擇，等用戶下次打開咱們的頁面時，可以顯示用戶上一次的狀態。咱們的解決方法是經過http set-cookie方式解決前端沒法記錄cookie的問題。

3. amp-form只能提交ajax post請求，沒法作到以post表單形式跳轉。因此在開發過程當中儘可能避免出現post表單形式的請求，通常改用ajax post加頁面跳轉的形式來提交。在無可奈何的狀況下，能夠考慮經過增長非amp的中間路由，在中間頁中構造表單並自動提交數據。

4. AMP CROS：用戶最終訪問的是AMP Cache，在AMP launch新版本以前，命中AMP Cache，頁面地址並不是是真實地址而是Google AMP Cache地址，若是頁面上有額外的異步請求，就會有跨域限制，因此咱們要在服務端開啓跨域，返回頭設置AMP-Access-Control-Allow-Source-Origin。

5. amp-iframe有sandbox屬性，用來指定iframe內部的站點權限，默認值爲空。若是但願iframe內部能夠執行js腳本，則須要設置成"allow-scripts"；若是須要添加內部發送同域請求的權限，則須要設置成"allow-scripts allow-same-origin"；但若是amp-iframe的src是同域站點，那麼sandbox屬性必須不能包含allow-same-origin，這樣作杜絕了脫離amp控件發送請求的可能性。

6. AMP下統計頁面埋點必須基於amp自帶的統計控件，目前amp封裝了市面上大部分的第三方統計系統。可是因爲公司內部的統計工具沒有amp對應的控件，因此沒法接入。對於頁面埋點統計，開發者要評估自家的統計工具。

如何優化AMP頁面

最大化提速

經過對非SEO數據異步化加載，讓AMP更快。

amp-install-serviceworker，讓你打開的不只僅是一個amp頁面

AMP頁面做爲搜索排名優化頁面的同時，還兼具引流功能。雖然AMP頁面能讓用戶從搜索結果中最快速地到達咱們的landing頁，可是隻有用戶最終從landing頁又回到原始頁面走完必要的業務流程，纔是有效的轉化。例如，在咱們的業務中，用戶能夠經過搜索引擎快速到達酒店列表、酒店詳情的AMP頁面，但只有從酒店詳情AMP頁面跳轉到支付頁（非AMP），並完成支付，纔算轉化成功。若是原始頁面體驗很差，用戶依舊可能中途流失。這彷佛不是AMP的"錯"，但AMP確實還能再作些什麼。

經過amp-install-serviceworker安裝原始站點的sw.js，提早加載好原始頁面的資源，當用戶從AMP頁面跳出，進入原始主站的時候，讓主站體驗更好，從而提升實際轉化。

談談AMP的侷限性

實踐後，咱們發現AMP有如下侷限性，但願對於打算了解AMP這一技術，或者有計劃接入AMP技術的團隊，能夠起到借鑑做用。

AMP不支持touch事件，影響交互體驗

AMP官方給咱們的解釋是：由於不是全部的瀏覽器都支持passive event，爲了最大化瀏覽器的支持和效能，因此touch事件只開放給AMP內部組件使用，好比amp-carousel。

AMP沒有開放獲取cookie的權限

由於第三方會緩存AMP頁面，出於安全考慮，AMP頁面上不開放cookie。不過最新消息是，AMP官方迴應後續可能會考慮開放cookie。

只能使用AMP提供的組件

雖然AMP提供了很多組件(而且在持續新增中)，可是開發者沒法本身書寫JS去實現交互，不適合開發複雜的交互。

eamp框架，讓開發AMP項目更簡單

eamp是從咱們AMP SEO項目中提取出來的簡化版框架，可以讓咱們快速開啓AMP Node項目，使用者無需從0開始搭建，更能專一amp頁面開發。

特色：

1. 快速搭建基於node的AMP項目
2. 內置自動化上線打包工具，自動將css打包內聯，符合AMP規範
3. 目錄結構清晰，職責劃分清楚，便於多人開發協做

推薦資料

AMP官網

ampproject github