什麼是AMP以及如何通過AMP優化網頁性能

1316字
7分鐘
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更新請求來強制刷新快取。

總結

AMP為移動頁面提供了一種高效的解決方案，通過減少頁面的加載時間，提升使用者體驗，並且對於SEO有顯著的幫助。通過嚴格遵循AMP規範，我們可以將現有的網頁改造成AMP頁面，使其在移動設備上更加快速和優雅地呈現。對於尋求提升移動網頁性能的開發者來說，AMP無疑是一個值得深入了解與實踐的技術。