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