龙空技术网

使用谷歌官方开源项目AMP加快移动页面加载速度

码农爱AI 237

前言:

此刻朋友们对“html中amp”可能比较注意,你们都想要了解一些“html中amp”的相关文章。那么小编同时在网摘上搜集了一些对于“html中amp””的相关资讯,希望小伙伴们能喜欢,咱们快快来了解一下吧!

简介

AMP 是一个基于 web components 技术的网页组件库,属于谷歌的官方项目,开发者基本都是谷歌的在职工程师。AMP是一个开源项目,这项技术可以让移动端访问页面时加载更快。AMP移动页面加速,是由谷歌公司启动的一个加快移动页面加载速度的开源项目。AMP是一种简单而强大的格式,可确保您的网站快速,用户优先,并且赚钱。AMP为您的Web战略提供长期成功,并在流行的平台上进行分发,并降低运营和开发成本。

主要特性为开放网络上的用户创建出色的Web体验

AMP可以创建跨设备和分发平台始终快速,美观且高效的网站和广告。发布商和广告客户可以决定如何展示强调用户优先体验的内容。

保持灵活性和控制并降低代码的复杂性

您可以使用CSS自定义样式和动态数据,以便在需要时获取最新的数据。

确保性能的构建块

构建一个优秀的网站需要花费大量的时间和精力。AMP组件已针对最佳性能进行了优化。

在开放式网络中为每个人构建可持续发展的未来

AMP项目是一项开源计划,旨在通过提供更好,更快,更用户友好的体验来保护网络的未来。

网页速度改善了用户体验和核心业务指标

AMP页面即时加载 - 跨所有设备和平台。

构建AMP页面非常简单

您通常可以在几天内转换整个存档 - 尤其是在使用Wordpress或Drupal等常见CMS时。

AMP可以应用于各种网络接触点

由Google,Bing和Twitter等全球平台使用,AMP允许用户在可用时默认为AMP页面,从而在所有平台上体验本机感受。

内置组件

AMP HTML是HTML,对可靠性能有一些限制。

虽然AMP HTML页面中的大多数标签都是常规HTML标签,但某些HTML标签会替换为AMP专用标签(另请参阅AMP规范中的HTML标签)。这些称为AMP HTML组件的自定义元素使常见模式易于以高效的方式实现。

例如,即使在不支持它的浏览器中,amp-img标签也提供完整的srcset支持。了解如何创建第一个AMP HTML页面。

AMP页面由搜索引擎和其他平台通过HTML标记发现。您可以选择拥有非AMP版本和页面的AMP版本,或仅选择AMP版本。

AMP缓存

可以缓存AMP页面以便在Web上进行近乎瞬时的加载。像Google这样的平台运行AMP缓存,可以从服务中快速加载您的内容。

Google AMP Cache是​​一个基于代理的内容交付网络,用于提供所有有效的AMP文档。它可以获取AMP HTML页面,对其进行缓存,并自动提高页面性能。使用Google AMP缓存时,文档,所有JS文件和所有图像都来自使用HTTP 2.0的同一来源,以实现最高效率。缓存还带有内置验证系统,可确保页面可以正常工作,并且不依赖于外部资源。验证系统运行一系列断言,确认页面的标记符合AMP HTML规范。

验证器的另一个版本与每个AMP页面捆绑在一起。此版本可以在呈现页面时将验证错误直接记录到浏览器的控制台,从而可以查看代码中的复杂变化可能会如何影响性能和用户体验。

快速上手

请复制以下并将其保存到扩展名为 .html 的文件中。这就是我们制作首个 AMP 网页所需的全部内容,当然,正文中还没有添加太多内容。在官方文档将更详细介绍如何添加图片等基本元素、自定义 AMP 元素,并介绍如何设置网页样式以及如何创建自适应布局,请自行学习。

<!doctype html><html amp lang="en"> <head> <meta charset="utf-8"> <script async src=""></script> <title>Hello, AMPs</title> <link rel="canonical" href=""> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <script type="application/ld+json"> { "@context": "", "@type": "NewsArticle", "headline": "Open-source framework for publishing content", "datePublished": "2015-10-07T12:02:41Z", "image": [ "logo.jpg" ] } </script> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> </head> <body> <h1>Welcome to the mobile web</h1> </body></html>

标签: #html中amp