搜索
首页web前端H5教程谷歌为什么要推出AMP计划?

谷歌为什么要推出AMP计划?

Apr 02, 2017 am 11:13 AM
amp谷歌

谷歌为什么要推出AMP计划?

谷歌近日宣布名为AMP的网页加速项目,去提高移动端网页载入的速度。AMP是一个开源项目,这项技术可以限制HTML,CSS,JavaScript中可能会影响网页加载速度的代码。谷歌表示,这项技术可以帮助Nexus 5手机在3G网络下提高网页加载速度15%到85%。谷歌AMP和百度MIP对SEO的影响

这个项目的技术核心是AMP HTML。其可以最小化HTTP请求,并将整个网页的内容同时加载。但是这项技术将会限制CSS,像动画和滚动条这样的内容可能会收到影响。并且使用JavaScript代码的内容,也将不会被支持。

谷歌为什么要推出AMP计划?

原来的移动手机站具体存在的问题是什么呢?

在讨论解决方法前,花费一点时间去探索问题是值得的。如果你在移动设备上有大量阅读的经历,你很可能已经了解到在手机上或者电脑上基于web进行的交互是多么的差劲。页面的加载通常都很缓慢,渲染不稳定而且交互方式往往都很奇怪,这主要是以下两个原因造成的:

第三方的干扰

广告和一些跟踪分析的技术的插入,令到页面的体积增大,请求增多,哪怕用户手持的是一个带宽和CPU处理都受到了限制的设备。而且,页面往往表现得好像就是为了广告服务一样,为止插入了多个document.write()的调用函数。纽约时报最近做了个测试反映出iOS手机在安装了内容拦截软件后,页面体积的巨大减少和电池寿命的增加。

响应式网站设计造成的损伤

尽管大部分响应式网站在各个尺寸的屏幕上都表现良好,但是这也造成他们在手机上展示的时候带有大量的桌面显示资源。当Paul Irish针对Reddit的性能进行调查后,他发现很大一部分开销可以追溯到SnooIcon上。Reddit的吉祥物是使用svg渲染的,这样子他可以在鼠标悬停的时候展现动画效果(基于第三方库,意味着高开销)——这不是经常可以在移动设备上找到资源的情况。

根据Facebook的调查(PDF, 3.4 MB),一篇文章在移动设备上的平均加载时间为8秒。这就是Facebook即时文章、苹果新闻、和AMP所处的世界。花费八秒钟去加载显然是十分夸张的,这已经足够让你去浏览第二个Vine视频了。客观的说,按照今天的标准,这仿佛就是永远都加载不完。

AMP有何不同

一些介绍AMP和Facebook即时文章与苹果新闻不同处的背景资料会指出谷歌为它的新数字出版倡议做出的决定。

Facebook即时文章和苹果新闻有以下几个共同点:

app内嵌的体验

读者通过手机上的Facebook软件来访问Facebook即时文章,而苹果新闻则是采用了iOS 9中的一个完全独立的app。这两个平台均没有允许用户在app外阅读他们的文章。你可以认为他们都是一个特制的RSS更新应用。

联合驱动

然而Facebook和苹果采用了不同的联合格式(苹果新闻格式是基于JOSN的,而即时文章的标记则或多或少地被HTML标记在一个RSS推送中),他们都基于一个相同的原则:哄骗内容管理系统生成必要的联合格式,然后Facebook和苹果就会马不停蹄地去提取、解析,然后把它们弄得漂漂亮亮地,紧接着快速的进行自定义的渲染。

体验导向

尽管Facebook即时文章和苹果新闻都专注于性能,但他们同样关注如何使文章看起来更加现代化。两个平台均有组件容许我们打造圆滑流畅的接口,这一般都会带来可定制的、手工打造的的阅读体验。

相反的,AMP有另外的关注点:

基于web页面的体验

AMP的文件被设计成可以在浏览器和WebViews上渲染。

原子化的文件

尽管AMP的文件是需要在AMP运行时进行验证、解析和部分渲染,但是他们是在你的服务器或者CDN缓存里完全独立的文件,而不是一些可能会在某个点上被转化为文章,在APP上面渲染的源数据集。

