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) (中文(中國大陸)). 

外部連結