嵊州网站建设：什么是Google AMP以及它如何运作？

AMP代表Accelerated Mobile Pages。这是一种构建网页的方法，可以快速呈现静态内容。在投入使用时，AMP由AMP HTML，AMP JS库和Google AMP Cache组成。如果页面未针对移动设备进行优化，则可能会增加跳出率 - 如果用户在3秒内未加载，则会有30％的用户离开页面。AMP的最终产品极大地提高了互联网上移动网站的性能 - 以至于加载时间通常看起来是即时的。它依赖于现有技术，并与互联网的大腕合作。AMP不是一种完全不同的创建页面的技术 - 它实际上由普通的HTML组成，只有一些限制并添加了专门的标签，并且不需要大量的额外工作。AMP JS致力于确保快速，清晰地加载最重要的内容，而广告等第三方内容不在最前沿，以便用户尽快看到自己喜欢的内容。AMP已经发现，快速加载的内容会导致更快的阅读速度，从而导致更多的消费。

AMP JS

AMP JavaScript（JS）库使用所有最佳性能实践，管理加载资源，并为用户提供自定义标记 - 所有这些都是为了确保您的页面尽快呈现。其中一个最大的优点是，每个元素，甚至来自外部源的元素都是同步的，这样页面中的任何内容都不会被阻止渲染。

用于性能的其他技术包括在加载资源之前预先计算页面上所有元素的布局，禁用慢速CSS选择器，以及沙盒化所有iframe。

AMP HTML

这是HTML，它具有许多与可靠性能相关的限制，以及一些扩展，用于组合不仅仅是基本HTML的丰富内容。AMP JS库可以帮助快速呈现AMP HTML页面，而Google的AMP Cache可以帮助缓存AMP HTML页面。

简而言之，AMP HTML是包含自定义AMP属性的标准HTML。AMP HTML中的大多数标签都是标准标签，但其中一些标签被替换为适合AMP组件。这些自定义元素用于确保常用模式易于使用。

谷歌的AMP缓存

Google的AMP缓存是一种基于代理的传送网络，用于分发所有有效的AMP文档。它传输AMP HTML页面，然后缓存它们，然后自动改进其页面性能。使用此AMP缓存时，包含所有JS文件和图像的文档将从使用HTTP 2.0的相同源加载，以获得最高效率。缓存系统附带一个验证系统，可以确定页面是否可以在不依赖外部资源的情况下工作。验证系统将通过各种清单确认页面的标记符合AMP HTML规范。

默认情况下，每个AMP页面都附带一个不同版本的验证机制。这个能够在呈现页面时将验证错误记录到浏览器的控制台上。这使用户可以看到代码中复杂的更改将如何影响性能以及用户体验。

AMP如何工作

用于创建快速加载页面的AMP是用于优化页面的一系列元素的组合。

JavaScript可用于修改网页的几乎任何部分，但它也可用于阻止DOM构造并延迟页面的呈现。为避免因JavaScript而延迟呈现页面，AMP仅允许异步JavaScript。这些AMP页面禁止使用由网站管理员编写的任何JavaScript，而不是使用常规JavaScript，交互式页面必须仅包含自定义AMP元素。这些自定义元素可以由JavaScript构成，但必须经过专门设计，以确保它们不会对网页性能造成任何影响。iframe中允许使用第三方JavaScript，但无法阻止呈现。

外部资源（如iframe，广告或图像）必须在页面的HTML中声明其大小，以便AMP能够在下载所有资源之前确定每个元素的大小及其位置。AMP将在下载资源之前加载页面布局。AMP用于断开文档布局与资源布局的连接，并且只需要一个HTTP请求来布局整个文档。因为AMP的优化方式可以解决浏览器中昂贵的布局重新计算问题，所以当资源加载时不会有任何重新布局。

AMP不允许扩展机制阻止页面呈现。AMP有助于扩展Instagram嵌入，灯箱，推文等内容。这些东西需要额外的HTTP请求，这些请求无法阻止页面布局和渲染。使用自定义脚本的页面必须通知AMP系统最终需要自定义标记。

