网站制作
加速移动页面（amp）是google于2016年2月推出的开源框架，其重点是将移动性能放在首位。尽管移动浏览器缺乏专门的框架的优势，但是由于移动数据成本的限制，加载时间慢，内容渲染速度差等因素，网站的重点在于适应网站。
“google希望实现的目标是在将内容传送到任何手机，平板电脑或移动设备时适用于网页的一致标准，确保网页立即优雅。”
google希望实现的是在将内容传送到任何手机，平板电脑或移动设备时适用于网页的一致标准，确保网页立即优雅。
为了实现这一目标，amp团队开发了一种新的网页格式，它基本上是一个简化版的html，专门用于移动设备。通过仅允许最优秀的设计模式和对资源繁重的javascript进行限制，amp页面的速度比当前网络上的平均html页面快得多。
为了进一步提高加载速度，amp使用amp组件的服务器端渲染来缓存google服务器上的页面内容，以便内容尽快到达浏览器。该战略似乎正在赶上，因为目前网络上超过二十亿个amp页面，全球超过900,000个域名。
amp是移动优化和主题响应速度的飞跃，因为现在有一个规定使用不同的代码的移动设备体验，并删除在小屏幕上冗余的内容。就像常规网页一样，加速移动页面也将加载到任何现代桌面浏览器中，项目自己的网站只能在amp中编码。
在这篇文章中，我们将看看哪些品牌使用amp，如何构建amp页面，amp如何改进电子商务网站以及框架的一些缺点。
您可能还喜欢：如何使用polaris在html或react中构建app ui。
什么amp看起来像如果您在过去一年中一直在手机上浏览google，那么您可能已经看过amp页面。当您在google上搜索特定的关键字时，例如“火星”，您将看到amp链接出现在“热门故事”中的轮播中。当您在标题下方看到闪电图标时，您可以区分哪些链接是amp搜索结果的amp文章。
网站制作
在搜索引擎结果上，您可以通过闪电徽标和amp标签识别amp页面。一旦页面具有由google索引的替代amp版本，它应该出现在搜索引擎结果中，其中包含闪电符号和amp标签。通常情况下，您将为amp优化的页面提供一个唯一的地址，例如：testsite 。com / testpage / 放大器。
对于没有其版本的网站的网站，如果没有适合移动设备的版本，则适合移动设备的网页将被列在搜索引擎上，或桌面版网页上。
谁在使用amp？在chartbeat进行的一项研究中，发现截至2016年12月，美国的顶级出版商现在看到amp占所有流量的百分之七。当您认为amp仅在去年2月推出时，这一统计数字是游戏变化的，而同一研究则确定读者将amp内容与标准移动网页内容相比长达35％。
出版发行商condénast是amp的早期采用者，很快就意识到他们的品牌，包括纽约客，有线和名利场在内的他们的品牌如何被剥夺和google缓存的移动内容。康德纳斯特高级软件工程师oscar perez在今年8月的一篇博客文章中介绍了amp如何改善了读者的浏览体验：
“从google到达的用户经历了从搜索到我们的内容的不间断流程。由于google的cdn和amp html强制性能指南，amp内容迅速加载。amp布局系统通过防止页面在第三方内容加载时跳转，确保了良好的阅读体验。我们的常规网站没有任何缓慢，我们不断击败我们的竞争对手的负载和渲染时间，但是当内容在他们的cdn上时，google可以向用户提供某些性能保证（例如预取）。
网站制作
由纽约客主办的amp页面示例。如何使用amp构建页面如果您已经熟悉了常规的html和样式，那么适应于amp应该很简单。虽然它被删除，语法和代码结构是建立在现有的web设计标准，一些新的标签，将页面标识为amp文档，以及加载唯一的库。我们来看看如何开始使用amp构建页面。
标记由于amp是普通网页的重新设计，但针对移动设备进行了优化，因此常规html和amp之间的标记存在一些主要差异。例如，<html>amp 的顶级标签是<html amp>或<html >，这允许浏览器将页面识别为amp内容。
类似地，通过在页面的标签内添加，需要加载一个特定的javascript库。<script async src=https://cdn.ampproject.org/v0.js></script><head>
另外，由于不是所有访问者都将使用移动设备，您可以通过在页面的<head>标签中包含规范链接来指向页面的常规html版本。这看起来像是<link rel=canonical href= $some_url>，如果你很高兴使用amp版本的桌面用户的页面，你可以将规范链接指向amp网址。
其他差异包括如何将图像添加到页面。<img>不支持amp，但稍微增强的自定义<amp-img>是替换图像。<amp-img>标签中包含固定的宽度和高度，以及通常的“alt”属性，因此典型的图像可能如下所示：
<amp-img src=hello-world.jpg alt=hello height=400 width=800>您还可以通过简单地layout=responsive在<amp-img>标签内包含不同大小的屏幕，使您的图像完全响应。您可以从amp项目页面中找到完整的html规范。
造型由于amp是一个被剥离的框架，与常规网页相比，发现很多东西并不奇怪。要注意的一些有趣的css要求不包括外部样式表，这意味着必须<head>在页面中定义所有样式，并且!important由于amp执行其自己的元素大小调整规则，因此没有限定符。
虽然预期代码有一些非常显着的变化或全部遗漏，但是这种修订通常有逻辑上的理由。为了证明这一差异，amp项目团队提供了一个样板页面，它是构建amp页面的完美起点。
验证创建amp页面后，您可以使用amp验证器查看它们。您还可以使用google的chrome开发工具来验证您的amp页面，进一步巩固dev tools作为网页设计师的最佳功能之一。
要使用开发工具进行验证：
在浏览器中打开amp页面。将“＃development = 1”添加到url的末尾，例如https://www.ampproject.org/#development=1。右键单击该页面，然后选择“检查”。打开“控制台”选项卡。如果页面被amp验证，您将看到“amp验证成功”。网站制作
您可能还会喜欢：为您的shopify主题构建可点击的“按钮”按钮。
放大器和电子商务虽然amp为新闻媒体提供的好处是明文快速的文章加载和更高的内容参与度 – 许多电子商务开发人员的真正问题是amp如何可以提升客户的体验，并将更多的销售推向商店？
amp与媒体渠道和电子商务共享的一个优势是速度快，因为更快的加载网站将有更好的销售机会。
如果网站加载缓慢，客户将放弃购买，如果网页需要超过三秒钟的时间，移动网站访问量将减少53％。对于大多数开发人员来说，手机上的三秒加载时间可能听起来很容易实现，但同样重要的是考虑一些手机处理速度较慢，一些网络可以降低性能。而在这之前，考虑到世界上许多地方都不受4g连接的影响。
在这种情况下，如果您可以通过采用流线型框架大幅降低商店的移动装载速度，您的客户可能会在竞争中获得巨大的回报。想像一下，如果一家电子商务商店每天赚取10万美元，那么一秒延迟可能会导致每年250万美元的销售损失。
目前，可以通过api创建amp版本的shopify页面，而且shopify app store中还有一些应用程序已成功利用此技术为客户端提供转换服务。
例如，rocketamp和fireamp都可以让用户轻松地为商店中的所有产品创建优化的amp产品页面。然而，在主题层面上，无法简单地为shopify商店生成amp验证页面。开发人员正在设计shopify已验证的shopify网站，可以选择创建一个自定义应用程序，该应用程序将转换页面，或使用提供此服务的现有应用程序。
网站制作
rocketamp应用程序允许您生成和自定义您的amp产品页面。amp成长痛苦自去年推出amp以来，科技界的成员对框架的一些方面提出了挑战，通常侧重于一些更为有限的特征。通过其自己的简约性质，amp的规则可以是限制性的，特别是如果您在网页上使用了大量javascript。然而，有amp替代品的元素，如图像画廊与转盘和星级。
网站制作
amp-carousel组件可用于创建动态图像库。与分析相似，与google analytics（分析）相比，批评者的目标是报告范围。这是项目团队本身正在寻求改进的领域，但amp团队的主要短期目标之一就是“深化对基本分析的支持，例如新的事件触发器，变量和构建命中请求的灵活性，并为电子商务分析提供支持“。
这部分由安培分析组件库实现，该库可捕获amp文档的跟踪数据，并可将其发送到第三方报告系统（如google analytics（分析））。
对格式的另一个批评是缺乏对常见类型的页面广告的支持，如flash，非https和调整富媒体广告的大小。为了解决这个问题，该<amp-ad>标签可以应用于较少的资源繁重的广告，如html5广告，