本頁面由 Cloud Translation API 翻譯而成。

使用第三方嵌入功能的最佳做法

概略說明有效率地載入熱門第三方嵌入的技巧。

Addy Osmani

Katie Hempenius

Lena Sohoni

許多網站會使用第三方嵌入內容，將網頁的某些部分委派給其他內容供應者，藉此打造引人入勝的使用者體驗。最常見的第三方內容嵌入是影片播放器、社交媒體動態饋給、地圖和廣告。

第三方內容可能會在許多方面影響網頁效能。這可能會禁止轉譯功能、與其他網路和頻寬相關的重要資源相互競爭，或是影響網站體驗核心指標的指標。第三方嵌入也可能導致載入時的版面配置位移。本文討論可用於載入第三方嵌入內容、高效率載入技術，以及有助於減少常見嵌入版面配置的版面配置位移工具的「版面配置位移離開工具」工具。

什麼是嵌入

第三方嵌入是指網站上顯示的任何內容，如下所示： * 未經你製作 * 由第三方伺服器放送

顯示多個畫面外嵌入，可能可以延遲載入

嵌入功能經常用於以下情況： * 與體育、新聞、娛樂和時尚相關的網站使用影片擴增文字內容。 * 擁有有效的 Twitter 或社群媒體帳戶的組織，會將這些帳戶動態消息嵌入網頁，以與更多使用者交流，並觸及更多使用者。 * 餐廳、公園和活動場地等網頁通常會嵌入地圖。

第三方嵌入內容通常會載入到網頁的 <iframe> 元素中。第三方供應商提供的 HTML 程式碼片段通常包含 <iframe>，後者會擷取由標記、指令碼和樣式表組成的網頁。部分供應商也會使用可動態插入 <iframe> 的指令碼片段來提取其他內容。這可能會使第三方內容大量嵌入，並延遲第一方內容，進而影響網頁效能。

第三方嵌入項目的效能影響

許多熱門嵌入項目都含有超過 100 KB 的 JavaScript，有時甚至高達 2 MB。這類模組的載入時間較長，且在執行時讓主執行緒保持忙碌狀態。Lighthouse 和 Chrome 開發人員工具等效能監控工具可協助您評估第三方嵌入項目對效能的影響。

減少第三方程式碼的影響 Lighthouse 稽核功能會顯示網頁採用的第三方供應商清單，並提供大小和主執行緒封鎖時間。你可以在 Chrome 開發人員工具的「Lighthouse」分頁中查看稽核結果。

由於嵌入原始碼可能會變更，因此建議您定期稽核嵌入項目和第三方程式碼的成效影響。但可以藉此移除多餘的程式碼。

降低第三方程式碼的影響

載入資料的最佳做法

第三方嵌入內容可能會對效能造成負面影響，但同時也提供多項重要功能。如要有效率地使用第三方嵌入項目，並降低其效能影響，請遵循下列規範。

指令碼排序

在設計完善的頁面中，主要第一方內容是頁面的重點，第三方嵌入內容則會顯示在側邊列或顯示在第一方內容後方。

為了提供最佳的使用者體驗，主要內容必須在其他輔助內容之前快速載入。舉例來說，新聞網頁上的新聞文字必須先載入，然後才能嵌入 Twitter 動態消息或廣告。

第三方嵌入項目可能會幹擾載入第一方內容，因此第三方指令碼代碼的位置相當重要。指令碼可能會影響載入順序，因為 DOM 建構會在指令碼執行時暫停。將第三方指令碼代碼放在重要的第一方代碼後方，並使用 async 或 defer 屬性，以非同步方式載入這些代碼。

<head>
   <title>Order of Things</title>
   <link rel="stylesheet" media="screen" href="/assets/application.css">
   <script src="index.js"></script>
   <script src="https://example.com/3p-library.js" async></script>
</head>

延遲載入

由於第三方內容通常位於主要內容後方，因此網頁載入時可能不會顯示在可視區域中。在此情況下，系統會延後下載第三方資源，直到使用者向下捲動頁面為止。如此一來，不僅可以改善初次載入網頁的體驗，也能降低固定數據方案和網路連線速度緩慢的使用者下載費用。

延後下載內容到實際需要時，稱為「延遲載入」。您可以根據需要和嵌入的類型，使用以下所述的不同延遲載入技術。

「`<iframe>`」的原生延遲載入功能

