使用者:Ninedyz/Accelerated Mobile Pages
Accelerated Mobile Pages(簡稱AMP,意為「加速移動頁面」)是Google帶領開發的開源專案,目的是為提升行動裝置對網站的訪問速度[1]。AMP也可指其衍生的標準和庫等專案成果。AMP在HTML等廣泛使用的網路技術基礎上進行改良,它的核心稱作AMP HTML,是HTML的一種。服務於技術預覽期結束後的2016年2月正式發布[2][3][4]。
構成
[編輯]AMP大致可分為AMP HTML、AMP JS和AMP 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聲明與普通的HTML5完全一樣,但起始標籤<html>
改為<html amp>
或包含繪文字的<html ⚡>
。
<head>
標籤須含有的元素包括charset
和viewport
元標籤,格式固定的<style>
元素,以及讀取AMP JS庫的<script>
元素等(其中一部分順序也有規定)。此外,通過加入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,以及jQuery、AngularJS這類普通JavaScript庫原則上不能使用。作為代替方案,可使用AMP HTML的自訂元素製作互動式網頁。
優點
[編輯]使用AMP的網頁可快速讀取並顯示,使用者(網頁訪問者)在點擊連結後無需等待即可看到頁面內容。根據Google發布的資料,網頁若是訪問速度過慢,多數使用者會放棄並關閉網頁[8],快速載入的頁面對網站製作者也有利。
在Google搜尋結果中,妥善建立的AMP網頁旁會出現AMP標誌,對新聞等部分內容還會採用輪播(carousel)的特殊樣式[9]。
應用
[編輯]部分媒體已開始使用AMP,包括CNN、美國廣播公司和福斯新聞。安裝第三方外掛程式後,WordPress部落格也可使用AMP[10]。
2017年3月7日,Google宣布百度、搜狗和Yahoo! JAPAN搜尋將支援AMP[11];其中百度在搜尋結果中將AMP頁面標註為「MIP」(移動網頁加速器),一個百度主導、與AMP類似的專案[12]。
參考文獻
[編輯]- ^ Google、モバイルWeb高速化のオープンイニシアチブ「AMP」立ち上げ Twitterや大手メディアが参加. ITmedia NEWS. 2015-10-08 [2017-03-07] (日語).
- ^ What Is Accelerated Mobile Pages? From Code To SEO. Malika Sharma. 2016-02-19 (英語).
- ^ Christopher Ratcliff. Google has launched Accelerated Mobile Pages. Search Engine Watch. 2016-02-23 [2016-04-03] (英語).
- ^ Implement Accelerated Mobile Pages (AMP) and Optimize the Website to Next Level. MUS Tips. 2016-03-05 [2016-04-19] (英語).
- ^ Overview. Accelerated Mobile Pages Project. [2017-03-07] (日語).
- ^ AMP HTML ページを作成する. Accelerated Mobile Pages Project. [2017-03-08] (日語).
- ^ ついに始まった、Google AMP(Accelerated Mobile Pages)を試してみよう!. CodeZine. 2016-04-15 [2017-03-07] (日語).
- ^ Googleの検索結果で上位表示されるAccelerated Mobile Pagesに、はてブやLINEも対応表明. @IT. 2016-04-18 [2017-03-07] (日語).
- ^ Use AMP HTML. Google Developers. [2017-03-07] (英語).
- ^ Jyoti Prakash Ray. How to Setup Google AMP on WordPress Site (Using AMP Plugin). Wpmyweb.com. 2017-02-07 [2017-03-07] (英語).
- ^ AMP grows its footprint – Accelerated Mobile Pages Project. www.ampproject.org. [2017-03-08]. (原始內容存檔於2017-03-08) (英語).
- ^ MIP官网_移动网页加速器_MIP(Mobile Instant Pages). www.mipengine.org. [2017-03-08]. (原始內容存檔於2017-02-19) (中文(中國大陸)).
外部連結
[編輯]- 官方網站 (英文)
- Official Google Blog: Introducing the Accelerated Mobile Pages Project, for a faster, open mobile web (英文)
|
[[Category:HTML]]