行動網路正成長快速，隨的智能手機銷售大幅成長，蘋果公司預計到2021年智能手機將達到1800億美元。美國智能手機用戶超過2.24億，使得手機網站成為所有網站所有者的焦點。
行動網絡用戶的持續增長，使得設計和前端開發人員，能正確掌握加速行動網頁方法，成為非常重要的課題。
搜尋引擎會將行動加速網頁視為友善的設計，包括定義的觀眾，高品質的內容，正確的格式和無縫的行動相容性。在搜尋結果中通過縮寫AMP，在行動裝置上瀏覽Google時，您會注意到各種行動加速網頁。
行動加速頁面仍然使用HTML，儘管它們包含了優先考慮移動設備速度的特殊元素。AMP 項目制定了AMP技術的要求，是以Google標準流量來製作。為了在行動裝置瀏覽網站時，不會因用戶複雜的界面，導致加載速度變慢而創建的。
AMP強調即時速度和熟悉的外觀，使創作者能夠在AMP框架內設計風格。儘管內容呈現和配色有所不同，但大多數AMP頁面上，以樣板為中心的設計，仍具有類似的導航感。
其結果是更快速，更有凝聚力的瀏覽體驗，降低丟棄率，增加了讀者的參與度，並導向瀏覽行動網頁成為主流。
由於AMP的可能性和潛力是如此明顯，以下提供設計師方法，有助於網站優化AMP，同時網站客戶因AMP技術獲得速度上的改善。
1.考慮AMP-CAROUSEL的主頁
在網頁上留下一個印象，大多數訪客將開始。可以在AMP上顯示靜態內容，以展示可用的產品，對電子商務網站以及顯示一般內容的網站感興趣。
的AMP-多圖輪播特徵使得設計者能夠在水平軸上顯示的內容的多個類似部件。在標題中導入輪播組件後，您可以使用type =“carousel”顯示圖像列表，顯示為連續的條狀圖。當您試圖吸引訪問者瀏覽主頁之外的內容時，這是一個引人注目的功能，非常適合首頁。
2.顯示相關文章和產品
鼓勵網站訪問者深入挖掘您的內容。您可以透過將相關產品或帖子列表顯示，在當前正在查看的列表中來完成此操作。您可以靜態發布相關內容列表，使用<amp-list>即時完成相關內容列表，該列表將amps -mustache模板中的CORS請求填充到動態生成的內容相關內容中，您可以根據自己的具體偏好進行個性化設置。
如果訪問者輸入的登錄頁面與他們的請求不一致，他們可離開該網站或進一步尋找他們正在尋找的內容。產品替代方案的建議是一個很好的方法來適應用戶的搜索過程，至少將它們吸引到網站中。即使他們沒有找到他們正在尋找的東西，也可能找到一個替代方案來完成這項工作。
3.使用AMP-ANALYTICS查找需要改進的區域
任何網站所有者都必須知道訪問者如何與內容互動。所述<安培分析>組件可以直接使用或與第三方分析平台，包括谷歌分析一體化。在<amp-analytics>標記中，添加“type”屬性並將其值設置為您選擇的供應商，其中有許多選項。在<安培分析>組件將幫助網站所有者所擁有的網頁和設計元素導致的轉換和組件正在經歷低的用戶參與的更清晰的畫面。
在分析分析時，務必記住，使用AMP，智能緩存自然是嵌入式的。結果是，您可能會看到比平常少的流量。初次分析數字時，請牢記緩存元素。
4.使用內置的驗證器
理想的情況下，設計師永遠不會出錯，但是可能會發生。要確保頁面上的所有內容都能正常工作，請在頁面URL的末尾添加＃development = 1，以使用AMP內置的驗證器。如果您打開Chrome開發工具並看到“AMP驗證成功”消息，那麼一切正常。如果沒有，你可以深入挖掘，直到問題解決。您還可以使用Chrome開發工具來驗證從圖像和視頻到自定義字體和iframe的所有外部資源是否已正確加載。
此外，您可以通過使用Google的結構化數據測試工具驗證元數據，可以通過獲取URL或插入代碼片段。這些工具可以幫助確保所有內容都得到驗證，因此可以啟用搜索引擎抓取。在搜索引擎抓取的注意事項上，請仔細檢查您的robots.txt文件，以驗證“Disallow：/ amp /”不在任何行中。如果存在，抓取工具將無法訪問您的AMP文件。
5.在AMP中實施廣告
AMP的另一個好處是預先實施廣告的框架。amp-ad或amp-embed組件是顯示廣告的容器。廣告與所有其他資源一起加載，並帶有<amp-ad>自定義元素。
AMP文檔中不存在JavaScript。相反，AMP從iframe沙箱中加載iframe。您可以在<amp-ad>中設置寬度和高度值，並使用“type”參數指定顯示的廣告網絡。的“SRC”屬性加載用於指定廣告網絡的腳本代碼，與各種數據屬性可從廣告網絡容納進一步配置。
您還可以通過佔位符屬性為沒有可用的廣告設置佔位符或選項。視頻廣告也可以通過本地支持與全面的媒體組件支持。
行動加速網頁有助於提高移動用戶對搜索引擎的可見度，特別是現在Google正在搜索結果中包含AMP網頁。
此外，更快的加載時間，靈活的個性化和可視化組件，可以提高跳出率，為用戶帶來更好的行動體驗。
行動加速網頁提供行動網絡用一個絕佳的框架。
文章引用:https://www.webdesignerdepot.com/2017/10/5-ways-to-design-with-accelerated-mobile-pages/