开始加速移动页面
谷歌加速移动网页(放大器)项目正在推出今天。你准备好了吗?在今天的专栏中,我会给你一个概述的发售,并显示你如何开始与它。
什么是放大器?
在过去的十月,谷歌宣布加速移动页面(放大器),创建快速加载移动网页的一个非常容易访问的框架。开源倡议的目的是使出版商能够轻松地提高他们的移动读者的速度(和因此,用户体验),而不牺牲任何广告收入,他们可以依靠。
虽然有经验的开发人员可以经常通过密集的性能优化实现类似的结果,出版商往往忽视了这一原因,由于资源的限制。放大器允许这些优化很容易实现,而不改变主要移动网络的经验。
还有,谷歌和其他知名网络技术公司,谁是令人鼓舞的其使用,通过将其整合到各自的平台,其未来的使用增加了好处。
如何工作?
本质上是一个创建移动网页的框架,包括三个基本部分:
与HTML HTML标记语言的一个子集,这有一些自定义标签和许多限制性。但如果你熟悉HTML,你不应该适应现有的网页和HTML的困难。关于它是如何不同于基本的HTML的更多细节,检查所需的标记和项目的列表,你必须有与HTML页面。
与JS:一种移动网页的Java框架。对于大多数,它管理资源的处理和异步加载。应该指出的是,允许和没有第三方Java。
放大器:一个可选的CDN内容分发网络,它将带您与启用页缓存和自动进行性能优化。
你怎么和你的网站?
对于初学者,你将不得不保持至少2个版本的任何文章页:你的文章页的原始版本,用户通常会看到,和该网页的放大器版本。
由于放大器不允许诸如表单元素和第三方的Java,你可能不会有铅的形式,在网页的评论和一些其他的元素,你可以在你的页面在一个标准的实施。(虽然目前黑客使用iframe,这提供了一个解决方案。感谢康拉德奥康帮我验证破解。)
它也可能是你将不得不重写你的网站模板,以适应限制。例如,在与所有的CSS必须在线和小于50kb。由于加载自定义字体密集,他们必须使用一种特殊的放大器的字体扩展加载,以更好地控制加载。
多媒体必须特别处理。例如,图像需要利用定制和img元素必须包括一个明确的宽度和高度。(当一个传统的网站转换为一个或一个模板,这可能是一个重大的痛苦,如果宽度和高度的属性是不是已经被使用)。另外,如果您的图像的GIF动画,你需要使用单独的与动画扩展组件。
喜欢的图片,有一个自定义标签,必须使用嵌入本地托管的视频通过HTML5视频,叫AMP。嵌入的YouTube视频,但是,网络视频的大多数是有一个独立的扩展组件,与YouTube。
展开全文
还有诸如通过AMP形象灯箱、旋转木马和图像显示幻灯片的支持,以及社会化媒体嵌入推特,Instagram,Facebook,Pinterest通过自己的扩展组件和葡萄。
这些标签和扩展组件不难使用,它们只需要你的网站设计中的一些规划。
为了谷歌(和其他技术支持的放大器的项目),以检测你的文章,你需要修改原始版本的文章页。原文章页必须包含以下标签,基本上是一个标准的标签页:
<链接rel=“amphtml“href =“http:/ / www.example网站/博客/放大器/”>
安培发现网页还提到一些平台支持和需要schema.org元数据指定页面的内容类型。(目前,“文”“食谱”“审查”和“视频”被列为网页类型的例子在GitHub上。)
此外,这也表明schema.org元数据”是一个需要让你的内容可以出现在谷歌新闻搜索轮播演示。“如果你试图通过实现与从谷歌未来的利益,确保你得到你的模式吧!
我怎么能赚钱的广告和?
AD阻滞剂上升增加了出版商赚钱的网站很难。对于一些用户来说,提高网站的负载时间是一种激励,使用广告阻断剂,可以帮助提高浏览速度。也可能被看作是对这个问题的回应,与项目说明:
加速移动网页项目的目标是确保在移动网络上有效的广告货币化,同时拥抱以用户为中心的方法。有了这样的背景下,目标是提供一个全面的广告格式,广告网络和技术在加速移动页面的全面范围。
因此,一些最流行的广告网络是目前使用的放大器的广告扩展组件(有更多的兼容性可能的方式):
亚马逊A9
adreactor
谷歌站长
美国在线众为兴
谷歌DoubleClick
争吵
taboola
ADFORM
dotandads
plista
智能Adserver
yieldmo
如果你想知道这些看起来像,每个网络广告的例子在。MD文件在AMP的GitHub页面。
如果你的货币是更复杂的利用付费或订阅有文档可供实施内放大器,以及使用“与访问”的延伸。
是否有分析?
可以事实上,在放大器的分析是非常聪明的。为了防止多个分析跟踪从放缓的网站,他们实施了“措施一次,报告到许多”有2条路径,使分析功能与放大器为您的网站:
像素元素:这是一个简单的标签,可以用来计算页面视图作为一个典型的跟踪像素,使用一个请求。有一些变量,可以通过它,如document_referrer和标题。
放大器的分析扩展组件:这是一个更先进的比放大器像素。它可能是什么你将使用在您的网站上实现分析,因为它允许更高层次的配置,用于分析的相互作用。
如果你不想让谷歌分析工作,放大器分析是去的方式。你需要在添加必要的Java库,然后配置通过它在你的网页的<体>部分JSON标记。
如果你有兴趣在谷歌的分析,在放大器,检查了他们的开发者页面上的谷歌的放大器分析部分。它有几个实施例。
谷歌的什么样子?
谷歌提供了一个演示什么是放大器的功能会在SERP的样子。你可以试试在g.co/ampdemo在您的移动电话(或模仿它在Chrome开发者工具)。然后,像“火星搜索”,你会看到对与文章顶部的旋转木马。
对于一个阅读体验嵌入在SERP一点击。你可以扫右或左看另一个启用的文章。这是一个不同的经验,从简单地导航到出版商的放大器页。
加速移动网页在SERP的例子,谷歌提供的
一些主要发行商可以在演示中找到,如卫报(例如,例如,页)和华盛顿邮报(例如)。
我要如何开始与WordPress的?
一个最简单的把你的手弄脏和安培现在是实现在WordPress网站的方法。一个官方插件是由Automattic WordPress开发/它经常被更新,并在GitHub。
步骤1:安装官方的WordPress插件
开始的时候,去与WP GitHub页面,点击“下载zip”按钮。
从GitHub下载和WordPress插件
你可以安装在你的WordPress站点,就像任何其他的WordPress插件。
一旦安装,你只需要添加“/放大器/”文章页(或者,如果你没有很好的固定链接,你可以选择添加”?安培= 1。
步骤2:验证和调整
最终,谷歌搜索控制台应该拿起AMP版本的你的文章通过rel=“amphtml”标签的附加插件,允许散装容易验证的文章。唯一的问题,在我的经验,到目前为止,是,它没有检测到变化非常快。如果你解决了一些事情,修正可能不会显示出来。
使用谷歌搜索控制台验证加速移动网页的例子
我建议使用搜索控制台和浏览器验证过程的组合。使用Chrome的验证过程中,去一个你与网页在Chrome和附加“#发展= 1”的结尾的网址。命中控制+移位+我打开铬开发工具和头到控制台。
你可能需要刷新页面,但一旦你这样做,它会说“和验证成功”,或给你一个问题的列表来解决。
使用浏览器的开发工具来验证加速的移动页面
更可能的是,简单安装WordPress的插件是不够的,你必须通过和验证所有你想从加速移动页的页的效益。
根据你的文章是如何被格式化的,你可能需要做一些修改,以获取和页面来验证。我亲身经历的最常见的问题是与指定的高度和宽度属性和修正图像老Youtube嵌入代码,没有使用HTTPS。
步骤3:获取模式标记以验证
正如前面所提到的,在你的和页面上有有效的架构标记也是很重要的。要测试有效标记的页面,您可以使用谷歌的结构化数据测试工具。我用WordPress不显示出版商的标志有一些问题需要做以下修改插件。
编辑class-amp-post-template.php文件,通过FTP或在你的WordPress仪表盘(去插件>编辑,然后选择“与”)和改变:
如果($ site_icon_url){
[“] [美元'publisher元数据'logo’] =阵列(
“@”型= >“ImageObject”,
“URL”site_icon_url美元= >,
高度= >自::site_icon_size,
宽度= >自::site_icon_size,
);
}
去:
[“] [美元'publisher元数据'logo’] =阵列(
“@”型= >“ImageObject”,
“URL”>“HTTP:/ / =域名.com / wp-content/uploads / logo-60 PNG”,
“高度”= 60,
“宽度”= 170,
);
确保用一个路径替换你自己的发行商徽标,并指定像素的高度和宽度。你可以在这里找到相关的标记信息,其中规定,“理想情况下,理性是60px高<= 600px宽。”
步骤4:让谷歌Analytics和AMP的WordPress插件的工作
如果你无法追踪分析的话,你会有什么好处?AMP的WordPress插件不使放大器分析出来的框,但它是相当简单的使。
为了使放大器的WordPress插件与谷歌分析工作,编辑amp-post-template-actions.php(从前面提到的不同的文件)文件,通过FTP或在你的WordPress仪表盘(去插件>编辑,然后选择“与”),并将以下内容添加到它的结束:
确保你改变ua- xxxxx -y代表你的网站的谷歌分析属性ID。
现在,重新验证你的放大器的页面,你应该为你的WordPress网站启用跟踪有一个基本的功放安装。
结论
放大器提供了一个相对简单的方法来提高移动网站的速度。随着二月的结束的临近,和谷歌新闻实验室进行正常办公时间通过Hangouts,我们可以期望谷歌推出其整合在即。在似乎是一个对放大器的项目的势头,甚至脸谱可能反应的反应。它最近决定把即时文章公开给所有的出版商。
你是出版商吗?如果是这样的话,你需要开始思考加速移动页面。
令人兴奋的新技术正在到来。你兴奋吗?