AMP Optimizer 運作方式

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

AMP Optimizer 接受有效的 AMPHTML 文件作為輸入，並轉換為最佳化版本，方法是套用額外的最佳化，這些最佳化若要「手動」完成會很麻煩。您可以透過 html 元素中的 transformed 屬性，辨識產生的「已轉換的 AMP」

<html ⚡ lang="en" i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1">

AMP 快取使用不同的轉換旗標，例如，Google AMP 快取會新增 transformed=google;v=1。

AMP Optimizer 對 AMP 文件執行各種最佳化，範圍從伺服器端算繪版面配置到圖片最佳化。以下範例顯示 AMP 頁面及其最佳化版本之間的差異 (按一下以檢視大型版本)。

在本指南的其餘部分，我們將更詳細地介紹這些最佳化。

伺服器端算繪 AMP 版面配置

伺服器端算繪 AMP 版面配置具有最大的潛力來提升 AMP 頁面的載入效能。為了避免內容跳動，AMP 要求網站在標頭中新增 AMP 樣板程式碼。AMP 樣板程式碼會將頁面主體的透明度設為 0，以隱藏頁面內容。AMP 載入完成後，就能計算頁面的版面配置。之後，AMP 會將主體的透明度設為 1，使頁面內容可見。遺憾的是，此方法必須先下載 AMP 架構，才能算繪頁面。

為了改善這一點，AMP 版面配置 (例如 responsive 或 fixed-height 版面配置) 可以在伺服器端算繪，然後再將頁面提供給使用者代理程式。這樣一來，就能移除 AMP 樣板程式碼，同時仍然避免在頁面載入期間發生內容位移。

伺服器端算繪會執行三件事

⁣1. 移除 AMP 樣板程式碼：針對每個使用 AMP 版面配置的元素，都會注入特定版面配置的標記。

⁣2. 行內 AMP 內部 CSS 樣式：AMP 樣板程式碼會被 AMP 執行階段 CSS 樣式取代：<style amp-runtime>...</style>。對於非伺服器端算繪的文件，AMP 會在執行階段新增這些樣式。但是，伺服器端算繪的 AMP 頁面需要這些樣式，才能在 AMP 載入之前讓 AMP 版面配置運作。為了避免潛在的版本衝突，在執行階段，AMP 會檢查 i-amphtml-version="011905222334000" 中指定的版本是否與目前的 AMP 版本不同，如果不同，則會使用最新版本更新 CSS。

<style amp-runtime i-amphtml-version="011905222334000">html{overflow-x:hidden!important}html.i-amphtml-...</style>

⁣3. 伺服器端算繪的 AMP 版面配置：針對每個使用 AMP 版面配置的元素，都會注入特定版面配置的尺寸調整器元素。

<amp-img src="image.jpg" width="1080" height="610" layout="responsive" alt="..."
         class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive">
  <i-amphtml-sizer style="display:block;padding-top:56.4815%;"></i-amphtml-sizer>
</amp-img>

AMP 樣板程式碼並非總是能移除。您可以查看 html 元素上是否存在 i-amphtml-no-boilerplate 屬性，以判斷樣板程式碼是否已移除。例如，amp-experiment 元件會在執行階段變更頁面內容。為了避免內容位移，如果頁面上使用 amp-experiment，則需要存在 AMP 樣板程式碼。

首頁圖片最佳化

AMP Optimizer 可以顯著縮短在第一個可視區域中算繪圖片所需的時間。這對於最佳化 LCP 時間以符合 Core Web Vitals 至關重要。

在 AMP 中，首頁圖片可以透過使用 data-hero 屬性註解 amp-img 來明確宣告

<amp-img data-hero src="/hero.jpg" layout="responsive" width="640" height="480" alt="..."></amp-img>

AMP Optimizer 在一個頁面上最多支援兩個首頁圖片，以避免封鎖其他重要資源的頻寬。如果此限制不符合您的需求，請告訴我們。

AMP Optimizer 也會自動偵測 amp-img、amp-iframe、amp-video 或 amp-video-iframe 元素的首頁圖片，並為圖片 src 注入 link rel=preload。自動偵測的運作方式是分析 HTML 標記和圖片版面配置，以偵測第一個可視區域中的大型圖片。

在 amp-img 的情況下，AMP Optimizer 也會在伺服器端算繪 amp-img 內部的 img 標記。這讓瀏覽器能夠立即算繪圖片，而無需 AMP 執行階段。

圖片最佳化

AMP Optimizer 可以協助您提供最佳化的回應式圖片，方法是產生 AMP 版面配置特定的 srcset 屬性。例如，以下 amp-img 宣告

<amp-img src="image1.png" width="400" height="800" layout="responsive" alt="..."></amp-img>

會透過以下 srcset 定義來增強

<amp-img src="image1.png" width="400" height="800" layout="responsive" alt="..." srcset="image1.470w.png 470w, image1.820w.png 820w, image1.1440w.png 1440w"></amp-img>

為了讓這能運作，您的建置/託管環境需要支援調整圖片大小/最佳化圖片。請查看個別的最佳化工具指南，以瞭解如何以最佳方式整合圖片最佳化。

AMP 模組建置 (即將推出)

有一個較小版本的 AMP 執行階段和元件，是根據 JavaScript 模組建置的，這要求使用者在檢視 AMP 頁面時下載較少的 JavaScript。AMP Optimizer 預設啟用 AMP 模組建置，方法是轉換

<script async src="https://www.ampproject.org/v0.js"></script>

為

<script type="module" async src="https://www.ampproject.org/v0.mjs"></script>
<script nomodule async src="https://www.ampproject.org/v0.js"></script>

瞭解 type="module" 的瀏覽器會忽略具有 nomodule 屬性的指令碼。這表示使用現代瀏覽器的使用者將受益於較小的執行階段套件組合，而使用舊版瀏覽器的使用者將會回退到非模組版本的 AMP 執行階段。

AMP 模組建置僅適用於已轉換的 AMP，因為它需要行內 AMP 執行階段 CSS。

作者： @sebastianbenz