針對透過 <iframe> 元素載入的第三方嵌入項目，您可以使用瀏覽器層級的延遲載入功能，延遲載入畫面外 iframe，直到使用者捲動接近文字為止。Chrome 77 以上版本支援 <iframe> 的載入屬性，其他以 Chromium 為基礎的瀏覽器也已經導入。

<iframe src="https://example.com"
       loading="lazy"
       width="600"
       height="400">
</iframe>

載入屬性支援下列值：

lazy：表示瀏覽器應延遲載入 iframe。瀏覽器會在靠近可視區域時載入 iframe。如果 iframe 適合延遲載入，請使用此參數。
eager：立即載入 iframe。如果 iframe 不適合延遲載入，請使用這個選項。如未指定 loading 屬性，這是預設行為 (精簡模式除外)。
auto：瀏覽器可決定是否延遲載入這個頁框。

不支援 loading 屬性的瀏覽器會忽略該屬性，因此您可以套用原生延遲載入做為漸進式增強。支援該屬性的瀏覽器對 distance-from-viewport 門檻 (iframe 開始載入的距離) 導入方式可能不同。

以下提供幾種針對不同嵌入類型延遲載入 iframe 的方法。

YouTube 影片：如要延遲載入 YouTube 影片播放器 iframe，請在 YouTube 提供的嵌入程式碼中加入 loading 屬性。延遲載入 YouTube 嵌入項目時，可在初次載入時節省約 500 KB 的內容。

<iframe src="https://www.youtube.com/embed/aKydtOXW8mI"
   width="560" height="315"
   loading="lazy"
   title="YouTube video player"
   frameborder="0"
   allow="accelerometer; autoplay; clipboard-write;
            encrypted-media; gyroscope; picture-in-picture"
   allowfullscreen>
</iframe>

Google 地圖：如要延遲載入 Google 地圖 iframe，請在 Google Maps Embed API 產生的 iframe 嵌入程式碼中加入 loading 屬性。以下是含有 Google Cloud API 金鑰預留位置的程式碼範例。

<iframe src="https://www.google.com/maps/embed/v1/place?key=API_KEY&q=PLACE_ID"
   width="600" height="450"
   style="border:0;"
   allowfullscreen=""
   loading="lazy">
</iframe>

Lazysizes 程式庫

由於瀏覽器除了使用嵌入式的距離與檢視點外，還會使用有效連線類型和精簡模式等信號來判定 iframe 應載入的時機，因此原生延遲載入功能也可能不一致。如果您需要更妥善地控制距離門檻，或是想要跨瀏覽器提供一致的延遲載入體驗，可以使用 Lazysizes 程式庫。

lazysizes 是一種快速且適合 SEO 的延遲載入器，適用於圖片和 iframe。下載這個元件後，您可以透過 iframe 和 iframe 來嵌入 YouTube 影片，如下所示。

<script src="lazysizes.min.js" async></script>

<iframe data-src="https://www.youtube.com/embed/aKydtOXW8mI"
   width="560" height="315"
   class="lazyload"
   title="YouTube video player"
   frameborder="0"
   allow="accelerometer; autoplay; clipboard-write;
        encrypted-media; gyroscope; picture-in-picture"
   allowfullscreen>
</iframe>

同樣地， Lazysize 可與 iframe 搭配使用，用於其他第三方嵌入。

請注意，延遲會使用 Intersection Observer API 偵測元素何時可見。

在 Facebook 中使用資料延遲

Facebook 提供多種可嵌入的社交外掛程式。包括貼文、留言、影片，以及最受歡迎的「喜歡」按鈕。所有外掛程式皆包含 data-lazy 設定。設為 true 時，請設定 loading="lazy" iframe 屬性，確保外掛程式會使用瀏覽器的延遲載入機制。

延遲載入 Instagram 動態消息

Instagram 會在嵌入內容中提供一組標記和指令碼。這個指令碼會將 <iframe> 插入網頁。延遲載入這個 <iframe> 可提升效能，因為內嵌的 gzip 大小可超過 100 KB。許多 WordPress 網站 (例如 WPZoom 和 Elfsight) 使用的 Instagram 外掛程式都提供延遲載入選項。

使用門面元件取代嵌入內容

雖然互動式嵌入能為網頁帶來附加價值，但許多使用者可能不會與其互動。例如，並非每個瀏覽餐廳頁面的使用者都會點擊、展開、捲動和瀏覽嵌入的地圖。同樣地，並非所有透過電信服務供應商頁面的使用者都會與聊天機器人互動。在這類情況下，您可以在所在位置顯示門面，以避免載入或延遲載入嵌入。

