什么是AMP以及如何通过AMP优化网页性能

1255字
6分钟
2024-08-17
- SEO

随着移动设备的普及，页面加载速度对于用户体验和SEO优化变得尤为重要。AMP（Accelerated Mobile Pages，即加速移动页面）是一项由Google主导的开源技术，旨在通过特定的框架和限制优化网页性能，减少加载时间。本文将先介绍AMP的概念及其优势，随后通过具体的实践代码，展示如何将一个标准网页改造成AMP页面，最后讨论部署AMP页面时可能遇到的问题。

什么是AMP？

AMP是一种轻量级框架，旨在提升移动设备上的网页加载速度。它通过对HTML、CSS和JavaScript的严格规范，减少了页面的渲染时间，提升了用户体验。AMP的核心特点包括：

高性能：通过限制页面内容，减少不必要的资源加载，实现更快的页面展示。
移动优先：AMP专为移动设备设计，但也适用于桌面设备。
SEO优势：AMP页面在Google搜索结果中具有优先展示的潜力，提升了曝光率。

AMP的优势

加载速度快：AMP通过限制外部JavaScript、强制CSS内联化等手段，大幅度缩短了页面的加载时间。
用户体验优化：更快的页面加载意味着用户可以更迅速地访问内容，减少页面跳出率。
SEO友好：AMP页面在搜索引擎结果页面（SERP）中享有更高的展示优先级，尤其是在移动搜索中。

AMP页面改造示例

为了更好地理解AMP的实际应用，我们将通过代码展示如何将一个普通的HTML页面改造为AMP页面。

原始HTML页面

这是一个标准的HTML页面示例：

1
<!doctype html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
    <title>我的普通网页</title>
7
    <link rel="stylesheet" href="styles.css" />
8
  </head>
9
  <body>
10
    <h1>欢迎来到我的网站</h1>
11
    <img src="example.jpg" alt="示例图片" />
12
    <script src="script.js"></script>
13
  </body>
14
</html>

AMP改造后的页面

AMP页面与普通HTML页面的不同之处在于，它遵循严格的AMP规范，包括引入AMP核心脚本、使用AMP组件替换标准HTML标签、强制CSS内联等。以下是改造后的AMP页面：

1
<!doctype html>
2
<html ⚡>
3
  <head>
4
    <meta charset="utf-8" />
5
    <link rel="canonical" href="self.html" />
6
    <meta name="viewport" content="width=device-width,minimum-scale=1" />
7
    <style amp-boilerplate>
8
      body {
9
        -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
10
        -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
11
        -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
12
        animation: -amp-start 8s steps(1, end) 0s 1 normal both;
13
      }
14
      @-webkit-keyframes -amp-start {
15
        from {
16
          visibility: hidden;
17
        }
18
        to {
19
          visibility: visible;
20
        }
21
      }
22
      @-moz-keyframes -amp-start {
23
        from {
24
          visibility: hidden;
25
        }
26
        to {
27
          visibility: visible;
28
        }
29
      }
30
      @-ms-keyframes -amp-start {
31
        from {
32
          visibility: hidden;
33
        }
34
        to {
35
          visibility: visible;
36
        }
37
      }
38
      @-o-keyframes -amp-start {
39
        from {
40
          visibility: hidden;
41
        }
42
        to {
43
          visibility: visible;
44
        }
45
      }
46
      @keyframes -amp-start {
47
        from {
48
          visibility: hidden;
49
        }
50
        to {
51
          visibility: visible;
52
        }
53
      }
54
    </style>
55
    <noscript
56
      ><style amp-boilerplate>
57
        body {
58
          -webkit-animation: none;
59
          -moz-animation: none;
60
          -ms-animation: none;
61
          animation: none;
62
        }
63
      </style></noscript
64
    >
65
    <script async src="https://cdn.ampproject.org/v0.js"></script>
66
  </head>
67
  <body>
68
    <h1>欢迎来到我的网站</h1>
69
    <amp-img
70
      src="example.jpg"
71
      width="800"
72
      height="600"
73
      layout="responsive"
74
      alt="示例图片"
75
    ></amp-img>
76
  </body>
77
</html>

关键改造步骤

DOCTYPE声明：使用 <html ⚡> 以表明这是一个AMP页面。
AMP脚本：在<head>中加入AMP核心脚本 <script async src="https://cdn.ampproject.org/v0.js"></script>。
图片标签替换：使用 <amp-img> 标签代替标准的 <img> 标签，同时声明宽高及布局属性以符合AMP规范。
内联CSS：AMP页面的CSS必须内联，并且限制在50KB以内。

AMP页面的部署与验证

在将AMP页面部署上线前，我们需要对其进行验证和测试，以确保页面符合AMP标准。

验证AMP页面

使用AMP Validator工具，可以快速验证AMP页面是否符合规范。将页面的URL或者HTML粘贴到验证器中，即可查看是否存在不符合AMP标准的代码。

部署AMP页面的注意事项

SEO与AMP：AMP页面必须包含 <link rel="canonical" href="URL">，以指向原始非AMP版本的页面，这对于SEO优化至关重要。
AMP Cache：AMP页面可以通过Google的AMP Cache服务进行缓存，这进一步提升了页面的加载速度。在配置AMP Cache时，可以参考官方文档。

常见部署问题及解决方案

CSS超出限制：由于AMP限制CSS大小不能超过50KB，开发者可能需要对CSS进行精简，或者将页面切分为多个子页面。
禁止使用自定义JavaScript：AMP不允许直接使用JavaScript脚本，所有的交互功能必须通过AMP的内置组件实现，例如使用 <amp-bind> 实现动态内容绑定。
页面更新延迟：使用AMP Cache时，页面的更新可能不会立即反映。可以通过发送AMP Cache更新请求来强制刷新缓存。