サイトを遅くせずにライブチャットを入れる方法
ライブチャットは、訪問者が本当に話したくなるまで、ページにほとんど負担をかけないのが理想です。このガイドでは、チャットウィジェットが最初のクリック前に何を読み込むのか、選ぶ前に何を確認すべきか、Spookatを数分で導入する方法、そしてページが速いままであることをDevToolsで確かめる方法を紹介します。
クリック前にチャットウィジェットがかけるコスト
ほとんどの訪問者はチャットを一度も開きません。読んで、スクロールして、場合によっては購入して、去っていきます。それでも、ページ読み込み時にウィジェットが読み込むものは、訪問者全員が負担しています。安いスマートフォンで電波の弱い場所にいる人も含めてです。
このコストは4つに分けられます。
- バイト数。 JavaScript、CSS、フォント、画像、そして多くの場合は独自のドキュメントを持つiframeです。特に重いのはJavaScriptで、ブラウザはダウンロードし、解析し、メインスレッドで実行します。スクロールやタップを処理するのと同じスレッドです。
- リクエスト。 リクエストはすべて往復通信で、初めてのドメインへのリクエストにはさらにDNSルックアップとTLSハンドシェイクがかかります。読み込み時に自社サーバーへ通信するウィジェットは、それをすべてのページビューに上乗せします。
- ストレージ。 操作の前に書き込まれるCookie、localStorage、IndexedDBです。EUでは、ウィジェットを読み込む前に同意が必要かどうかがこれで決まることがあります。
- メインスレッドの時間。 起動時に動くコードは、あなた自身のコードと競合します。LighthouseではTotal Blocking Timeとして報告され、スコアに表れます。
私たちの比較ページに載っている4つのウィジェットは、誰もクリックしないうちにgzip圧縮で220〜509 kbを読み込んでいました。これは2026-09-26に、各ウィジェットを空のテストページに読み込み、転送バイト数を合計して測ったものです。数値と出典は/vsにあります。比較のために言うと、この記事全体のテキストは20 kb未満です。
ボタンを表示するだけなら、そのどれも必要ありません。ボタンは数百バイトのHTMLとCSSで作れます。それ以外のもの(チャットパネル、サーバーへの接続、履歴)は、誰かがクリックしてから必要になるものです。
ウィジェットを選ぶ前に確認すること
どのチャットウィジェットでも、ブラウザと10分あれば評価できます。訪問者への影響が大きい順に、見るべきポイントを挙げます。
クリック前の重さ
ベンダーのデモページか自分のステージングサイトを開き、DevToolsを開いて、キャッシュを無効にした状態で再読み込みします。Networkタブをベンダーのドメインで絞り込み、転送サイズを合計してください。クリック前に数キロバイトを超えるものは、ほとんどの訪問者が開かないパネルのために、訪問者全員がダウンロードしているコードです。
クリック前のリクエストと送信先
リクエスト数を数え、ドメインをメモします。ページ読み込み時にAPIと通信するウィジェットは、すべての訪問者について何かを送っています。少なくとも、その訪問者が存在することと、どのページにいるかです。さらに、第三者のアナリティクスやエラートラッキングを読み込むものもあります。
クリック前のCookieとストレージ
ウィジェットに触れずに、まっさらな状態で読み込んだ後のApplicationタブを確認します。ウィジェットのドメインが設定したCookieや、ウィジェットが書き込んだストレージのキーは、同意バナーで扱う必要があるかもしれないものです。私たちは弁護士ではありませんし、ルールは国によって異なるので、ご自身のサイトに何が当てはまるかは専門家に確認してください。いちばん説明しやすいのは、訪問者がチャットを始めるまで何も保存しないウィジェットです。
チームがどこで返信するか
チャットの価値は返信で決まります。返信のために別のダッシュボードを開く必要があるなら、誰かがそのタブを一日中開いておかなければなりません。チャットがチームのいつもの場所(Slack、Discord)に届くなら、返信はスレッドにメッセージを1つ送るだけです。
チームが増えたときの費用
シート課金は、返信する可能性のある全員に料金がかかります。解決件数課金は、返信のたびに料金がかかります。サイト課金なら、誰が何回返信しても、かかるのはサイトの料金だけです。
スマートフォン
幅375 pxの画面でランチャーを確認します。自分のサイトのボタンを隠してはいけませんし、親指で押せるように44 px以上あるべきです。パネルを開いて入力してみてください。キーボードで入力欄が隠れてはいけません。
手順:spookatでライブチャットを導入する
Spookatは、上のチェック項目を前提に作られています。スニペットは私たちのCDNから小さなランチャーを1つ読み込み、そこにはサイトのデザインがすでに含まれています。クリック前に私たちのAPIへのリクエストは0件で、Cookieも設定しません。チームはSlackのスレッドやDiscordのフォーラム投稿で返信します。料金はbroke afで1サイトあたり月$4.99、チームメンバーは無制限で、トライアルはカード不要の14日間です。
1. スニペットを取得する
ダッシュボードにサインインしてサイトを追加します。インストールページに、サイトキーが入った状態のスニペットとコピーボタンが表示されます。アドレスにドメインを入れて直接開くこともできます。
https://app.spookat.com/install?domain=your-domain.com2. 閉じbodyタグの前に貼り付ける
タグは1つだけです。ページ内のどこでも構いませんが、</body>の直前がおすすめです。
<script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>asyncは、ブラウザがファイルを取得している間もページの描画を続け、届いた時点で実行するという意味です。このファイルがランチャーで、ボタンとそのスタイル、そしてダッシュボードで公開したデザインが入っています。gzip圧縮で4 kbを超えるとビルドが失敗します。2026-09-27時点の計測では2.0 kbでした。
シングルページアプリの場合は、再描画されるコンポーネントではなく、ルートのHTMLテンプレートにタグを置いてください。ランチャーは自分がすでに存在するかを確認するので、2つ目のコピーは何もしませんが、1か所に1つのタグのほうが把握しやすくなります。
3. デザインを選ぶ
スタイルは8種類、セルフホストのフォントは12種類あり、訪問者のシステムフォントも選べます。ダッシュボードで選んで公開すると、ランチャーは1分以内に新しいデザインを反映します。あるいはページ内、スニペットの上で指定することもでき、その場合はダッシュボードより優先されます。
<script>
window.Spookat = { style: "clean", font: "system", accent: "#2F6FEB", side: "right" };
</script>
<script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>font: "system"はフォントを一切ダウンロードしません。それ以外のフォントは、クリック後にのみ私たちのCDNから読み込まれ、Googleから読み込むことはありません。accentには16進数のカラーコードを指定でき、その上の文字色はコントラストに応じて自動で選ばれます。キーの一覧はドキュメントにあります。
4. slackかdiscordを接続する
ダッシュボードでチャンネルを接続します。接続の承認はSlackやDiscord上で行い、そのあと一覧からチャンネルを選びます。ワークスペースの管理者ではない場合は、ダッシュボードが管理者向けのワンタイムリンクを発行します。有効期間は7日間で、相手はSpookatのアカウントを持っている必要はありません。
これ以降、すべての会話がSlackのスレッド、またはDiscordのフォーラム投稿になります。
5. スレッドから返信する
スレッドで返信すると、訪問者にはウィジェット内で表示されます。//で始まるメッセージは内部メモとして扱われるので、訪問者に見られずにチームメンバーに質問できます。訪問者に表示されるのは、Slackの名前かDiscordのニックネームです。/spookat meで、サイトごとに確認や変更ができます。
返信前に訪問者が離脱していて、メールアドレスを残していた場合は、cool guy以上のプランでは返信がウィジェットの言語でメール送信されます。broke afでは、返信は次回の訪問までウィジェット内で待機します。
または:エージェントにすべて任せる
Claude CodeやCursorなどのコーディングエージェントで開発している場合は、これを貼り付けてマニュアルを読ませてください。
Add Spookat chat to my site. Read https://spookat.com/llms.txt first, then match the chat style to my site.エージェントがルートテンプレートを見つけ、スニペットを追加し、サイトに合うスタイルを選びます。SlackやDiscordの接続と支払いはあなたが行います。どちらも人間が承認します。
devtoolsで確認する
どのベンダーの言葉も鵜呑みにしないでください。私たちも含めてです。Chromeで自分のページを確認する方法を紹介します。FirefoxとSafariにも、名前が少し違うだけで同じパネルがあります。
クリック前のnetworkタブ
- 古いストレージやキャッシュが影響しないよう、ページをプライベートウィンドウで開きます。
- DevToolsを開いてNetworkに移動し、「Disable cache」にチェックを入れて再読み込みします。
- フィルター欄に
spookatと入力します。
表示されるリクエストは1件のはずです。cdn.spookat.comから読み込まれるランチャーで、転送量は約2 kbです。api.spookat.comには何も送られません。それ以上表示される場合は、ページ上の別の何かが読み込んでいます(たとえばタグマネージャー内の2つ目のスニペットなど)。
クリック前のapplicationタブ
Applicationを開き、自分のドメインのCookiesとLocal storageを確認します。Spookatはページ読み込み時にここへ何も書き込みません。Cookieは一切設定しません。使うストレージのキーはspookat:の後にサイトキーが続くもの1つだけで、訪問者が最初のメッセージを送った後にのみ書き込まれます。そのデバイスでのチャットを保持するためのものです。
クリック後
Networkのログをクリアして、ランチャーをクリックします。するとパネルがCDNから読み込まれます。スクリプト(2026-09-27時点でgzip圧縮16.6 kb)と、選んだスタイルのスタイルシート(約2 kb)です。フォントを選んでいれば、それも読み込まれます。そのあとパネルが私たちのAPIへの接続を開き、訪問者は入力できるようになります。
仕組みはこれだけです。重い部分をクリックの後ろに回し、チャットしたい訪問者だけがそれをダウンロードします。
lighthouse
スニペットなしのページとスニペットありのページで、Lighthouseをモバイルモードでそれぞれ数回実行し、中央値を比べてください。同じページでも1回ごとに数ポイントぶれるので、1回の結果ではどちらとも言えません。2 kbのランチャーでクリック前に何も処理しないなら、差はそのぶれの範囲に収まるはずです。
軽いウィジェットをまた重くしてしまう4つのパターン
小さなランチャーが小さいままでいられるかは、周りのページ次第です。私たちがよく見かけるミスを挙げます。どれも、上で説明した工夫を知らないうちに台無しにします。
チャットを自動で開く。 10秒後に自動で開くパネルは、購入直前だった人も含め、すべての訪問者にチャット全体を読み込ませます。スマートフォンではページも覆ってしまいます。会話のきっかけを作りたいなら、あいさつ文を書いておきましょう。チャットを開いたときに表示されます。
「速くするために」パネルを先読みする。 パネルのスクリプトに<link rel="preload">やprefetchを付けると、そのダウンロードが全員分、クリックの前に戻ってしまいます。クリック後は、訪問者の近くにあるCDNへの短いリクエストが2つだけです。クリックまで待たせてください。
タグマネージャーで包む。 タグマネージャーは、ほかのスクリプトを読み込むためのスクリプトです。チャットのスニペットを入れるためだけに使うなら、チャット本体より高くつきます。タグはテンプレートに直接書いてください。
スニペットが2つある。 テーマが1つ追加し、プラグインがもう1つ追加し、誰かがフッターに3つ目を貼る。ランチャーは自分の重複を無視しますが、ほかのウィジェットはそうでないことが多く、2つのチャットが同じ角を取り合うことになります。テンプレート内でcdn.spookat.com(または以前のベンダーのドメイン)を検索し、1つだけ残してください。
データの扱い
訪問者がメッセージを送ると、まず保存され、その後SlackのスレッドやDiscordの投稿に送られます。IPアドレスを保存することはありません。訪問者の国はメッセージ送信時にオフラインのデータベースで調べ、アドレスは保持しません。チャット履歴の保存期間は、broke afで30日、cool guyで90日、vc moneyで365日で、その後削除されます。再委託先を含む詳細はプライバシーページをご覧ください。
使い回せるチェックリスト
私たちのものに限らず、どんなチャットウィジェットにも使えます。
- スニペットは
asyncかdeferで読み込まれ、描画をブロックしない。 - クリック前:数キロバイト、リクエスト1件、ベンダーのAPIへのリクエストなし。
- 訪問者がチャットを始めるまで、Cookieもストレージも使わない。
- 375 pxの画面で、ランチャーが自分のサイトのボタンを隠さない。
- パネルとフォントはクリック後にのみ読み込まれる。
- チームはいつもの場所で返信でき、見張るタブが増えない。
- メンバーを増やしても料金で不利にならない。
- キャッシュを無効にし、プライベートウィンドウで自分で計測した。
ご自身のサイトで試してみてください。トライアルは14日間で、カードは不要です。