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

网站制作   加速移动页面(AMP)是Google于2016年2月推出的开源框架,其重点是将移动性能放在首位。尽管移动浏览器缺乏专门的框架的优势,但是由于移动数据成本的限制,加载时间慢,内容渲染速度差等因素,网站的重点在于适应网站。 “Google希望实现的目标是在将内容传送到任何手机,平板电脑或移 WP网站建设

网站制作

网站制作

 

加速移动页面(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作为网页设计师的最佳功能之一。

要使用开发工具进行验证:

  1. 在浏览器中打开AMP页面。
  2. 将“#development = 1”添加到URL的末尾,例如https://www.ampproject.org/#development=1。
  3. 右键单击该页面,然后选择“检查”。
  4. 打开“控制台”选项卡。如果页面被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可能通过提高性能,鼓励一致性和简化电子商务购买来改善移动网络。

原创文章,作者:网站建设,如若转载,请注明出处:https://www.davidwu.net/archives/8563

WordPress安全防护插件
服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

电子邮件地址不会被公开。 必填项已用*标注