Google 会使用 AI 技术将内容翻译成您偏好的语言。AI 翻译可能包含错误。

使用第三方嵌入代码的最佳做法

高效加载热门第三方嵌入内容的技巧概览。

Addy Osmani

Katie Hempenius

Leena Sohoni

许多网站都使用第三方嵌入内容，将网页的某些部分委托给其他内容提供商，从而打造引人入胜的用户体验。第三方内容嵌入内容最常见的示例包括视频播放器、社交媒体信息流、地图和广告。

第三方内容会以多种方式影响网页的性能。它可能会阻止渲染，与其他关键资源争用网络和带宽，或影响 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>

加载属性支持以下值：

lazy：表示浏览器应延迟加载 iframe。浏览器会在 iframe 即将进入视口时加载该 iframe。如果 iframe 非常适合延迟加载，请使用此值。
eager：立即加载 iframe。如果 iframe 不适合延迟加载，请使用此值。如果未指定 loading 属性，则这是默认行为（简易模式除外）。
auto：浏览器确定是否延迟加载此框架。

不支持 loading 属性的浏览器会忽略该属性，因此您可以将浏览器级延迟加载作为渐进增强功能应用。支持该属性的浏览器可能会针对与视口距离阈值（iframe 开始加载的距离）采用不同的实现方式。

以下是一些针对不同类型的嵌入内容延迟加载 iframe 的方法。

YouTube 视频：如需延迟加载 YouTube 视频播放器 iframe，请将 loading 属性添加到 YouTube 提供的嵌入代码中。延迟加载 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，请将 loading 属性添加到 Google Maps Embed API 生成的 iframe 嵌入代码中。以下是代码示例，其中包含 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 延迟加载器。下载该组件后，您可以将其与 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>

同样，lazysizes 也可以与其他第三方嵌入内容的 iframe 搭配使用。

请注意，lazysizes 使用 Intersection Observer API 来检测元素何时变为可见。

在 Facebook 中使用 data-lazy

Facebook 提供了不同类型的社交插件，这些插件可以嵌入。这包括帖子、评论、视频以及最受欢迎的“赞”按钮。所有插件都包含 data-lazy 的设置。将其设置为 true 可确保插件通过设置 loading="lazy" iframe 属性来使用浏览器的延迟加载机制。

延迟加载 Instagram 信息流

Instagram 提供了一个标记块和一个脚本作为嵌入内容的一部分。该脚本会将 <iframe> 注入到网页中。延迟加载此 <iframe> 可以提高性能，因为嵌入内容的大小经过 gzip 压缩后可能会超过 100 KB。许多适用于 WordPress 网站的 Instagram 插件（例如 WPZoom 和 Elfsight）都提供了延迟加载选项。

使用外观替换嵌入内容

虽然互动式嵌入内容为网页增添了价值，但许多用户可能不会与它们互动。例如，并非每个浏览餐厅页面的用户都会点击、展开、滚动和浏览地图嵌入内容。同样，并非每个访问电信服务提供商页面的用户都会与聊天机器人互动。在这些情况下，您可以完全避免加载或延迟加载嵌入内容，而是在其位置显示外观。

外观是一种静态元素，看起来与实际嵌入的第三方内容类似，但没有功能，因此对网页加载的负担要小得多。以下是一些策略，可用于以最佳方式加载此类嵌入内容，同时仍为用户提供一些价值。

使用静态图片作为外观

如果您可能不需要使地图具有互动性，则可以使用静态图片来代替地图嵌入内容。您可以放大地图上感兴趣的区域，截取图片，然后使用此图片来代替互动式地图嵌入内容。您还可以使用开发者工具的截取节点屏幕截图 功能来截取嵌入的 iframe 元素的屏幕截图。

HTML 编辑器中突出显示的“捕获节点屏幕截图”选项。

开发者工具会将图片截取为 png，但您也可以考虑将其转换为 WebP 格式，以获得更好的性能。

使用动态图片作为外观

借助此技巧，您可以在运行时生成与互动式嵌入内容对应的图片。以下是一些工具，可让您在网页上生成嵌入内容的静态版本。

Maps Static API：Google Maps Static API 服务会根据标准 HTTP 请求中包含的网址参数生成地图，并将地图作为图片返回，您可以在网页上显示该图片。该网址需要包含 Google 地图 API 密钥，并且必须作为 src 属性放置在网页上的 <img> 标记中。

