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

概述如何高效地加载热门第三方嵌入代码。

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

许多网站使用第三方嵌入功能将网页的某些部分委托给其他内容提供者，从而提供富有吸引力的用户体验。最常见的第三方内容嵌入示例包括视频播放器、社交媒体 Feed、地图和广告。

第三方内容可通过多种方式影响网页的效果。它可能会阻塞渲染、与其他关键资源争用网络和带宽，或者影响核心网页指标。第三方嵌入代码也可能会导致其加载时布局偏移。本文介绍了加载第三方嵌入时可以采用的性能最佳实践、高效的加载技术，以及有助于减少热门嵌入的布局偏移的 Layout Shift Terminator 工具。

什么是嵌入

第三方嵌入内容是指您网站上显示且符合以下条件的任何内容：

  • 并非由您创作
  • 通过第三方服务器投放

显示多个可延迟加载的屏幕外嵌入

嵌入常用于以下领域：

  • 与体育、新闻、娱乐和时尚相关的网站使用视频来丰富文本内容。
  • 拥有有效 Twitter 或社交媒体账号的组织会将这些账号中的 Feed 嵌入到其网页中，以吸引更多人并与之互动。
  • 餐馆、公园和活动场地页面通常会嵌入地图。

第三方嵌入代码通常加载到网页上的 <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 库。

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 中使用数据延迟机制

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

延迟加载 Instagram 信息流

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

将嵌入替换为 Facade

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

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> 具有放大和缩小功能的地图嵌入。
。 嵌入地图
即图像的地图立面。
地图立面

Facade 是一个静态元素，它看起来和实际的嵌入式第三方很相似，但它不起作用，因此对页面加载的负担更小。下面是一些策略，可优化加载此类嵌入，同时仍能为用户提供一些价值。

使用静态图片作为立面

在您不需要使地图具有互动性的情况下，可以使用静态图片代替地图嵌入。您可以在地图上放大感兴趣的区域、拍摄图片并使用该图片替代交互式地图嵌入。您还可以使用开发者工具的捕获节点屏幕截图功能，截取嵌入的 iframe 元素的屏幕截图。

截取节点屏幕截图

开发者工具会以 png 的形式捕获图片，但您也可以考虑将其转换为 WebP 格式，以提高性能。

将动态图片用作立面

通过此方法，您可以在运行时生成与交互式嵌入相对应的图像。下面列出了一些可让您在网页上生成静态版本的嵌入的工具。

  • 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 屏幕截图，而不是实时 Feed。Tweetpik 是一种可用于截取 Twitter 微博屏幕截图的工具。Tweetpik API 会接受 Twitter 微博的网址，并返回图片及内容。该 API 还接受用于自定义图片的背景、颜色、边框和尺寸的参数。

使用点击加载功能增强立面

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

  1. 网页加载时：网页上包含 Facade 或静态元素。
  2. 鼠标悬停时：Facade 会预连接到第三方嵌入提供程序。
  3. 点击时：Facade 会被第三方产品替换。

立面可与视频播放器、聊天微件、身份验证服务和社交媒体微件的第三方嵌入方式搭配使用。我们经常遇到 YouTube 视频嵌入，这些图片只是带有播放按钮的图片。只有在您点击图片后，系统才会加载实际视频。

您可以使用互动时导入模式构建自定义的点击加载 Facade，也可以使用以下某种适用于不同嵌入类型的开源 Facade。

  • YouTube Facade

    Lite-youtube-embed 是 YouTube 播放器的推荐 Facade，它看起来像真实播放器，但速度是原来的 224 倍。如需使用该功能，请先下载脚本和样式表，然后在 HTML 或 JavaScript 中使用 <lite-youtube> 标记。您可以通过 params 属性添加 YouTube 支持的自定义播放器参数。

    <lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>

    以下是精简版 YouTube 嵌入与实际嵌入的比较。

    <ph type="x-smartling-placeholder">
    </ph> 精简版 YouTube 嵌入 <ph type="x-smartling-placeholder">
    </ph> 精简版 YouTube 嵌入
    <ph type="x-smartling-placeholder">
    </ph> 实际的 YouTube 嵌入内容 <ph type="x-smartling-placeholder">
    </ph> YouTube 嵌入

    适用于 YouTube 和 Vimeo 播放器的其他类似 Facade 包括 lite-youtube、lite-vimeo-embed 和 lite-vimeo。

  • 聊天 widget Facade

    React 实时聊天加载器会加载看起来像嵌入聊天内容的按钮，而不是嵌入内容本身。它可与各种聊天提供商平台（例如 Intercom、Help Scout、Messenger）搭配使用。相似 widget 比聊天 widget 轻得多，加载速度也更快。当用户悬停或点击按钮时，或者页面长时间处于空闲状态时，它可以替换为实际的聊天微件。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>

此信息可用于为所含元素设置尺寸，以确保容器不会在加载 Feed 时展开，且不会发生布局偏移。以下代码段可用于修正之前包含的嵌入内容的大小。

<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 调整为各种常用的视口尺寸。
  • 对于每个常用视口，捕获嵌入的尺寸，以便稍后生成媒体查询和容器查询。
  • 在嵌入初始化（随后移除最小高度样式之后）之前，使用媒体查询（和容器查询）将嵌入标记的最小高度封装容器大小调整。

  • 生成经过优化的嵌入代码段，可复制并粘贴到您原本要嵌入网页的位置。

    安装换档终端

欢迎试用 Layout Shift Terminator，欢迎随时在 GitHub 上提供反馈。该工具目前处于 Beta 版阶段，旨在通过进一步优化来不断改进。

总结

第三方嵌入可为用户带来很多价值，但随着页面上嵌入数量和大小的增加，性能可能会下降。正因如此，我们有必要根据嵌入的位置、相关性和潜在用户情况来衡量、判断和使用合适的嵌入加载策略。需求。