チャットウィジェットはライブで、機能しています。次に、携帯電話でストアを開き、製品にスクロールすると、ランチャーが「カートに追加」バーの上にあります。購入をタップすると、チャットウィンドウが開きます。
通常の推奨事項は、ウィジェットを縮小し、デフォルトで閉じ、スクリプトを遅延させることです。これらはすべて重さに関するものであり、重さは確認する価値があるので、テストしました。同じサイト、ウィジェットのオンとオフで、スピードスコアは両方の時間で同じでした。
一部のウィジェットは実際に重く、最適化する価値があります。しかし、「カートに追加」ボタンの上にあるウィジェットは、販売を直接失います。そして、それは重さの問題ではありません。
これは位置の問題であり、携帯電話画面の下部のストリップは、カートバー、Cookieバナー、ランチャーがすべて競合する場所です。
以下に、テスト結果、独自のテーマのカートバーを測定する方法、およびウィジェットをクリアするために設定する値を説明します。
この記事では:
チャットウィジェットが重すぎるのではなく、場所が間違っています
携帯電話では、画面の下部は争われるスペースです。スティッキー「カートに追加」バーはそこにあります。Cookieバナーも同様です。そして、通常はデフォルトで右下隅にあるチャットランチャーも同様です。
ランチャーが購入ボタンの上に表示されると、買い物客は購入する代わりにチャットをタップします。これは、数キロバイトの追加では決して達成できない方法で、販売を失わせます。
ウィジェットのオンとオフで同じサイトでLighthouse監査を実行しました。短いバージョン：ウィジェットは約148KiBのアセットを追加し、コアウェブバイタルを移動させませんでした。
したがって、修正はファイルサイズのプロジェクトではありません。これは3つのステップで、この順序で行います。
- 競合していない角を選択してください。カートバーまたはバナーが片側を占めている場合は、ランチャーを反対側に移動します。
- スティッキーバーの高さを測定してください。推測されたものではなく、独自のテーマからの実際の数値が必要です。
- 下からのピクセルオフセットを設定してください。これにより、ランチャーが隠れるのではなく、バーからクリアされます。
これらの手順をその順序で実行すると、パフォーマンスレポートを開く前に、衝突はなくなります。
ウィジェットをオンとオフで測定した場合に何が起こったか
同じWordPressサイトに4つの同一のページを設定しました。2つはWPChatを実行し、2つはチャットウィジェットがありませんでした。
次に、それぞれをPageSpeed InsightsでシミュレートされたミッドレンジAndroidで低速接続でテストしました。ページごとに2回、結果を平均しました。
結果は次のとおりです。
| メトリック | ウィジェットなし | ウィジェットあり |
|---|---|---|
| パフォーマンス | 96.5 | 96.5 |
| 最初のコンテンツフルペイント | 2.0秒 | 2.0秒 |
| 最大のコンテンツフルペイント | 2.30秒 | 2.35秒 |
| 合計ブロック時間 | 0ミリ秒 | 0ミリ秒 |
| 累積レイアウトシフト | 0 | 0 |
| スピードインデックス | 2.05秒 | 2.20秒 |
- 最大のコンテンツフルペイント、画面上の最大の要素の読み込みが完了した瞬間。0.05秒の移動。
- スピードインデックス、ページの視覚的な表示速度のおおよそ。0.15秒の移動。
どちらも同一構成での通常の実行間変動内に収まるため、どちらも実際の差ではありません。
合計ブロック時間と累積レイアウトシフトはゼロのままでした。これは、ウィジェットがメインスレッドで何もブロックせず、読み込み中にページ上で何もシフトしなかったことを意味します。
コストは代わりに診断に現れます。ページはキャッシュ可能なファイル33 KiBから181 KiBになり、これはウィジェットアセットのおおよそ148 KiB、または中程度のサイズの写真1枚分に相当します。
つまり、単純なバージョンは次のとおりです。ウィジェットは約148 KiBのコストがかかり、Core Web Vital（Googleが実際にランキングに使用する3つの読み込みと安定性のスコア）のいずれも移動しませんでした。
WPChatのような適切にコーディングされたプラグインをチャットウィジェットに使用している限り、モバイル訪問者にとってサイトの速度は問題になりません。
スティッキーカートバーの実際の高さを調べる方法
各テーマは、スティッキーなカート追加バーを独自の方法で構築しているため、お伝えできる数値はありません。ご自身で確認する必要があります。デスクトップブラウザで約2分かかります。
取得方法は次のとおりです。
- コンピューターのChromeで商品ページを開きます。サンプルではなく、実際に販売している商品を選択してください。バーの内容によって見た目が変わるためです。
- DevToolsを開きます。ページ上のどこかを右クリックして「検証」を選択します。画面の横または下にパネルが開きます。
- 電話表示に切り替えます。DevToolsパネルの左上付近にある「デバイスツールバーの切り替え」というラベルの小さな電話とタブレットのアイコンをクリックします。ページが電話の幅で再描画されます。
- 電話の幅に設定します。390は一般的な値です。ページの上部にあるサイズボックスで、「レスポンシブ」と表示されているドロップダウンの隣にある幅フィールドに390と入力します。バーはデスクトップ画面とは異なる方法で、電話の幅でスタックおよびサイズ設定されます。
- スティッキーバーが表示されるまで下にスクロールします。ほとんどのテーマでは、メインのカート追加ボタンをスクロールしすぎるとスライドインします。
- バー自体を右クリックして、もう一度「検証」を選択します。Chromeは「要素」パネルでその要素にジャンプし、ページ上でハイライトします。
- 要素パネルでハイライトされた行にカーソルを合わせます。ページ上に390 x 64のような2つの数値が表示される小さなツールチップが表示されます。最初の数値は幅、2番目の数値は高さです。その2番目の数値が求めているものです。
書き留めてください。それがピクセル単位のバーの高さです。
ここから考慮すべき点がいくつかあります。
- 数字が小さすぎるように見える場合：バーではなくボタンを選択しています。要素パネルで、現在選択している行のすぐ上にある線をクリックし、ハイライトを確認します。ストリップ全体を端から端までカバーするまで上に移動してから、高さを再確認してください。
- 2番目の製品を確認してください。ボタンが1つだけのシンプルな製品は、通常、数量セレクターやバリエーションドロップダウンによって高くなる可変製品よりも短いバーになります。
- 大きい方の数字を使用してください。ウィジェットは1つの高さにしか配置できません。
これで数字が得られました。次の質問はどこに入力するかです。多くのウィジェットは入力場所を提供せず、代わりにCSSを渡すためです。
WPChatには、まさにこれのためのフィールドがあります：位置設定と、下および右からの個別のピクセルオフセットです。
その数値をオフセットに変換する
オフセットは、バーの高さにギャップを加えたものです。バーが64pxの場合、オフセットを64pxに設定しないでください。
代わりに80pxのような値に設定してください。タップターゲットが重なっていなくても問題を引き起こす可能性があるため、ギャップは重要です。
指先はマウスカーソルよりもはるかに広い画面をカバーするため、互いにぴったりと配置された2つのコントロールは、レイアウトがきれいに見えても誤タップを引き起こします。バーの上に16pxのギャップがあれば、それらを分離するのに十分です。
したがって、作業式は次のようになります：バーの高さ + 16px = 下のオフセット。
その数値を信頼する前に1つの注意点
DevToolsはレイアウトを描画しますが、電話は描画しません。実際のデバイスでは、ブラウザ自身のインターフェイスがページの上に表示され、エミュレーターでは決して表示されない高さが失われます。
3つのものがそれに影響します：
- ブラウザインターフェイス。 SafariとChromeのiOSで、アドレスバーと下部のツールバーは実際のスペースを占有します。
- 折りたたみ式アドレスバー。スクロールすると縮小し、上にスクロールすると拡大するため、買い物客がページを使用している間に利用可能なスペースが変化します。
- iOSのセーフエリアインセット。新しいiPhoneの下部にあるホームインジケーターストリップは、レイアウトがその上に配置する必要がある予約済みスペースです。
Astra、Botiga、Woostifyなどのテーマによってバーの高さが異なることを忘れないでください。私はそれらすべてをテストしたわけではありません。
だからこそ、ピクセルパーフェクトなオフセットよりも、余裕のあるオフセットを選ぶでしょう。
数値を設定してから、実際の電話で商品ページを一度開き、「購入」ボタンをタップします。問題がなければ完了です。タイトな場合は、さらに10px追加して再度確認してください。
ピクセル推測ループとそれを終了させる設定
WordPress.orgの2つの公開サポートスレッドは、ウィジェットにこの設定がない場合に何が起こるかを示しています。
最初のスレッドでは、ストアオーナーがチャットウィジェットがモバイルでWooCommerceの「カートに追加」ボタンを覆っていると報告しています。修正は簡単です：プラグイン設定でウィジェットの位置を変更します。それが解決策のすべてです。
2番目のスレッドは逆のケースです。クッキーバーがモバイルでチャットウィジェットのボタンの上に表示されており、設定がありません。
そのため、サポートは、幅479px未満の画面でバーを100px上げるカスタムCSSを提供します。
それでは足りないので、数値は160pxまで上がります。ユーザーが戻ってきて、バナーがどこにもない真ん中に配置されていると報告します。
そのスレッドの誰も何も間違ったことはしていません。推測されたピクセル値が、メディアクエリ内で測定されたことのないバーの高さに対してテストされているため、ループが発生します。ストアオーナーは自分の電話で自分でデバッグする方法がありません。
数値を変更し、リロードし、目を細め、もう一度変更します。そのプロセスには測定がどこにもないので、収束しません。
推測を置き換える設定
そのバーがどこに配置されるかは、テーマによって異なります。だからこそ、WPChatは、どこでも機能する1つのコーナーを想定するのではなく、位置コントロールを提供します。
コントロールは、この記事の前の修正順序に対応します。
- 位置: ランチャーはデフォルトで右下に配置され、左下も利用可能です。これは水平方向の移動で、カートに追加ボタンがバーの片側を占めている場合に使用します。
- オフセット: 右からの距離と下からの距離の個別のピクセルフィールド。先ほど測定した数値は、下のフィールドに入力します。バーの高さに16pxのギャップを加えたものです。
- ページターゲティング: これにより、特定のページでウィジェットをオフにすることができます。これにより、必要のないページから遠ざけることができます。
ページターゲティングについて知っておくと良いこと: ページでウィジェットがオフになっている場合、WPChatはそれをロードしてから非表示にするのではなく、最初にチェックするため、ファイルはまったくダウンロードされません。
始めたいですか？ウェブサイトにオンラインチャットウィジェットを追加するステップバイステップガイドをご覧ください。
モバイルでのチャットウィジェットに関するよくある質問
テーマの固定カート追加バーの高さを測定するにはどうすればよいですか？
Chrome DevToolsでデバイスツールバーをオンにして測定します。F12キーを押し、「デバイスツールバーの切り替え」をクリックし、幅を390などの電話サイズに設定してから、固定バーが表示されるまでスクロールします。バーを右クリックし、「検証」を選択し、「要素」パネルで強調表示された行にカーソルを合わせます。ツールチップに2つの数値が表示され、2番目の数値がピクセル単位の高さです。
固定カートバーがある場合、左下または右下ですか？
バーのメインボタンと反対側の角を選択してください。そうすれば、誤ってタップしても何も失われません。カート追加ボタンが右側にある場合は、ランチャーを左下に配置します。バーが画面の全幅にまたがる場合、どちらの角も空いていないため、位置はそのままにして、代わりに下オフセットでランチャーを持ち上げます。
チャットウィジェットはPageSpeedスコアに影響しますか？
私のテストでは、いいえ。ウィジェットをオンにした状態とオフにした状態で同じサイトを実行したところ、約148KiBのアセットが追加され、Core Web Vitalの移動はありませんでした。TBTとCLSは両方ともゼロのままでした。1つの注意点: それはクリーンなテストページであり、最良の場合です。そのため、画像が多い商品ページは同じようには動作しません。
なぜ推奨される1つのピクセルオフセットがテーマ間で機能しないのですか？
固定カート追加バーはWooCommerceの機能ではないためです。それはあなたのテーマまたは個別のプラグインから提供され、それぞれが異なる高さでそのバーを構築します。サポートスレッドからコピーした数値は、誰かのテーマで測定されたものなので、自分で測定する必要があります。
チャットウィジェットのモバイル最適化：結局何が重要か
適切に構築されたウィジェットは、サイトを重くする必要はありません。WPChatは私のテストで約148KiBを追加しましたが、Core Web Vitalに影響を与えることはありませんでした。そのため、重さが販売を妨げる原因になることはありませんでした。問題は、購入者がタップするために訪れた唯一のボタンの上にランチャーが座っていることでした。
できることは次のとおりです。
- Chrome DevToolsで、電話の幅でスティッキーバーを測定し、ツールチップから高さを取得してください。
- その数値に16pxのギャップを追加してください。それが下部のオフセットです。
- メディアクエリではなく、ウィジェットの設定で位置とオフセットを設定してください。
- カートとチェックアウトでウィジェットをオフにすると、販売に完全に集中できます。
- 実際の電話で一度確認してください。ブラウザ自体のバーや新しいiPhoneの下部にある予約済みストリップは、エミュレーターでは決して表示されない高さを消費するためです。
最終的に得られる数値は、チャットウィジェット全般のものではなく、あなたのテーマに属します。テーマによってこのバーの構築方法が異なるため、私がここに印刷できる数よりも、自分で測定値を入力できるフィールドの方が優れています。
これで測定値が得られました。WPChatは、位置、個別のピクセルオフセット、およびページターゲティングを入力できる場所を提供します。
WPChatを入手して、すべてのデバイスで訪問者とつながり、ビジネスを成長させましょう。