門面是一種靜態元素，看起來與實際嵌入的第三方廠商類似，但實際上無法運作，因此載入網頁的稅金會大幅降低。以下將介紹一些方法，以最佳方式載入這類嵌入，同時仍能為使用者帶來一些價值。

使用靜態圖片做為外牆

假如您不需要將地圖嵌入地圖，可以使用靜態圖片來取代這些內嵌地圖。使用者可以放大地圖上感興趣的區域、拍攝圖片，並使用這項功能取代互動式地圖嵌入。您也可以使用開發人員工具的「擷取節點螢幕截圖」功能擷取內嵌 iframe 元素的螢幕截圖，如下所示。

擷取節點螢幕截圖

開發人員工具會將圖片擷取為 png，但你也可以考慮將其轉換為 WebP format for better performance。

使用動態圖片做為外牆

這項技術可讓您在執行階段產生對應於互動式嵌入的圖片。以下提供一些工具，可協助您產生網頁的嵌入式網頁的靜態版本。

Maps Static API：Google Maps Static API 服務會根據標準 HTTP 要求中包含的網址參數產生地圖，並以圖片形式傳回地圖，以供您在網頁上顯示。網址必須包含 Google Maps API 金鑰，且必須以 src 屬性的形式放置在網頁的 <img> 標記中。

靜態地圖製作工具可協助設定網址所需的參數，並即時提供圖片元素的程式碼。

下列程式碼片段顯示來源設為 Maps Static API 網址的圖片程式碼。包含在連結標記中，確保使用者按一下圖片即可存取實際的地圖。(注意：網址不含 API 金鑰屬性)
```
<a href="https://www.google.com/maps/place/Albany,+NY/">
<img src="https://maps.googleapis.com/maps/api/staticmap?center=Albany,+NY&zoom=13&scale=1&size=600x300&maptype=roadmap&format=png&visual_refresh=true" alt="Google Map of Albany, NY">
</a>
```
Twitter 螢幕截圖：這個概念與地圖螢幕截圖類似，可讓您動態嵌入 Twitter 螢幕截圖，而非即時動態饋給。Twitter 訊息是可用於擷取 Tweet 螢幕截圖的工具。Tweetpik API 接受推文的網址，並傳回包含其內容的圖片。API 也接受使用參數來自訂圖片的背景、色彩、邊框及尺寸。

使用點選載入功能增強外框

「點擊載入」的概念結合了延遲載入和門面。頁面一開始會以門面載入。當使用者按一下靜態預留位置與靜態預留位置互動時，系統就會載入第三方嵌入項目。這就是所謂的「互動時匯入」模式，可以按照下列步驟進行導入。

載入網頁時：網頁包含立面或靜態元素。
滑鼠懸停時：立面會預先連線至第三方嵌入提供者。
點擊時：立面會由第三方產品取代。

門面會與第三方嵌入內容搭配使用，方便影片播放器、即時通訊小工具、驗證服務和社交媒體小工具使用。YouTube 影片內嵌的 {1/} 只有圖片以及播放按鈕，是我們經常遇到的情況。只有在你點擊圖片時，系統才會載入實際影片。

您可以利用互動時匯入模式，建立自訂點選載入立面，或使用下列任一適用於不同嵌入類型的開放原始碼門面。

YouTube 介面

Lite-youtube-embed 是 YouTube 播放器中建議的螢幕外觀，不但像真實播放器，但速度可達 224 倍。您可以用這個外掛程式下載指令碼和樣式表，然後在 HTML 或 JavaScript 中使用 <lite-youtube> 標記。您可透過 params 屬性加入 YouTube 支援的自訂播放器參數。
```
<lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>
```
以下為 lite-youtube-embed 與實際嵌入的比較結果。

精簡版 YouTube 嵌入功能

YouTube 內嵌影片

YouTube 與 Vimeo 播放器的其他類似外觀包括 lite-youtube、lite-vimeo-embed 和 lite-vimeo。
即時通訊小工具外觀

React-live-chat-loader 會載入外觀類似即時通訊嵌入的按鈕，而非嵌入本身。這項服務可搭配各種即時通訊供應商平台使用，例如 Intercom、Help Scout、Messenger 等。外觀相似的小工具比即時通訊小工具更輕巧，載入速度也更快。當使用者將滑鼠遊標懸停在按鈕上或點選按鈕，或是網頁長時間閒置時，實際的即時通訊小工具可能替換成實際的即時通訊小工具。Postmark 個案研究中說明瞭他們如何實作即時聊天載入工具，並提升效能。

