AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

最佳化您的託管 AMP 頁面

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

AMP 預設不就很快嗎？

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

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

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

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

舉例來說，藉由套用下列最佳化技術

「The Scenic」範本在 3G 連線上的載入速度快了兩秒。

如果您想略過細節，請使用 AMP 頁面體驗指南，檢查您的 AMP 頁面是否有潛在的效能最佳化。

使用 AMP Optimizer

伺服器端轉譯 AMP 版面配置是 AMP 快取用來進一步加速載入時間的技術。透過伺服器端轉譯，可以移除 AMP 樣板程式碼，以便在不執行 AMP 執行階段 JavaScript 的情況下繪製 AMP 文件。舉例來說，伺服器端轉譯版本的 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>

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

<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 頁面