网站制作
加速移动页面（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文章。
网站制作
一旦页面具有由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构建页面
如果您已经熟悉了常规的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网站，可以选择创建一个自定义应用程序，该应用程序将转换页面，或使用提供此服务的现有应用程序。
网站制作
AMP成长痛苦
自去年推出AMP以来，科技界的成员对框架的一些方面提出了挑战，通常侧重于一些更为有限的特征。通过其自己的简约性质，AMP的规则可以是限制性的，特别是如果您在网页上使用了大量JavaScript。然而，有AMP替代品的元素，如图像画廊与转盘和星级。
网站制作
与分析相似，与Google Analytics（分析）相比，批评者的目标是报告范围。这是项目团队本身正在寻求改进的领域，但AMP团队的主要短期目标之一就是“深化对基本分析的支持，例如新的事件触发器，变量和构建命中请求的灵活性，并为电子商务分析提供支持“。
这部分由安培分析组件库实现，该库可捕获AMP文档的跟踪数据，并可将其发送到第三方报告系统（如Google Analytics（分析））。
对格式的另一个批评是缺乏对常见类型的页面广告的支持，如Flash，非HTTPS和调整富媒体广告的大小。为了解决这个问题，该<amp-ad>标签可以应用于较少的资源繁重的广告，如HTML5广告，并且支持的视频播放器也可以集成，以将动态移动引入嵌入式广告。
AMP的一些缺点甚至被不太可能的第三方解决，就像Safari在共享AMP页面时如何将AMP页面URL转换为常规URL一样。目前，当AMP页面上的访问者共享直接URL时，他们将最终发送一个链接到AMP版本的页面，而不是规范的URL。随着Safari iOS 11的最新更新，URL的AMP部分在被共享时被剥离，从而允许更加优雅的用户体验。
放大未来
展望未来，AMP可能会在国际上增长，考虑到Google在最近的开发者大会上宣布，AMP将在百度，搜狗和雅虎日本搜索引擎上推出。
开源项目继续发展势头，并在雄心勃勃的路线图中概述了各种改进计划，包括第三方登录和电子商务分析支持。
该框架可能很年轻，仍然遇到一些棘手的问题，但AMP可能通过提高性能，鼓励一致性和简化电子商务购买来改善移动网络。
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/260931.html