移除嵌入項目或以連結取代嵌入

如果您發現某些第三方嵌入會導致載入效能不佳，而且使用上述任一技術並非選項，最簡單的方法就是移除整個嵌入。如果您仍希望使用者存取嵌入的內容，可以將 target="_blank" 連結提供給使用者，讓使用者在其他分頁中點選並查看內容。

版面配置穩定性

雖然動態載入嵌入的內容可以改善網頁的載入效能，但有時可能會導致網頁內容意外移動。這就是所謂的版面配置位移。

由於視覺化的穩定性是確保使用者體驗順暢的關鍵，累計版面配置位移 (CLS) 會評估發生變化的頻率和乾擾程度。

為了避免版面配置位移，系統會在載入網頁期間保留稍後動態載入元素的空間。如果瀏覽器知道元素的寬度和高度，就可以決定要保留的空間。您可以指定 iframe 的 width 和 height 屬性，或是針對會載入第三方嵌入內容的靜態元素設定固定大小，藉此確保這一點。舉例來說，YouTube 嵌入內容 iframe 的寬度和高度應如下所示。

<iframe src="https://www.youtube.com/embed/aKydtOXW8mI" width="560" height="315">
</iframe>

YouTube、Google 地圖和 Facebook 等熱門嵌入程式碼提供了已指定尺寸屬性的內嵌程式碼。不過，某些供應商可能並未提供這類資訊。舉例來說，以下程式碼片段無法指出所嵌入內容的尺寸。

<a class="twitter-timeline" href="https://twitter.com/ChannelNewsAsia?ref_src=twsrc%5Etfw" data-tweet-limit="1">Tweets by ChannelNewsAsia</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

在這個網頁轉譯完成後，您可以使用開發人員工具檢查已插入的 iframe。如以下程式碼片段所示，插入的 iframe 高度固定，但寬度是以百分比指定。

<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" class="twitter-timeline twitter-timeline-rendered" style="position: static; visibility: visible; display: inline-block; width: 100%; padding: 0px; border: none; max-width: 1000px; min-width: 180px; margin-top: 0px; margin-bottom: 0px; min-height: 200px; height: 6238.31px;" data-widget-id="profile:ChannelNewsAsia" title="Twitter Timeline">
</iframe>

這項資訊可用於設定所含元素的大小，確保容器在載入動態饋給時不會展開，而且版面配置不會位移。你可以使用以下程式碼片段修正先前加入的內嵌影片大小。

<style>
    .twitterfeed { display: table-cell;  vertical-align: top; width: 100vw; }
    .twitter-timeline {height: 400px !important; }
</style>
<div class=twitterfeed>
       <a class="twitter-timeline" href="https://twitter.com/ChannelNewsAsia?ref_src=twsrc%5Etfw" data-tweet-limit="1">Tweets by ChannelNewsAsia</a>
       <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

版面配置位移終止工具

由於第三方嵌入項目通常會省略最終轉譯內容的尺寸 (寬度、高度)，因此可能會導致網頁上的版面配置大幅偏移。要解決這個問題，可能就需要利用開發人員工具處理各種不同可視區域大小，而不需要手動檢查最終大小。

目前有一項自動化工具「版面配置位移終止工具」，可協助您減少相較於熱門嵌入項目 (例如 Twitter、Facebook 和其他供應商) 的版面配置，

版面配置位移終止工具：

在 iframe 中載入嵌入的用戶端。
將 iframe 調整為各種常見的可視區域大小。
針對每個熱門的可視區域，擷取嵌入的維度，以便產生媒體查詢和容器查詢。
使用媒體查詢 (和容器查詢) 為嵌入標記周圍的最小高度包裝函式調整尺寸，直到嵌入初始化作業完成 (這會移除最小高度樣式)。
產生一個最佳化的內嵌程式碼片段，您可以複製/貼上至網頁，另行將嵌入內容加入網頁。

試用版面配置位移終止工具，同時也歡迎您對 GitHub 提供意見。這項工具仍處於 Beta 版測試階段，日後會經過進一步修正，以長期改善。

結語

第三方嵌入內容可為使用者帶來大量價值，但隨著網頁上的嵌入數量和大小增加，效能可能會下降。因此，請務必根據嵌入的位置、關聯性和潛在使用者需求，對嵌入項目進行評估、判斷及採用適當的載入策略。