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

有效載入熱門第三方嵌入內容的技術總覽。

Addy Osmani
Katie Hempenius
Katie Hempenius
X
Leena Sohoni
Leena Sohoni
X

許多網站會使用第三方嵌入內容，將網頁的部分區段委派給其他內容供應商，藉此打造引人入勝的使用者體驗。最常見的第三方內容嵌入範例包括影片播放器、社群媒體動態消息、地圖和廣告。

第三方內容可能會以多種方式影響網頁效能。這類資源可能會阻礙算繪、與其他重要資源爭用網路和頻寬，或影響 Core Web Vitals 指標。第三方嵌入內容載入時，也可能會導致版面配置位移。本文將說明載入第三方嵌入內容時可採用的效能最佳做法、有效率的載入技術，以及有助於減少熱門嵌入內容版面配置位移的 Layout Shift Terminator 工具。

什麼是嵌入

第三方嵌入內容是指網站上顯示的任何內容，包括：

  • 不是由您撰寫
  • 從第三方伺服器提供

顯示多個螢幕外內嵌內容，這些內容可能會延遲載入。

嵌入功能常見的用途如下：

  • 運動、新聞、娛樂和時尚相關網站會使用影片來補充文字內容。
  • 擁有有效 Twitter 或社群媒體帳戶的機構，會在網頁中嵌入這些帳戶的動態消息，與更多人互動並觸及更多人。
  • 餐廳、公園和活動場地網頁通常會嵌入地圖。

第三方嵌入內容通常會載入頁面上的 <iframe> 元素。第三方供應商提供的 HTML 片段通常包含 <iframe>，可擷取由標記、指令碼和樣式表組成的網頁。部分供應商也會使用動態插入 <iframe> 的指令碼片段，以擷取其他內容。這可能會導致第三方嵌入內容過於龐大，延遲顯示第一方內容，進而影響網頁效能。

第三方嵌入內容對效能的影響

許多熱門的嵌入內容都包含超過 100 KB 的 JavaScript，有時甚至高達 2 MB。載入時間較長，且執行時會讓主執行緒忙碌。Lighthouse 和 Chrome 開發人員工具等效能監控工具，有助於評估第三方嵌入內容對效能的影響。

Lighthouse 稽核的「降低第三方程式碼的影響」部分會顯示網頁使用的第三方供應商清單，以及大小和主執行緒封鎖時間。稽核功能位於 Chrome 開發人員工具的 Lighthouse 分頁中。

嵌入內容的原始碼可能會變更，因此建議您定期稽核嵌入內容和第三方程式碼對效能的影響。您可以藉此機會移除任何多餘的程式碼。

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，直到使用者捲動到附近為止。<iframe> 的載入屬性適用於所有新式瀏覽器。

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

loading 屬性支援下列值：

  • lazy：表示瀏覽器應延後載入 iframe。瀏覽器會在 iframe 即將進入可視區域時載入 iframe。如果 iframe 適合延遲載入，請使用這個屬性。
  • eager：立即載入 iframe。如果 iframe 不適合延遲載入，請使用這個屬性。如果未指定 loading 屬性，系統會預設執行這項操作，Lite 模式除外。
  • 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 地圖嵌入 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 適用於圖片和 iframe，是快速且有利於 SEO 的延遲載入器。下載元件後，即可搭配 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>

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

請注意，lazysizes 會使用 Intersection Observer API 偵測元素何時顯示。

在 Facebook 中使用 data-lazy

Facebook 提供不同類型的社群外掛程式，可供嵌入。包括貼文、留言、影片和最受歡迎的「喜歡」按鈕。所有外掛程式都包含 data-lazy 的設定。將這個屬性設為 true，可確保外掛程式會設定 loading="lazy" iframe 屬性，使用瀏覽器的延遲載入機制。

延遲載入 Instagram 動態消息

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

以外觀取代嵌入內容

雖然互動式嵌入內容可為網頁增添價值，但許多使用者可能不會與其互動。舉例來說，並非所有瀏覽餐廳頁面的使用者都會點選、展開、捲動及瀏覽地圖嵌入內容。同樣地，並非所有造訪電信服務供應商網頁的使用者都會與聊天機器人互動。在這種情況下，您可以顯示外觀，完全避免載入或延遲載入嵌入內容。

內嵌地圖，可放大及縮小。
地圖門面元件 (圖片)。

門面元件是類似實際嵌入第三方內容的靜態元素，但無法運作，因此對載入網頁的負擔較小。以下是幾種策略，可讓您以最佳方式載入這類嵌入內容，同時仍為使用者提供一些價值。

