网站制作如何使用Google的AMP对移动网站有哪些好处

网站制作   加速移动页面(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广告,并且支持的视频播放器也可以集成,以将动态移动引入嵌入式广告。 AMP的一些缺点甚至被不太可能的第三方解决,就像Safari在共享AMP页面时如何将AMP页面URL转换为常规URL一样。目前,当AMP页面上的访问者共享直接URL时,他们将最终发送一个链接到AMP版本的页面,而不是规范的URL。随着Safari iOS 11的最新更新,URL的AMP部分在被共享时被剥离,从而允许更加优雅的用户体验。 放大未来 展望未来,AMP可能会在国际上增长,考虑到Google在最近的开发者大会上宣布,AMP将在百度,搜狗和雅虎日本搜索引擎上推出。 开源项目继续发展势头,并在雄心勃勃的路线图中概述了各种改进计划,包括第三方登录和电子商务分析支持。 该框架可能很年轻,仍然遇到一些棘手的问题,但AMP可能通过提高性能,鼓励一致性和简化电子商务购买来改善移动网络。

友情提示:点赞熊源码网http://www.dianzanxiong.com点赞熊源码网 » 网站制作如何使用Google的AMP对移动网站有哪些好处
分享到:
赞(0)
广告位820*80