加载具有完美 Core Web Vitals 的聊天小部件

如何正确加载聊天小部件！

我已经反复说过了。有些脚本比其他脚本更重要。在互联网的历史上，从来没有人因为聊天小部件没有在页面加载的前500毫秒内加载而感到烦恼。那个页面还是空白的时间段。

在页面的主要内容还没有开始加载之前就加载聊天小部件，这不合理对吧？不，更合理的做法是先加载最重要的部分（你的 logo、主图、样式表、字体，也许还有一些处理导航和转化的超级重要的脚本）

不幸的是，大多数网站并不是这样做的。我每天都看到不重要的脚本（如聊天脚本）在页面加载开始时以最高优先级加载。

在这篇文章中，我将解释如何正确加载聊天脚本，以及这如何影响 Largest Contentful Paint 和 Interaction to Next Paint 等重要指标。

背景：聊天小部件是如何工作的

聊天小部件通常通过在页面上加载一个小脚本来工作。该脚本会加载一些样式并在页面上注入一个 iframe。iframe 是网页中的一个小型隔离网页。这个 iframe 会处理与客户聊天所需的一切。

聊天小部件如何影响 Core Web Vitals？

聊天小部件通过以下几种方式影响 Core Web Vitals：

1. 它们通过争夺早期网络资源来影响 First Contentful Paint 和 Largest Contentful Paint。

2. 它们通过阻塞主线程以及有时在交互后缓慢更新来影响 Interaction to Next Paint。

3. 当它们在页面上渲染不正确时，可能导致布局偏移

聊天小部件导致的 Largest Contentful Paint 问题

当聊天小部件争夺网络资源时，会影响 Core Web Vitals。JavaScript 通常比图片更早排队下载。这意味着，在最坏的情况下（当聊天脚本是渲染阻塞的），浏览器必须等待聊天脚本下载并执行完毕后，才能继续处理其他任何内容。

即使聊天脚本被延迟加载，它仍然可能通过几种方式影响绘制指标。首先让我解释延迟脚本的作用。浏览器可以并行下载延迟脚本，并且浏览器可以继续渲染直到 DomContentLoaded 事件。之后它会执行脚本。问题在于，对于回访用户来说，LCP 元素可能还没有在 DomContentLoaded 事件时加载完成，但（已缓存的）聊天脚本会执行，从而导致 LCP 指标延迟。

聊天小部件导致的 Interaction to Next Paint (INP) 问题

聊天小部件会通过两种方式影响 Interaction to Next Paint。第一种方式是在聊天小部件执行脚本或检查更新时短暂阻塞主线程。这就是事物运作的方式。你"添加到页面"的每样东西都会使页面稍微变慢。 

第二种方式是由于糟糕的编码（相信我，有一些编码很差的聊天小部件）。说到聊天小部件，"更流行"并不意味着"编码更好"。当糟糕的代码需要很长时间来更新展示时，你就会自动遇到 INP 问题。我想一些聊天提供商需要提升他们的水平。这部分不幸不在我的控制范围内。如果你选择了一个"编码很差"的聊天小部件，我没有办法让那些代码变得更好。 

聊天小部件导致的 Layout Shift (CLS) 问题

有时聊天小部件会导致布局偏移。在检查聊天小部件相关的布局偏移时，我通常会查看3个常见原因。

• 每次聊天加载时都会发生的布局偏移
• 延迟"聊天打开"时发生的布局偏移
• 加载聊天历史记录（回访聊天用户）时发生的布局偏移

如何修复聊天脚本导致的 Core Web Vitals 问题

<script>
<script>

修复聊天小部件导致的 Cumulative Layout Shift 问题

<style>
/*hide chat widget by default*/
.chatwidget{opacity:0}
/*show chat widget after .showchat body class*/
body.showchat .chatwidget {opacity:1}
<style>

<script>
chat.ready(function(){
  document.documentElement.classList.add('showchat');})
<script>

就是这样！祝你加速聊天小部件顺利