使用靜態圖片做為外觀

如果不需要互動式地圖，可以改用靜態圖片，取代嵌入的地圖。您可以放大地圖上感興趣的區域，擷取圖片，然後使用這張圖片取代互動式地圖嵌入。您也可以使用開發人員工具的「當前節點螢幕截圖」功能，擷取內嵌 iframe 元素的螢幕截圖。

HTML 編輯器中的內容選單，特別標出「capture node screenshot」選項。

開發人員工具會將圖片擷取為 png，但您也可以考慮將圖片轉換為 WebP 格式，以提升效能。

使用動態圖片做為外觀

這項技術可讓您在執行階段生成與互動式嵌入內容相應的圖片。以下列出幾個工具，可讓您在網頁上產生嵌入內容的靜態版本。

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

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

    下列程式碼片段顯示圖片的程式碼，來源設為 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 螢幕截圖，而非現行動態饋給。Tweetpik 是其中一種可擷取推文螢幕截圖的工具。Tweetpik API 會接受推文網址，並傳回含有推文內容的圖片。API 也接受參數，可自訂圖片的背景、顏色、邊框和尺寸。

使用點擊載入功能改善外觀

點擊後載入的概念結合了延遲載入和外觀。網頁一開始會載入門面元件。使用者點選靜態預留位置時，系統會載入第三方嵌入內容。這也稱為「互動時匯入」模式，可透過下列步驟實作。

  1. 載入網頁時：頁面會包含門面元件或靜態元素。
  2. 滑鼠游標懸停時：門面元件會預先連線至第三方嵌入供應商。
  3. 點按時：外觀會替換為第三方產品。

外觀可搭配第三方嵌入內容使用，例如影片播放器、即時通訊小工具、驗證服務和社群媒體小工具。我們經常看到 YouTube 影片嵌入內容只是圖片，並附上播放按鈕。只有在點選圖片時，系統才會載入實際影片。

您可以運用「互動時匯入」模式建構自訂的點擊載入外觀，也可以使用下列其中一個開放原始碼外觀，適用於不同類型的嵌入內容。

  • 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 嵌入
    Lite 版 YouTube 嵌入內容
    實際嵌入 YouTube 影片
    YouTube 嵌入內容

    YouTube 和 Vimeo 播放器還有其他類似的介面，例如 lite-youtube、lite-vimeo-embed 和 lite-vimeo。

  • 即時通訊小工具門面元件

    直播一起看聊天室載入器會載入類似聊天室嵌入的按鈕，而非嵌入本身。這項功能可與各種即時通訊平台搭配使用，例如 Intercom、Help Scout、Messenger。相似小工具比即時通訊小工具輕量許多，載入速度也更快。當使用者將游標懸停在按鈕上或點選按鈕，或網頁閒置時間過長時，系統就會顯示實際的即時通訊小工具。Postmark 個案研究說明瞭他們如何導入 react-live-chat-loader，以及成效提升情形。

    HTML 編輯器中的 Postmark 即時通訊小工具，顯示封裝的程式碼。

如果發現某些第三方嵌入內容導致載入效能不佳，且無法使用先前所述的任何技術，最簡單的做法就是完全移除嵌入內容。如果仍希望使用者能存取嵌入內容，可以透過 target="_blank" 提供連結，讓使用者點選並在另一個分頁中查看。

版面配置穩定性

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

視覺穩定性對流暢的使用者體驗至關重要，因此 Cumulative Layout Shift (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 大小調整為各種常見的可視區域大小。
  • 針對每個熱門的檢視區塊，擷取嵌入的尺寸，以便稍後產生媒體查詢和容器查詢。
  • 使用媒體查詢 (和容器查詢) 調整嵌入標記周圍的 min-height 包裝函式大小，直到嵌入初始化為止 (之後會移除 min-height 樣式)。

  • 產生最佳化的嵌入程式碼片段，可複製並貼到您原本要將嵌入內容加入網頁的位置。

    顯示程式碼輸出內容和預覽畫面的版面配置位移終結器。

歡迎試用 Layout Shift Terminator，並在 Layout Shift Terminator GitHub 專案中留下意見回饋。這項工具目前為 Beta 版，未來會持續改善。

結論

第三方嵌入內容可為使用者帶來許多價值，但如果網頁上的嵌入內容數量和大小增加，效能可能會受到影響。因此，您必須根據嵌入內容的位置、關聯性和潛在使用者需求，評估並採用適當的載入策略。