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

快速載入熱門第三方嵌入內容的技巧總覽。

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

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

第三方內容可能會對網頁效能造成許多影響。這可能會阻礙轉譯功能、與網路和頻寬的其他重要資源競爭，或是影響 Core Web Vitals 指標。第三方嵌入項目也可能導致版面配置在載入時位移。本文將討論載入第三方嵌入項目時可使用的效能最佳做法、高效率的載入技術，以及有助於減少熱門嵌入項目的版面配置位移工具。

什麼是嵌入？

第三方嵌入是指您網站上出現以下行為的任何內容：

  • 並非由您撰寫
  • 由第三方伺服器提供

顯示多個螢幕外嵌入項目，這些嵌入可以延遲載入

嵌入在下列項目中的經常用：

  • 運動、新聞、娛樂和時尚相關的網站會使用影片來增加文字內容。
  • 擁有活躍 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，直到使用者捲動接近這些 iframe 為止。所有新式瀏覽器皆可使用 <iframe> 的載入屬性。

<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 程式庫。

lazysize 是適合 SEO 快速載入的延遲載入器，適用於圖片和 iframe。下載元件後，即可將該元件與 YouTube 嵌入內容的 iframe 搭配使用，如下所示。

<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>

同樣地，延遲尺寸也可以搭配其他第三方嵌入的 iframe 使用。

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

使用 Facebook 中的資料延遲

Facebook 提供不同類型的可嵌入的社交外掛程式。包括貼文、留言和影片，以及最熱門的 [喜歡] 按鈕。所有外掛程式都有 data-lazy 的設定。設為 true 可確保外掛程式透過設定 loading="lazy" iframe 屬性，使用瀏覽器的延遲載入機制。

延遲載入 Instagram 動態饋給

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

以門面元件取代嵌入

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

使用放大和縮小功能的地圖嵌入。
，瞭解如何調查及移除這項存取權。 嵌入地圖
這是圖片的地圖立面。
地圖立面

門面是一種靜態元素，看起來與實際的內嵌第三方類似，但無法正常運作，因此大幅降低網頁載入的負擔。如要以最佳方式載入這類嵌入，同時仍為使用者提供一些價值，可以參考以下幾項策略。

使用靜態圖片做為門面

可使用靜態圖片取代地圖嵌入，這樣一來，您或許不需要讓地圖與使用者互動。您可以將地圖上的感興趣的區域放大、擷取圖片，並使用該區域取代互動式地圖嵌入。您也可以使用開發人員工具的「擷取節點螢幕截圖」功能，擷取內嵌 iframe 元素的螢幕截圖。

擷取節點螢幕截圖

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

使用動態圖片做為門面

這項技術可讓您在執行階段產生與互動式嵌入項目相對應的圖片。您可以使用下列工具產生靜態版本的嵌入內容。

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

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

    以下程式碼片段顯示圖片來源設為 Maps Static API 網址的圖片。系統已在 link 標記中納入該路徑，確保使用者只要點選圖片，就能存取實際的地圖。(注意：網址未包含 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 螢幕截圖，而非即時動態嵌入。有一種工具可用於擷取 Tweet 的 Twitter 推文。TweetpikTweetpik API 接受 Tweet 訊息的網址，並傳回包含其內容的圖片。API 也接受使用參數自訂圖片的背景、色彩、邊框和尺寸。

使用點選載入功能強化立面

「點擊載入」概念結合了延遲載入和立面。頁面一開始會隨著門面載入。使用者按下靜態預留位置並進行互動時，系統就會載入第三方嵌入項目。這個模式又稱為「匯入互動時匯入」模式，可透過下列步驟導入。

  1. 載入網頁時：網頁包含門面或靜態元素。
  2. 滑鼠懸停：中繼介面會預先連線至第三方嵌入供應商。
  3. 點擊時：門面會由第三方產品取代。

立面可在第三方嵌入的影片播放器、即時通訊小工具、驗證服務和社群媒體小工具中使用。單純附有播放按鈕的圖片內嵌 YouTube 影片就是我們經常看到的外牆內容。只有在您按一下圖片時，才會載入實際影片。

您可以採用「import onInteracting」模式建立自訂的點擊載入立面，或使用以下適用於不同嵌入項目的開放原始碼立面介面。

  • 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 嵌入次數
    YouTube 嵌入項目

    YouTube 和 Vimeo 播放器的其他類似外觀包括 lite-youtube、lite-vimeo-embed 和 lite-vimeo。

  • Chat 小工具立面

    回應聊天室載入器：載入類似聊天室 (而非嵌入) 的按鈕。可搭配多種即時通訊服務供應商平台使用，例如 Intercom、Help Scout、Messenger。外觀小工具比即時通訊小工具更輕，載入速度更快。如果使用者將遊標懸停在按鈕上或點選按鈕，或是頁面閒置太久，可用的即時通訊小工具就會替換為實際的即時通訊小工具。Postmark 個案研究說明瞭他們如何導入 react-live-chat-loader 並改善成效。

    貼文標記即時通訊小工具

如果您發現某些第三方嵌入項目會導致載入效能不佳，而且使用上述任何技術都無法選擇，最簡單的方法就是完全移除該嵌入影片。如果您仍希望使用者存取嵌入的內容，可以提供 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>

版面配置位移終止器

第三方嵌入通常會忽略最終算繪內容的尺寸 (寬度、高度)，因此可能會導致大量的網頁版面配置位移。如果不手動檢查在各種不同可視區域大小的最終尺寸，使用開發人員工具檢查最終尺寸可能並不容易。

現在有一個自動化工具「Layout Shift Terminator」，可減少來自熱門嵌入項目 (例如 Twitter、Facebook 和其他供應商) 的版面配置位移。

版面配置位移終止器：

  • 在 iframe 中載入嵌入用戶端。
  • 將 iframe 調整成各種常見的可視區域大小。
  • 針對每個熱門可視區域，擷取嵌入項目維度，以便稍後產生媒體查詢和容器查詢。
  • 使用媒體查詢 (和容器查詢) 調整嵌入標記周圍的最小高度包裝函式，直到嵌入初始化 (之後會移除最小高度樣式)。

  • 產生最佳化的嵌入程式碼片段，你可以複製並貼到網頁上，以便嵌入網頁。

    車內減速端子

試用版面配置位移終止器，並前往 GitHub 留下任何意見回饋。這項工具目前仍在 Beta 版測試階段，目標是進一步改善成效。

結論

第三方嵌入能為使用者帶來許多助益，但隨著網頁的嵌入數量和大小增加，效能可能受到影響。因此，必須根據嵌入項目的位置、關聯性和潛在使用者，對嵌入項目進行評估、判斷及使用適當的載入策略。系統會按照資料類型和業務需求 將資料儲存到不同類型的儲存空間