チャットウィジェット 100% pagespeed

チャットウィジェットはどのように機能しますか？

チャットウィジェットは通常、いくつかの JavaScript コードの形式で提供されます。このコードを Web ページの HTML に追加します。自分でコーディングする必要なく、ページにチャットウィジェットが自動的に表示されます。

チャットウィジェットを作成した JavaScript は、ページに 1、2、または 3 つの iframe を配置することでこれを行います。iframe は、ページに埋め込まれたミニ Web ページです。チャットはサイト上で実行されるのではなく、チャットプラグイン自体のサイトを介して実行されます。iframe と、チャット全体を処理するチャットサーバーとの間に接続が確立されます。

lighthouse スコアに対するチャットウィジェットの影響

チャット iframe の読み込みは、多くの場合、比較的高コストな問題です。新しいチャットページをページ内に読み込む必要があります。このチャットページでは多くの場合、多くの javascript が必要になり、読み込みと実行に時間がかかります。全体として、これは lighthouse スコアに大きな影響を与えます。たとえば、私たちの lighthouse スコアは 35 ポイントも低下しました。

1. Speed index +3.6sec
2. Time to interactive +10.9sec.
3. Total blocking time +1 sec.

チャットウィジェットで lighthouse スコアを改善する方法

多くの Web マスターは、チャットウィジェットが単にページを遅くし、チャットウィジェットをほとんど制御できないため、これについては何もできないと考えています。彼らは部分的に正しいです。 サイトに貼り付ける必要がある javascript の部分が直接遅延を引き起こすわけではありません。JavaScript は、ページ上で一連のアクションを開始します。これらのアクションは Web ページを遅くし、確かに、あなたはそれに対してほとんど影響力を持ちません。

だからこそ、私たちは賢く、問題を回避する必要があります。代替案はありません。チャットウィジェットがページのレンダリングを妨げないようにする必要があります。チャットウィジェットは、ブラウザの 'main thread' がページの読み込みとレンダリングを完了した後に実行する必要があります。 

これは、JavaScript 関数 setTimeout() とページ読み込みイベントを使用して実現します。読み込みイベントは、HTML、CSS、および JavaSript が読み込まれて解析されたときに発生します。 setTimeout() 関数は、指定されたコマンドを指定されたミリ秒数後に実行します。この例：setTimeout(function(){alert('test')},4000)は、4 秒（または 4000 ミリ秒）後にブラウザにアラートをポップアップ表示します。

読み込みイベントと setTimeout 関数を使用して、HTML、CSS、および JacvaScript が解析されてから 1500 ミリ秒後までチャットウィジェットのレンダリングを遅らせることができます。この時点で、ブラウザの main thread がアイドル状態であることはほぼ間違いありません。

. 最初に、チャットウィジェットを関数でラップする必要があります。そして、読み込みイベントの 1500 ミリ秒後、main thread がおそらくアイドル状態のときに、この関数を呼び出します。このページで facebook チャットプラグインに対してこれを実装すると、最終的にこのコードが得られます

var _x = function(d, s, id) {
    window.fbAsyncInit = function() {
        FB.init({
            xfbml: true,
            version: 'v8.0'
        });
    };
    var js, fjs = d.getElementsByTagName (s) [0];
    if (d.getElementById(id)) return;
    js = d.createElement(s);
    js.id = id;
    js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';
    fjs.parentNode.insertBefore (js, fjs);
};

setTimeout(function() { _x(document, 'script', 'facebook-jssdk') }, 4000);

このトリックは、あらゆるチャットプラグインで実行できます。多少の手作業が必要で、たとえば WordPress プラグインは使用できません。わかりませんか？喜んでお手伝いします！

これですべての page speed の問題は解決しましたか？

チャットウィジェットが上記の方法で読み込まれると、チャットウィジェットの Lighthouse スコアは 100% になります。これは、すべての page speed の問題が解決されたことを意味しますか？

はい、部分的にはそうですが、完全ではありません。プログレッシブレンダリングを使用して、ページの読み込み中にページの最も重要な部分を早期に読み込み、重要度の低い部分（チャットウィジェット）を読み込みサイクルの最後にプッシュしました。 LCP (Largest Contentful Paint) や FCP (First Contentful Paint) などの重要な指標は、チャットウィジェットを 'クリティカルレンダリングパス' から削除したため、大幅に改善されました。 これにより、ブラウザはより早く 'ブロックモード' を終了でき、最初のブロック時間が大幅に短縮されます。

その後、それは別の話になります。チャットウィジェットをページ読み込みサイクルの最後にプッシュすることで、lighthouse の測定外になります。チャットウィジェットの読み込みが開始されると、ブラウザの main thread がブロックされます。ページは一瞬インタラクティブではなくなります。 この動作の影響は、チャットウィジェットによって異なります。最も人気のあるチャットウィジェットは、後で実行してもページを著しくブロックすることはありません。

チャットウィジェットは、設計上 pagespeed の遅延を引き起こすように構築されています。ページを高速化するには、選択を行う必要があります。それらの選択は決して完璧ではありません。チャットウィジェットを読み込みサイクルの最後にプッシュすると、LCP と FCP がはるかに早くなりますが、一方で、速度の向上の一部は解釈の余地があります。