完璧な Core Web Vitals でチャットウィジェットを読み込む方法

チャットウィジェットを正しく読み込む方法！

何度も繰り返し言ってきました。スクリプトには重要度の違いがあります。ページ読み込みの最初の500ミリ秒以内にチャットウィジェットが読み込まれなかったことに腹を立てた人は、インターネットの歴史上一人もいません。ページがまだ白紙の状態のその時間帯です。

ページのメインコンテンツがまだ読み込み始めてもいない段階でチャットウィジェットを読み込むなんて、意味がないですよね？最も重要な要素（ロゴ、メイン画像、スタイルシート、フォント、ナビゲーションやコンバージョンを処理する重要なスクリプトなど）を先に読み込む方がはるかに理にかなっています。

残念ながら、ほとんどのウェブサイトはこのようにしていません。私は毎日のように、重要でないスクリプト（チャットスクリプトなど）がページ読み込みの開始直後に最高優先度で読み込まれているのを目にしています。

この記事では、チャットスクリプトを正しく読み込む方法と、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 は通常、画像よりも先にダウンロードキューに入れられます。これは、最悪の場合（チャットスクリプトがレンダリングブロッキングの場合）、ブラウザはチャットスクリプトのダウンロードと実行が完了するまで、他の処理を続行できないことを意味します。

チャットスクリプトがdeferredであっても、いくつかの方法でペイント指標に影響を与える可能性があります。まず、deferredスクリプトの動作を説明します。ブラウザはdeferredスクリプトを並行してダウンロードでき、DomContentLoadedイベントまでレンダリングを続行できます。その後、スクリプトを実行します。問題は、リピーターの場合、DomContentLoadedイベントの時点で LCP 要素がまだ読み込まれていない可能性があるのに対し、（キャッシュされた）チャットスクリプトが実行されることで LCP 指標に遅延が生じることです。

チャットウィジェットが引き起こす Interaction to Next Paint (INP) の問題

チャットウィジェットは、2つの方法で Interaction to Next Paint に影響を与えます。1つ目は、チャットウィジェットがスクリプトを実行したり更新をチェックする間、メインスレッドを短時間ブロックすることです。これは仕組み上避けられないことです。ページに「追加する」ものはすべて、ページを少し遅くします。 

2つ目は、コードの品質が悪い場合です（信じてください、粗悪なコードのチャットウィジェットは実際に存在します）。チャットウィジェットに関しては、「人気がある」ことは「コードが優れている」ことを意味しません。粗悪なコードが表示の更新に時間がかかると、自動的に 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>

以上です！チャットウィジェットの高速化、頑張ってください！