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