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) (中文(中国大陆)). 

外部链接