スニペットのロードタイミングを確認する
下のスクリーンショットに示すように、ページの再読み込み後にengine.js(以前はkameleoon.jsと呼ばれていた)タグのタイミングを確認します。started atメトリクスが1秒以上の場合、Kameleoonスクリプトを<head>タグのより上に配置し、fetchpriority="high"を設定してください。これらの変更により、Kameleoonスクリプトは1秒未満でロードされます。
ページが初めてロードされる場合、KameleoonスクリプトはCDNから直接ダウンロードされるため、通常60ミリ秒未満で時間がかかります。その後の再読み込み時には、スクリプトはキャッシュからダウンロードされます。
Kameleoon Chrome拡張機能によるパフォーマンススコアの確認
拡張機能に表示される パフォーマンススコア (以下のスクリーンショット参照)に応じて、以下のいずれかまたはすべてのアクションを実行してください。- 2か月以上実行されている実験またはパーソナライゼーションを停止し、実験またはパーソナライゼーションの結果に基づいてコードをサイトのソースコードに転送します。
- 停止された実験またはパーソナライゼーションをアーカイブします。
- カスタムゴールの場合はそのコードを含む、使用されていないゴールを削除します。
- 使用されていないセグメントを削除します。
- 使用されていないカスタムデータを削除します。
- グローバルカスタムスクリプトを最適化し、使用されていない/非推奨のすべてのコードを削除します。
PageSpeed Insightsでパフォーマンスを追跡する
ブラウザ開発者ツールのパフォーマンスタブは、ページのロード時間、メモリ使用量、リソース消費などの重要なデータを記録および視覚化することで、Webページのパフォーマンスを分析するのに役立ちます。タイムラインやフレームチャートの形で、レンダリング、スクリプティング、レイアウトプロセスに関する詳細な洞察を提供します。これにより、ボトルネック、ロードの遅いスクリプト、および速度に影響を与えるその他の要因を特定できます。 Google PageSpeed Insightsは、Webページの内容を分析し、パフォーマンスに関する洞察と改善提案を提供します。ロード時間、インタラクティブ性、視覚的安定性などのCore Web Vitalsに基づいて、スコアと提案を提供します。結果は「FCP」、「LCP」、「INP」、「CLS」などのメトリクスを含むレポート形式で表示されます。
First Contentful Paint
First Contentful Paint(FCP)は、ページのロード開始からページコンテンツが画面に表示されるまでの時間を測定します。- 考えられる影響: アンチフリッカーは、ページの最初の要素表示を遅延させるため、FCPに影響を与える可能性があります。
- アクション: アンチフリッカーのタイムアウトを1000ミリ秒から500ミリ秒に下げるか、Kameleoonが非常に早くロードする場合(started at ≃ 500ミリ秒)はアンチフリッカースクリプトを削除します。以下のサンプルコードスニペットでこれを達成する方法を示します。
Largest Contentful Paint
Largest Contentful Paint(LCP)は、知覚的なロード速度を測定します。これは、ページの主要なコンテンツがおそらくロードされたページロードタイムラインのポイントを示します。- 考えられる影響: アンチフリッカーは、ページ上で最大の要素の表示を遅延させるため、LCPに影響を与える可能性があります。
- アクション: 上記のFCPと同じです。
Interaction to Next Paint
Interaction to Next Paint(INP)は、ページの応答性を測定します。良好なユーザーエクスペリエンスを提供するために、INPを200ミリ秒未満にすることを目指してください。- 考えられる影響: Kameleoonが早くロードされる場合、悪影響はないはずです。ただし、インタラクションの動作を変更するテストは、このメトリクスに影響を与える可能性があります。
- アクション: Kameleoon Chrome拡張機能または以下のコードをコンソールで使用して、対象のページでアクティブな実験/パーソナライゼーションを確認し、影響の原因となる可能性を見つけることができます。以下のサンプルコードスニペットでこれを達成する方法を示します。
Cumulative Layout Shift
Cumulative Layout Shift(CLS)は、ページのライフサイクル中の要素の最大の位置変更を測定します。レイアウトシフトは 既存の要素 が 開始位置 を変更する場合にのみ発生することに注意してください。新しい要素がDOMに追加されたり、既存の要素のサイズが変更されたりしても、他の表示要素の開始位置が変更されない限り、レイアウト変更とはみなされません。- 考えられる影響: Kameleoonタグはこの指標に影響を与えません。一方、実験/パーソナライゼーションは、要素の開始位置の変更を引き起こす場合に悪影響を与える可能性があります。
- アクション: 上記のINPと同じです。
Speed Index(ContentSquareメトリクス)
Speed Indexは、水準線より上のグラフィック要素の大部分が表示される時間を測定します。- 考えられる影響: アンチフリッカーは、水準線より上の要素の表示を遅延させる可能性があるため、Speed Indexに影響を与える可能性があります。また、ページ上部に変更を加える実験/パーソナライゼーションを実行する場合、Speed Indexは悪影響を受けます(増加します)。
- アクション: 上記のFCPおよびINPと同じです。
Kameleoonスクリプトの特徴の概要
- 非同期スニペット:Kameleoonは信頼性の高いCDN(Cloudflare)からスクリプトを非同期にロードし、最初のページロードをノンブロッキングにすることを保証し、その後のページロードを高速化するためにブラウザキャッシュを活用します。Kameleoonは99.99%を超えるサービスレベル契約(SLA)を維持しています。
サイトにインストールされているKameleoonスクリプトにasync属性があることを確認してください。以下のスニペットを参照してください。
- 小さなスクリプトサイズ:TypeScriptを使用して作成されたKameleoonのアプリケーションファイルは、わずか29 KB(Brotliで圧縮)のサイズで、最初のページのロード時間を最小限に抑えます。
- 前処理アプローチ:Kameleoonスクリプトは、使用している機能とオプションに基づいて、特定のセットアップに必要なコンポーネントからのみ生成されます。
- ユニークなアンチフリッカーエンジン:KameleoonのエンジンはDOMイベントをリアルタイムでキャプチャし、実験バリエーションに関連するコンポーネントの表示を完全にレンダリングされる前に変更します。
- ネットワークコールの削減:Kameleoonは複数のトラッキングイベントを1つのビーコンコールにまとめ、必要なネットワークコールの総数を大幅に削減します。
- 単一スクリプトロード:複数のファイルを必要とする他のプラットフォームとは異なり、Kameleoonは1つの統合スクリプトをロードし、HTTPリクエストの数を削減します。
- 遅延実験ロード:Kameleoonでは、最初のページロード時にアプリケーションファイル
engine.js(以前はkameleoon.jsと呼ばれていた)に含める実験を、ケースバイケースで選択でき、最初のロード後に重要でない実験を遅延させることができます。 - リアルタイム更新:ブラウザキャッシュに妨げられることなく、より頻繁な更新を提供するため、KameleoonのLive Update Experiments機能は「LIVE-UPDATE」とラベル付けされた実験を1分以内に更新します。