Accelerated Mobile Pages

HTML变体

Accelerated Mobile Pages(簡稱AMP,意為「加速移動頁面」)是Google帶領開發的開源項目,目的是為提升移動設備網站的訪問速度[1]。AMP也可指其衍生的標準和等項目成果。AMP在HTML等廣泛使用的網絡技術基礎上進行改良,它的核心稱作AMP HTML,是HTML的一種。服務於技術預覽期結束後的2016年2月正式發布[2][3][4]

構成

AMP大致可分為AMP HTMLAMP JSAMP Cache三部分[5]

AMP HTML是描述網頁所用的標記語言,相當於普通網頁使用的HTML之亞種。AMP HTML在圖像顯示等方面使用與HTML不同的專用標籤,另外還限制了HTML部分功能的使用。

AMP JS是一套JavaScript,保證AMP HTML的正確和快速顯示。除此之外,AMP JS還負責在只支持普通HTML的瀏覽器中擔任橋梁,使其能正確支持AMP HTML的專用功能。AMP HTML中可以調用該函數庫。

AMP Cache是緩存並傳輸AMP頁面的CDN,進一步提高AMP網頁的性能。用戶在搜索引擎中點擊AMP網頁時,實際上訪問的是優化後的緩存頁面。Google的AMP Cache名為Google AMP Cache

AMP HTML

與創建普通網頁時創建的HTML類似,創建AMP頁面時是以AMP HTML的方式創建,寫法上大部分與HTML相同。文件擴展名亦同樣是.html[6],但也有人選擇.amp.html以示區別。

AMP項目網站上有AMP HTML的詳細標準,以下為其中獨特的部分。

頭部

AMP HTML的頭部格式如下。

<!doctype html>
<html amp lang="zh">
    <head>

其中DOCTYPE聲明英語Document type declaration與普通的HTML5完全一樣,但起始標籤<html>改為<html amp>或包含繪文字的<html ⚡>

<head>標籤須含有的元素包括charsetviewport元標籤,格式固定的<style>元素,以及讀取AMP JS庫的<script>元素等(其中一部分順序也有規定)。此外,通過加入JSON-LD英語JSON-LD形式的結構化數據[7]等,頁面可以包含向搜索引擎等工具傳遞合適信息的元數據

自定義元素

除普通HTML元素外,AMP HTML還可使用一些獨有元素(標籤),即自定義元素。例如用於顯示圖像的<amp-img>(取代普通的<img>元素),顯示布局側邊欄的<amp-sidebar>,顯示外部站點內容的<amp-facebook><amp-twitter>,等等。

AMP中不可使用用戶JavaScript,但有作為代替的自定義元素,代表性的有顯示廣告的<amp-ad>和用於訪問分析日語アクセス解析<amp-analytics>

部分自定義元素要求使用時添加一些附加JavaScript庫(在<head>標籤內)。

樣式

AMP頁面與普通頁面一樣,使用CSS進行樣式布局。但CSS不能用外部文件表示,也不能在各元素的style屬性中分別定義,必須寫在AMP HTML開始部分<head>標籤中的單一<style>元素中(可在服務器端動態生成CSS後嵌入AMP HTML)。包括媒體查詢器和多數的屬性選擇器在內,大部分CSS功能都可在AMP中使用,禁用的則有!important限定符和*選擇器等。

另外,AMP允許通過元素的layout屬性控制布局。例如,自適應圖像可通過<amp-img layout="responsive">表示。

HTML限制

部分HTML元素和屬性的使用受到限制,特別是圖像和媒體方面,這些均由AMP自有的自定義元素替換。

腳本

AMP中,用戶自己的JavaScript,以及jQueryAngularJS這類普通JavaScript庫原則上不能使用。作為代替方案,可使用AMP HTML的自定義元素製作交互式網頁。

優點

使用AMP的網頁可快速讀取並顯示,訪問者在點擊鏈接後無需等待即可看到頁面內容。根據Google發布的數據,網頁若是訪問速度過慢,多數用戶會放棄並關閉網頁[8],快速加載的頁面對網站製作者也有利。

Google搜索結果中,妥善建立的AMP網頁旁會出現AMP標誌,新聞等部分內容還會採用輪播(carousel)的特殊樣式[9]

爭議

AMP收到科技行業的廣泛批評。[10][11][12][13][14][15][16]一些人認為谷歌試圖通過制定網站的構建和盈利方式來保持其在互聯網的主導地位、將出版商鎖定在其生態系統中。[17]

比較

AMP常被與Facebook Instant Articles蘋果新聞比較[18][19],三者都發布於2015年,旨在提供更快的移動內容。[20]AMP項目的支持者聲稱:APM是發布者和技術公司間的合作成果;AMP是為互聯網,而不是專屬應用程序設計的。

應用

部分媒體已開始使用AMP,包括CNN美國廣播公司福克斯新聞。安裝第三方插件後,WordPress博客也可使用AMP[21]