第三方JavaScript更喜欢使用同步JS加载。假设一个页面上有5个广告，并且每个广告导致3个同步加载 - 每个加载延迟1秒，那么您将只有18秒的加载时间，只是由JA加载引起的。AMP页面允许第三方JS，但仅限于沙盒中的iframe。当第三方JS被限制为iframe时，无法阻止它们执行主页面。即使他们已经触发了许多风格的重新计算，小iframe只有一点点DOM。重新计算样式和布局所需的时间受DOM大小的限制，并且与重新计算页面的样式和布局相比，iframe重新计算速度非常快。

CSS会阻止所有渲染，页面加载，它也可以使代码有点蓬松。使用AMP HTML，唯一允许保留的样式是保持内联的样式。很多时候，与许多网页相比，这将从重要的渲染路径中删除一个或多个HTTP请求。此外，内联样式表的阈值为50千字节。即使是最复杂的页面，这个大小也足够大，但网站管理员仍需要注意以正确的方式输入CSS。

互联网上的字体很大，因此，webfont优化对网站性能很重要。通常，普通页面只会有几个同步脚本和几个外部样式表，浏览器将等待大量时间开始下载这些大字体文件。在字体开始下载之前，AMP系统不会提交任何HTTP请求。这是可能的，因为AMP中的所有JavaScript都具有异步属性，并且只允许内联样式表。HTTP请求不会阻止浏览器下载所需的任何字体。排版是一个重要的工具，有助于品牌，可读性和设计，网页字体的优化将有助于您的整体绩效战略。它可以减少总页面大小，从而有助于改善总体加载时间。

每次在页面上测量某些内容时，都会触发重新计算样式。这很昂贵，因为Web浏览器必须调整整个页面布局。在AMP页面中，所有DOM读数都在编写任何内容之前发生。这样做是为了确保每帧最多重新计算一次样式。当更改属性（如布局）时，它会编辑网站的几何图形，如高度和宽度。编辑布局时，浏览器需要检查所有其他元素并重新组织页面中的流程。所有受此影响的区域都需要重新计算，然后这些元素需要再次合成。

在GPU上运行优化是确保它们快速运行的唯一方法。GPU熟悉层，它知道如何使用它们执行操作。它也可以移动它们，淡化它们，但它无法更新页面布局。发生这种情况时，由浏览器更新页面布局，这绝对不是首选。与动画相关的CSS使用规则来确保动画可以GPU加速。AMP仅允许动画和转换和不透明度转换，因此不需要页面布局。当网页的绘制部分放在一起并显示在屏幕上时，这称为合成。需要管理的复合图层的数量和用于动画的属性是影响网页性能的两个区域。对于动画，保持变换和不透明度变化以确保AMP快速渲染是明智的。使用这两个属性时，元素应位于各自的复合层上。

AMP完全控制资源的下载 - 它优先加载，这意味着它只会加载所需的内容，并过早地获取需要很长时间才能加载的资源。当AMP工作以下载任何资源时，它将优化下载，以便下载的第一个资源是最重要的资源。只有当用户很有可能被用户看到或者用户很容易快速滚动到广告和图像时，才会下载广告和图像。AMP还会过早地获取需要很长时间才能加载的任何资源。这些都是尽快获取，而它们尽可能晚地加载。因此，项目将快速加载，但仅在用户实际看到资源时才使用CPU。

AMP可帮助页面加载速度极快。Preconnect API是一个新系统，用于确保HTTP请求尽快成功。通过使用它，可以在用户明确声明他们想要导航到它之前呈现网页。在用户物理选择页面时，此页面可能已准备就绪，允许即时加载页面。这种类型的预呈现可以应用于Web上的内容，但同样可以占用大量的CPU和带宽。使用AMP可以减少这两件事。折叠之上的资源只能通过预渲染下载，并且不会呈现CPU可能很昂贵的东西。AMP文档可以预先渲染以帮助即时加载，将下载唯一的资源。

Accelerated Mobile Pages（AMP）是一项开源软件。作为构建静态内容页面的一种方法，AMP有助于确保尽可能快地呈现内容。确保HTML确实是AMP HTML所需的额外工作量不大。富内容只需要一些额外的扩展，以及一些确保可靠性能的限制，但如果一个网站开始时相当简单，它可能已经符合AMP HTML。随着越来越多的人口通过移动设备随时随地访问信息，AMP是朝着正确方向迈出的一步。