AMP
EN
德語 法語 阿拉伯語 西班牙語 義大利語 印尼語 日語 韓語 葡萄牙語 俄語 土耳其語 中文 波蘭語 越南語

最佳化您託管的 AMP 網頁

重要事項：本文件不適用於您目前選取的廣告格式！

本指南為網站管理員提供關於如何最佳化其託管的 AMP 網站的提示與指引。

AMP 預設不就很快嗎？

AMP 執行階段已針對速度進行最佳化，而且如果您的 AMP 網頁是由 AMP 快取提供服務，則這些網頁已完全最佳化並提供最高的載入效能。例如，如果您的使用者是從行動裝置上的 Google 搜尋來到您的 AMP 網頁，預設情況下，這些網頁是由 AMP 快取提供服務。

然而，AMP 網頁並非總是從 AMP 快取提供服務。網站可能會決定從他們自己的伺服器針對其他流量來源顯示 AMP 網頁。最常見的使用案例是完全以 AMP 建置的網站，例如 axios.com，使用者會直接前往該網站。另一個流量來源是 Twitter，Twitter 已開始連結至 AMP 網頁，而不是提供標準行動版本。這表示如果使用者點擊 Twitter 行動應用程式中的連結，該連結會連至您自有來源上的 AMP 版本網頁 (如果有的話)。

因此，您無法永遠確定您的 AMP 網頁僅從 AMP 快取提供服務。對於從您自己的伺服器提供 AMP 網頁的情況，請務必確保您的 AMP 網頁提供最佳的載入效能。

AMP 網頁預設載入速度很快，但您可以實作一些額外的效能最佳化，以協助瀏覽器更快載入 AMP 網頁。本指南說明您在發佈 AMP 網頁時應考慮的幾項最佳化。不過，在您開始閱讀本指南之前，請務必先涵蓋所有基本網路效能最佳實務。尤其是圖片最佳化，對於載入效能有很大的影響。

例如，透過應用下列最佳化技術

「The Scenic」範本在 3G 連線速度下快兩秒。

如果您想跳過詳細資訊，請使用 AMP 網頁體驗指南來檢查您的 AMP 網頁是否有可進行的效能最佳化。

使用 AMP Optimizer

伺服器端算繪 AMP 版面配置是 AMP 快取使用的一種技術，可進一步加快載入時間。透過伺服器端算繪，可以移除 AMP 樣板，讓 AMP 文件可以在不執行 AMP 執行階段 JavaScript 的情況下繪製。例如，伺服器端算繪版本的 AMP 樣板產生器比一般 AMP 版本算繪速度快兩倍！

如果您要發佈 AMP 網頁，則應使用 AMP Optimizer。AMP Optimizer 可讓您從自己的後端提供已最佳化的 AMP 網頁，其中包括伺服器端算繪 AMP 版面配置。AMP Optimizer 也會自動執行本文件中說明的許多其他最佳化。

預先載入首頁圖片

AMP HTML 使用自己的圖片元素：amp-img。amp-img 相較於傳統 HTML img 標籤有許多優點，但缺點之一是必須先載入 AMP 執行階段，才能開始下載圖片。對於某些圖片 (例如產品頁面的首頁圖片)，圖片必須盡快載入至關重要。在這些情況下，請使用屬性 data-hero 註解圖片

<amp-img src="hero.jpg" data-hero ...>

這可讓 AMP 快取和 AMP Optimizer 伺服器端算繪 img，進而大幅縮短載入時間。另一個最佳實務是預先載入圖片，以確保瀏覽器盡快開始下載圖片。

<head>
  <link rel="preload" href="/images/elephants.png" as="image">
</head>
<body>
  ...
  <amp-img width="404" height="720" layout="responsive"
           src="/images/elephants.png" alt="..." >
  </amp-img>
</body>

但是，如果您的回應式版面配置需要根據螢幕寬度而定，使用不同的首頁圖片，該怎麼辦？例如，桌上型電腦的寬圖片和行動裝置的窄圖片，如下所示

<amp-img width="404" height="720"
    alt="..." layout="responsive"
    src="/images/elephants_narrow.png"
    media="(max-width: 415px)">
</amp-img>
<amp-img height="720"
    alt="..." layout="fixed-height"
    src="/images/elephants_wide.jpg"
    media="(min-width: 416px)">
</amp-img>

好處是 link rel=preload 也支援媒體查詢。因此，我們可以在預先載入陳述式中使用相同的媒體查詢，如下所示