2017年3月7日,Google宣布百度搜狗Yahoo! JAPAN搜索將支持AMP[22];其中百度在搜索結果中將AMP頁面標註為「MIP」(移動網頁加速器),一個百度主導、與AMP類似的項目[23]

參考文獻

  1. ^ Google、モバイルWeb高速化のオープンイニシアチブ「AMP」立ち上げ Twitterや大手メディアが参加. ITmedia日語ITmedia NEWS. 2015-10-08 [2017-03-07]. (原始內容存檔於2017-03-07) (日語). 
  2. ^ What Is Accelerated Mobile Pages? From Code To SEO. Malika Sharma. 2016-02-19 [2017-03-08]. (原始內容存檔於2016-03-09) (英語). 
  3. ^ Christopher Ratcliff. Google has launched Accelerated Mobile Pages. Search Engine Watch. 2016-02-23 [2016-04-03]. (原始內容存檔於2016-03-22) (英語). 
  4. ^ Implement Accelerated Mobile Pages (AMP) and Optimize the Website to Next Level. MUS Tips. 2016-03-05 [2016-04-19]. (原始內容存檔於2016-04-26) (英語). 
  5. ^ Overview. Accelerated Mobile Pages Project. [2017-03-07]. (原始內容存檔於2017-03-07) (日語). 
  6. ^ AMP HTML ページを作成する. Accelerated Mobile Pages Project. [2017-03-08]. (原始內容存檔於2017-03-08) (日語). 
  7. ^ ついに始まった、Google AMP(Accelerated Mobile Pages)を試してみよう!. CodeZine. 2016-04-15 [2017-03-07]. (原始內容存檔於2017-03-07) (日語). 
  8. ^ Googleの検索結果で上位表示されるAccelerated Mobile Pagesに、はてブやLINEも対応表明. @IT日語@IT. 2016-04-18 [2017-03-07]. (原始內容存檔於2017-03-07) (日語). 
  9. ^ Use AMP HTML. Google Developers. [2017-03-07]. (原始內容存檔於2017-03-07) (英語). 
  10. ^ at 08:25, Scott Gilbertson 19 May 2017. Kill Google AMP before it kills the web. www.theregister.co.uk. [April 16, 2019]. (原始內容存檔於2020-05-03). 
  11. ^ AMP letter. ampletter.org. [April 16, 2019]. (原始內容存檔於2020-12-09). 
  12. ^ AMP for email is a terrible idea. [April 16, 2019]. [失效連結]
  13. ^ Web developers publish open letter taking Google to task for locking up with web with AMP. Boing Boing. [April 16, 2019]. (原始內容存檔於2020-11-11). 
  14. ^ Bohn, Dieter. Inside Google’s plan to make the whole web as fast as AMP. The Verge. March 8, 2018 [April 16, 2019]. (原始內容存檔於2020-12-19). 
  15. ^ Bright, Peter. Google claims it’s going to build its proprietary AMP using Web standards. Ars Technica. March 10, 2018 [April 16, 2019]. (原始內容存檔於2020-11-09). 
  16. ^ Google Announces Plan to Improve URLs for AMP Pages, But Even If It Happens, Which Remains Uncertain, AMP Will Still Suck. [April 16, 2019]. (原始內容存檔於2020-11-09). 
  17. ^ at 21:33, Kieren McCarthy in San Francisco 30 Oct 2017. Google AMP supremo whinges at being called out on team's bulls***. www.theregister.co.uk. [April 16, 2019]. (原始內容存檔於2019-11-13). 
  18. ^ Novet, Jordan. Why I prefer Google AMP pages to Facebook Instant Articles. VentureBeat. August 14, 2016 [February 28, 2019]. (原始內容存檔於2020-11-08) (美國英語). 
  19. ^ Travis, Ben. Your Guide to Mobile Publishing Formats: AMP, Facebook Instant Articles, and Apple News | Viget. viget.com. December 13, 2016 [February 28, 2019]. (原始內容存檔於2020-11-08) (英語). 
  20. ^ Apple Announces News App for iPhone & iPad. Apple Newsroom. [August 31, 2017]. (原始內容存檔於2020-10-24) (美國英語). 
  21. ^ Jyoti Prakash Ray. How to Setup Google AMP on WordPress Site (Using AMP Plugin). Wpmyweb.com. 2017-02-07 [2017-03-07]. (原始內容存檔於2017-02-10) (英語). 
  22. ^ AMP grows its footprint – Accelerated Mobile Pages Project. amphtml.wordpress.com. 2017-03-07 [2024-05-11]. (原始內容存檔於2024-05-10) (英語). 
  23. ^ MIP官网_移动网页加速器_MIP(Mobile Instant Pages). www.mipengine.org. [2017-03-08]. (原始內容存檔於2017-02-19) (中文(中國大陸)). 

外部連結