面向性能

相比于交互模式或者美学元素,AMP更关注性能。这不是说AMP的文件都很小家子气(当他们使用正确的样式的时候,他们可以和Facebook的即时文章或者苹果新闻那样吸引人),但是相比于提供一些花哨的视觉效果例如疯狂的小东西,他们更关注如何让文章渲染的更迅速。

谷歌现在已经在搜索产品上使用AMP HTML。尽管这项技术还存在一些限制,但是谷歌表示已经有30家发行商和科技公司参与了该项目,其中包括,BBC,纽约时报,Buzzfeed。

虽然这些初始的技术参数可能会被更改,但是AMP的技术规格已经公布在了Github上,供各网站试用。

目前谷歌在努力提升其移动端的阅读体验。虽然这项技术还存在一些不足,但是移动端拥有37%的流量,还是会吸引越来越多网站加入AMP计划。目前百度、搜狗、雅虎已经正式支持AMP


以上是谷歌为什么要推出AMP计划?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
H5:如何增强网络上的用户体验H5:如何增强网络上的用户体验Apr 19, 2025 am 12:08 AM

H5通过多媒体支持、离线存储和性能优化提升网页用户体验。1)多媒体支持:H5的和元素简化开发,提升用户体验。2)离线存储:WebStorage和IndexedDB允许离线使用,提升体验。3)性能优化:WebWorkers和元素优化性能,减少带宽消耗。

解构H5代码:标签,元素和属性解构H5代码:标签,元素和属性Apr 18, 2025 am 12:06 AM

HTML5代码由标签、元素和属性组成:1.标签定义内容类型,用尖括号包围,如。2.元素由开始标签、内容和结束标签组成,如内容。3.属性在开始标签中定义键值对,增强功能,如。这些是构建网页结构的基本单位。

了解H5代码:HTML5的基本原理了解H5代码:HTML5的基本原理Apr 17, 2025 am 12:08 AM

HTML5是构建现代网页的关键技术,提供了许多新元素和功能。1.HTML5引入了语义化元素如、、等,增强了网页结构和SEO。2.支持多媒体元素和,无需插件即可嵌入媒体。3.表单增强了新输入类型和验证属性,简化了验证过程。4.提供了离线和本地存储功能,提升了网页性能和用户体验。

H5代码:Web开发人员的最佳实践H5代码:Web开发人员的最佳实践Apr 16, 2025 am 12:14 AM

H5代码的最佳实践包括:1.使用正确的DOCTYPE声明和字符编码;2.采用语义化标签;3.减少HTTP请求;4.使用异步加载;5.优化图像。这些实践能提升网页的效率、可维护性和用户体验。

H5:网络标准和技术的发展H5:网络标准和技术的发展Apr 15, 2025 am 12:12 AM

Web标准和技术从HTML4、CSS2和简单的JavaScript演变至今,经历了显着的发展。 1)HTML5引入了Canvas、WebStorage等API,增强了Web应用的复杂性和互动性。 2)CSS3增加了动画和过渡功能,使页面效果更加丰富。 3)JavaScript通过Node.js和ES6的现代化语法,如箭头函数和类,提升了开发效率和代码可读性,这些变化推动了Web应用的性能优化和最佳实践的发展。

H5是HTML5的速记吗?探索细节H5是HTML5的速记吗?探索细节Apr 14, 2025 am 12:05 AM

H5不仅仅是HTML5的简称,它代表了一个更广泛的现代网页开发技术生态:1.H5包括HTML5、CSS3、JavaScript及相关API和技术;2.它提供更丰富、互动、流畅的用户体验,能在多设备上无缝运行;3.使用H5技术栈可以创建响应式网页和复杂交互功能。

H5和HTML5:网络开发中常用的术语H5和HTML5:网络开发中常用的术语Apr 13, 2025 am 12:01 AM

H5与HTML5指的是同一个东西,即HTML5。HTML5是HTML的第五个版本,带来了语义化标签、多媒体支持、画布与图形、离线存储与本地存储等新功能,提升了网页的表现力和交互性。

H5指的是什么?探索上下文H5指的是什么?探索上下文Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热工具

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)