<link rel="preload" as="image"
    href="/images/elephants_narrow.png"
    media="(max-width: 415px)">
<link rel="preload" as="image"
    href="/images/elephants_wide.jpg"
    media="(min-width: 416px)">

順帶一提，相同的方法也適用於 amp-video 海報圖片

<link rel="preload" href="/images/poster.jpg" as="image">
...
 <amp-video width="480" height="270" src="elephant.mp4"
             poster="/images/poster.jpg"
             layout="responsive">
     ...
</amp-video>

只要確保將預先載入陳述式放在 viewport 宣告之後即可，因為瀏覽器需要 viewport 尺寸才能判斷螢幕寬度

<meta name="viewport" content="width=device-width">
...
<link rel="preload" media="(max-width: 415px)" ...>

僅預先載入重要圖片，否則圖片下載可能會佔用其他重要下載所需的頻寬。

考慮使用 Service Worker

既然所有主要瀏覽器都支援 Service Worker，最好評估在您的網站中新增 Service Worker 是否合理。

我們知道有兩種不同的架構模式適用於可靠的快速導覽

  • 對於單頁應用程式：App Shell 模型 (在 AMP 環境中稱為 AMP-in-PWA)。此模式需要 Service Worker 將 AMP 文件升級至以 App Shell 為基礎的 PWA 體驗。
  • 對於多頁應用程式：串流複合資源。Service Worker 會快取靜態標頭和頁尾，並使用串流立即傳回快取的局部回應，同時載入內容。

如果未使用上述任何模式，且無法快取整個網站 (僅適用於非常小的網站)，則 Service Worker 可能會產生負面效能影響。在這種情況下，最好的做法是不要使用 Service Worker。

但是，如果您希望您的網站可以從主畫面安裝，或想要提供離線體驗，則必須使用 Service Worker。在這種情況下，請務必使用導覽預先載入來減輕潛在的效能降低 (注意：目前只有 Chrome 支援導覽預先載入)。

如果您的 AMP 網站使用 Service Worker，以下是一些最佳實務

如果您正在尋找在 AMP 網站中開始使用 Service Worker 的方法，請查看此範例，其中提供實作所有這些最佳實務的 Service Worker。

AMP 執行階段的 max-age 僅為 50 分鐘，以確保更新能快速可用。為了避免可能發生的瀏覽器快取遺失，最好從 Service Worker 提供 AMP 執行階段。

預先快取不僅與從快取的 AMP 網頁轉換到您自有來源上的非 AMP 網頁相關，也與從快取的 AMP 網頁轉換到您自有來源上的 AMP 網頁相關。原因是 AMP 快取會將 AMP 執行階段網址從常青網址重寫為最新的發佈版本，例如

https://cdn.ampproject.org/v0.js -> https://cdn.ampproject.org/rtv/001515617716922/v0.js。

結果是從您自有來源提供的 AMP 網頁無法從瀏覽器快取中受益，在這種情況下，必須再次下載 (未版本化的) AMP 執行階段。透過 Service Worker，您可以預先快取未版本化的 AMP 執行階段並加快轉換速度。若要深入瞭解 AMP 快取為何對 AMP 執行階段網址進行版本控制，請閱讀本文件。

在 Safari 中，Service Worker 的實作方式存在關鍵差異 - 如果網頁是從 AMP 快取提供的，則無法在 Safari 中為您的來源安裝 Service Worker。

最佳化自訂字型

使用 AMP，您可以執行一些操作來最佳化您的字型載入 (其中大多數實際上並非 AMP 特有)

  • 如果可以，請使用 font-display: optional：這只會在字型已在快取中時使用該字型，如果您的自訂字型尚未載入，則會回退到系統字型。
  • 最佳化您的網路字型 (例如，使用 WOFF2 提供自訂字型)。
  • 預先載入自訂字型
<link rel="preload" as="font" href="/bundles/app/fonts/helveticaneue-roman-webfont.woff2" >
  • 如果您使用 Google 字型或任何其他具有未知字型網址的字型供應商，請預先連線各自的字型伺服器
 <link rel="preconnect dns-prefetch" href="https://fonts.gstatic.com/" crossorigin>

最後但並非最不重要的一點是，盡量減少您在網頁上使用的自訂字型數量。如果可以，請使用系統字型而非自訂字型，因為系統字型可讓您的網站與使用者的作業系統相符，並有助於避免載入更多資源。

基本最佳化

當然，所有基本的網路效能最佳化也適用於 AMP 網頁