🧛🏼 🌫️ 📞 实用的Google AMP（加速的移动页面）评论 🏆 🕳️ 👂

昨天， GT 上出现了一条消息，即Google宣布了自己的js库来加快移动设备上的网页的速度。这个事件不会令我无动于衷，因此我决定稍微看一下该库的功能，并对下载速度进行一个小的比较，并找出这种方法是否有优势。

简而言之，新计划的实质如下：优化并加快内容页面（即文章，新闻，评论，照片/视频报告等）的加载。Google建议使用其开发内容-AMP库。同时，在页面上施加了许多限制。例如，除了AMP本身及其扩展之外，您不能使用其他js脚本。您必须使用特殊的AMP元素而不是通常的元素（例如，amp-img标签而不是img）。您甚至无法插入照片的滑块-为此，有一个特殊的组件。要在单击预览时查看全尺寸照片，请使用Google版本的灯箱，而不要使用在那里使用的版本。

我还想强调一个新的广告标签amp- ad-它允许您使用以下支持的广告网络之一在页面上插入广告单元：A9，AdReactor，AdSense，AdTech，Doubleclick。显然，通过这种方式，Google可以进一步控制网站上的广告，从而支持某些网络，但是幸运的是，所有这些东西已经被AdBlock完全阻止了。它仍然被阻止。

以上所有限制均由AMP中包含的特殊验证器进行检查。在页面地址上添加“＃development = 1”，就可以在控制台中获取页面状态-它通过了验证，或者出了点问题。不幸的是，错误输出完全没有信息。例如，当连接jQuery时，我们得到以下控制台：

尝试猜测这里出了什么问题。
如果验证器成功通过页面，我们将收到消息“ AMP验证成功”。

那么，AMP为我们提供了哪些机会？
以下是提供的项目列表：

内置组件：
amp-ad用于显示广告的容器
amp-img替换img标签
amp-pixel看不见的像素-匹配计数器
amp-video替换HTML5标签video

组件使用扩展名连接的组件（单独的js库）
amp-anim动画图像（GIF）
amp-audio用音频amp-carousel替换HTML5
普通轮播-显示水平排列的
amp-fit-text的缩略图自动缩小或增大文本的字体大小，使其适合
amp-iframe的有限区域。替换iframe
amp-image-lightbox灯箱。单击预览或
amp-instagram链接时以大尺寸查看大图在instagram
amp-lightbox上显示帖子另一个
amp-twitter灯箱显示
amp-youtube tweet 显示YouTube视频

我不会提供代码，标签和属性的示例-所有这些都可以在上面的链接中查看。标记是可以理解的，文档非常详尽，因此所有内容都应该非常清楚。
您可以通过在github或此处下载存档来查看示例。
尽管该项目处于技术预览状态，但该项目刚刚宣布，所有这些–空闲组件破坏了印象。例如，我不想赚取推文显示组件。我必须说这非常方便-只需替换tweet的ID（例如652050319996780544），然后选择要品尝的参数即可。但是不起作用。但是Instagram工作正常。

好了，现在该进行测试了吗？
我创建了两个简单但占用大量资源的页面。

第一个是 AMP有效的，第二个是不带AMP的常规HTML5。
当您从手机打开页面时，区别确实很明显。 AMP页面的加载明显更快，更漂亮，图像甚至具有自己的加载指示符（更确切地说，是通常的占位符，但看起来不错）。通常的页面加载速度很慢，而且效果不佳。但是，另一方面，文档末尾的gif可以使用它，但是不幸的是，它不在AMP页面中。我认为这取决于浏览器，因此我不会专注于此。

让我们尝试一下我最喜欢的Google工具-Pagespeed Insights。

测试常规的html5页面：
移动设备上的速度：91/100
易于在移动设备上查看：100/100
台式机上的速度100/100
不错。我会说很好。当然，例如值得在其中放置一个Yandex指标，指标会立即下降，但他们在枢纽上写下了它，并多次提出要求。

测试AMP页面：
移动设备上的速度：99/100
移动设备上的查看轻松度：100/100
台式机速度99/100 在移动设备
上稍好一些，在台式机上稍差一些。原则上，如果考虑到衡量页面速度洞察力的特殊性，事实证明结果大致相同，但是在手动测试中，移动设备上的负载差异非常明显。

让我们尝试在谷歌浏览器中进行仿真。例如以3g的iphone6plus为例。
正常页面-差不多17秒我们

清除了缓存，将AMP页面加载了
8.82秒。认真吗差额已经是两倍了？

是的，但是考虑到您在页面中滚动时会加载内容。例如，仅在滚动到文档末尾后才加载gif。我们不会
在www.google.com/webmasters/tools/mobile-friendly上进行测试，一切都很清楚。

结果，我们有了一个新工具，实际上可以使我们显着提高页面加载速度。不幸的是，性能的提高与对页面功能的严格限制有关。因此，可以说AMP是一个高度专业化的开发，无疑将找到自己的领域。另外，该项目仍处于技术预览阶段，许多组件仍然是原始且间歇性的，但是现在您可以评估使用此库的效果。

好，仅此而已。感谢您的关注！
我很高兴您的评论和评论。

实用的Google AMP（加速的移动页面）评论

More articles: