AMP加速移动页面

5大大大大雄
504 阅读3分钟

对于移动端最看重莫过于加载速度，而由Google与Twitter合作开发的开源框架，它提供了一种直接的方式来创建轻量级的网页，以便用户即时使用，获得了极大改善的体验：内容更快，更具吸引力，更易于阅读，这个技术就是AMP（Accelerated Mobile Pages）。从本质上讲，AMP框架允许我们通过简化HTML和简化的CSS规则来为移动设备构建轻量级体验。

AMP特点：

  • 加载速度快：AMP制定了一些严格的页面编写规范，并且提供了一些功能标签。满足这些阅读和使用这些标签之后，使得静态或简单交互页面加载速度和性能有15%-85%的提生
  • seo搜索：谷歌和微软等公司已经创建了缓存来存储没有验证错误的 AMP 页面。这些缓存可以对您网站的内容应用强大的性能优化，而不会影响您的用户体验它的方式。缓存的 AMP 页面也与搜索引擎集成，因此可以在几秒钟内从搜索结果中访问您的网站 - 甚至更短 -很多现成AMP组件：AMP为开发者提供了很多组件：页面Google广告接入组件，嵌入Facebook或者Twitter或者YouTube等社交分享组件，Google流量统计组件等。

AMP加速原理：

  • 异步执行所有 AMP JavaScript:AMP 仅允许异步 JavaScript
  • 静态调整所有资源的大小:图片、广告或 iframe 等外部资源必须在 HTML 中声明其大小，以便 AMP 可以在资源下载前确定每个元素的大小和位置。AMP 不必等待所有资源都下载完成就可以直接加载网页布局
  • AMP 不会让扩展机制阻塞网页呈现:AMP组件内部优化，不会阻塞网页
  • 所有CSS 都必须内嵌并具有大小限值:CSS 会阻塞所有呈现和网页加载，并且往往变得臃肿。在 AMP HTML 网页中，只允许内嵌样式（最大50kb），减少额外的css加载，
  • 字体触发必须高效：不存在会阻碍浏览器下载字体的 HTTP 请求
  • 最大程度减少样式重新计算次数：在 AMP 网页中，所有 DOM 读取都发生在写入之前。这样可以确保每帧最多只有一次样式重新计算
  • 仅运行 GPU 加速的动画：GPU 可以优化动画，但无法更新网页布局，而AMP 仅允许在变形和不透明度上进行动画处理和变换，因此不需要网页布局
  • 设定资源加载的优先级：它会设定资源加载的优先级、仅加载需要的内容，以及预提取具有延迟加载特性的资源
  • 瞬时加载网页：大量使用全新的 预加载(preconnect API)，从而确保 HTTP 请求的速度尽可能快

制作 简单 AMP HTML 网页

  • 1、新建一个html为后缀的文件
<!doctype html>
<html amp lang="en">
<head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello, AMPs</title>
    <link rel="canonical" href="https://amp.dev/zh_cn/documentation/guides-and-tutorials/start/create/basic_markup/">
    <meta name="viewport" content="width=device-width">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <style amp-boilerplate>
        body {
            -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
            -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
            -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
            animation: -amp-start 8s steps(1, end) 0s 1 normal both
        }
        @-webkit-keyframes -amp-start {
            from {
                visibility: hidden
            }

            to {
                visibility: visible
            }
        }
        @-moz-keyframes -amp-start {
            from {
                visibility: hidden
            }

            to {
                visibility: visible
            }
        }
        @-ms-keyframes -amp-start {
            from {
                visibility: hidden
            }

            to {
                visibility: visible
            }
        }
        @-o-keyframes -amp-start {
            from {
                visibility: hidden
            }

            to {
                visibility: visible
            }
        }
        @keyframes -amp-start {
            from {
                visibility: hidden
            }

            to {
                visibility: visible
            }
        }
    </style><noscript>
        <style amp-boilerplate>
            body {
                -webkit-animation: none;
                -moz-animation: none;
                -ms-animation: none;
                animation: none
            }
        </style>
    </noscript>
</head>
<body>
    <h1>Welcome to the mobile web</h1>
</body>
</html>

- 注意事项，AMP网页强烈建议使用https协议。
- 必须以<!doctype html>开头
- 包含顶级 `<html ⚡>` 标记，或者<html amp>，表示该网页被标识为AMP内容
- <script async src="https://cdn.ampproject.org/v0.js"></script>加载AMP js库
- AMP HTML 文档的 `head` 标记中必须包含样板代码（从<style amp-boilerplate>到</noscript>）,且其中尽量不要有空格，否则容易报错。
- AMP的事件与平常HTMP不同，需要单独按照AMP格式编写才可以
- 如果是AMP页面，控制台会出现 `Powered by AMP ⚡ HTML`
- 如果要调式，可以在当前链接后面加入#development=1，控制台将显示是否存在任何会导致您的网页无法成为有效 AMP 文档的问题,一旦都没有问题会显示AMP validation successful.。
avatar
文章
阅读
粉丝