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 模組建置 (即將推出)

根據 JavaScript 模組，有較小版本的 AMP 執行階段和元件可用，這要求使用者在檢視 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