Static map maker 工具可帮助您配置网址所需的参数，并实时提供图片元素的代码。

以下代码段显示了将来源设置为 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 屏幕截图，而不是实时 Feed。Tweetpik 是一款可用于截取推文屏幕截图的工具。Tweetpik API 接受推文的网址，并返回包含其内容的图片。该 API 还接受用于自定义图片的背景、颜色、边框和尺寸的参数。

使用点击加载来增强外观

点击加载概念结合了延迟加载和外观。网页最初会加载 Facade。当用户通过点击与静态占位符互动时，系统会加载第三方嵌入内容。这也被称为“互动时导入”模式，可以使用以下步骤实现。

网页加载时：网页上包含 Facade 或静态元素。
鼠标悬停时：外观预先连接到第三方嵌入内容提供商。
点击时：外观被第三方产品替换。

外观可以与视频播放器、聊天微件、身份验证服务和社交媒体微件的第三方嵌入内容搭配使用。我们经常遇到的 YouTube 视频嵌入内容（仅包含播放按钮的图片）就是外观。只有在您点击图片时，系统才会加载实际视频。

您可以使用“互动时导入”模式构建自定义点击加载外观，也可以使用以下适用于不同类型嵌入内容的开源外观之一。

YouTube Facade

Lite-youtube-embed 是 YouTube 播放器的推荐 Facade，它看起来像真实的播放器，但速度快了 224 倍。您可以通过下载脚本和样式表，然后在 HTML 或 JavaScript 中使用 <lite-youtube> 标记来使用它。YouTube 支持的自定义播放器参数可以通过 params 属性添加。
```
<lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>
```
以下是 lite-youtube-embed 与实际嵌入内容的比较。

Lite-YouTube 嵌入内容

YouTube 嵌入内容

适用于 YouTube 和 Vimeo 播放器的其他类似外观包括 lite-youtube、lite-vimeo-embed 和 lite-vimeo。
聊天微件外观

React live chat loader 会加载一个看起来像聊天嵌入内容的按钮，而不是嵌入内容本身。它可以与各种聊天提供商平台（例如 Intercom、Help Scout、Messenger）搭配使用。外观微件比聊天微件轻得多，加载速度也更快。当用户将鼠标悬停在按钮上或点击按钮时，或者当网页长时间处于闲置状态时，它可以被实际的聊天微件替换。Postmark 案例研究介绍了他们如何实现 react-live-chat-loader 以及他们实现的性能改进。

移除嵌入内容或使用链接替换嵌入内容

如果您发现某些第三方嵌入内容会导致加载性能不佳，并且无法使用之前介绍的任何技巧，那么最简单的做法就是完全移除嵌入内容。如果您仍希望用户能够访问嵌入内容中的内容，可以提供一个指向该内容的链接，并使用 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>

Layout Shift Terminator

由于第三方嵌入内容通常会省略其呈现的最终内容的尺寸（宽度、高度），因此它们可能会导致网页上发生显著的布局偏移。如果不使用开发者工具在各种不同的视口尺寸下手动检查最终尺寸，则很难解决此问题。

现在，Layout Shift Terminator 是一款自动化工具，可帮助您减少热门嵌入内容（例如来自 Twitter、Facebook 和其他提供商的嵌入内容）的布局偏移。

Layout Shift Terminator：

在 iframe 中加载嵌入内容客户端。
将 iframe 调整为各种热门视口尺寸。
对于每个热门视口，捕获嵌入内容的尺寸，以便稍后生成媒体查询和容器查询。
使用媒体查询（和容器查询）在嵌入内容标记周围设置最小高度封装容器，直到嵌入内容初始化（之后移除最小高度样式）。
生成经过优化的嵌入内容代码段，您可以将其复制并粘贴到您原本要在网页中添加嵌入内容的位置。

试用 Layout Shift Terminator，并随时在 Layout Shift Terminator GitHub 项目中留下任何反馈。该工具处于 Beta 版状态，旨在通过进一步改进来不断完善。

总结

第三方嵌入内容可以为用户提供很多价值，但随着网页上嵌入内容的数量和大小的增加，性能可能会受到影响。因此，有必要根据嵌入内容的位置、相关性和潜在用户的需求，衡量、判断并使用适当的嵌入内容加载策略。