スニペットのロードタイミングを確認する
下のスクリーンショットに示すように、ページの再読み込み後にengine.js(以前はkameleoon.jsと呼ばれていた)タグのタイミングを確認します。started atメトリクスが1秒を超える場合、Kameleoonスクリプトを<head>タグのより上に配置し、fetchpriority="high"を設定してください。これらの変更により、Kameleoonスクリプトは1秒未満でロードされます。
ページが初めてロードされる場合、ブラウザがCDNからKameleoonスクリプトを直接ダウンロードするため、通常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に影響を与える可能性があります。
- アクション: ほとんどのケースでは、アンチフリッカーコードを削除し、代わりにアンチフリッカーなしの非同期タグを使用してください。アンチフリッカーがないと、バリエーションが表示される前に元のページが訪問者に見える場合があり、結果の正確性が低下する可能性があります。
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分以内に更新します。
長期的なパフォーマンスのベストプラクティス
パフォーマンスの分析を超えて、持続可能で拡張性のある実験を確保するために、Kameleoonのベストプラクティスに従ってください:FAQ
Kameleoon のスクリプト(engine.js)はウェブサイトを遅くしますか?
Kameleoon のスクリプト(engine.js)はウェブサイトを遅くしますか?
いいえ。Kameleoonのスクリプトは最先端のテクノロジーを使用して非同期で実行され(非同期インストールスニペットを使用している場合)、ブラウザによって90分間完全にキャッシュされます。まれなCDNインシデント(稼働時間99.99%)の際でも、ページの読み込みをブロックすることはありません。4G接続以上のネットワーク環境では、平均してスクリプトは70ms未満で読み込まれます。Kameleoonは、TypeScriptとBrotliを組み合わせた高度な圧縮技術により、さらに影響を最小限に抑えており、ベーススクリプトサイズはわずか28.4 KBです。
CDN配信とスケーラビリティ
engine.jsスクリプトはCloudflare CDNを介して配信されるため、ウェブサイトのトラフィック量に関係なく自動的にスケールします。どのトラフィックレベルでも読み込みや遅延の問題はありません。Cloudflareのグローバルネットワークが配信を処理するため、トラフィックの急増や持続的な高トラフィックが訪問者のスクリプトパフォーマンスに影響することはありません。キャッシュ
デフォルトでは、ブラウザはengine.jsを90分間キャッシュし、リピーター訪問者の再読み込み時間を最小化します。ユースケースでより短いキャッシュ期間が必要な場合は、リクエストにより最短1分まで短縮できます。アカウントの設定を変更するにはKameleoonサポートにお問い合わせください。重要な考慮事項
実行する実験の数とその内容(CSS/JavaScript)によって、スクリプトサイズが増加する場合があります。読み込みを急ぐ必要のない実験やパーソナライゼーションキャンペーンには、“DELAYED”タグを使用してください。これにより、最初のページ読み込み後まで重要でない実験の読み込みを遅延させます。Kameleoonはこれらを賢く管理します。アイドル時間が10秒経過した後、または訪問者がターゲットされ、コントロール以外のバリエーションが割り当てられたときにのみ設定をダウンロードします。このアプローチにより、優先順位の高い実験の完全な機能を提供しつつ、読み込みパフォーマンスへの影響を最小限に抑えます。トラッキングリクエストとレート制限
Kameleoonは、イベントごとに1つのリクエストを送信するのではなく、トラッキングイベントを1つのリクエストにまとめます。これにより、ネットワーク呼び出しの数を少なく抑えられます。engine.jsがイベントをキューに入れて送信する仕組みについては、コードフロー: トラッキングを参照してください。SDKがリクエストをバッチ処理する方法と、Data APIがレート制限を適用する方法については、レート制限を参照してください。Data API のレート制限
Kameleoon はサービスの信頼性を保護するために、Data API にレート制限を適用しています。制限は、契約上の月間ユニークビジター数(MUV)とリクエスト元の IP アドレスに基づいています。制限を超えた場合、API は HTTP 429 を返します。これらの制限は、Data API に到達するすべてのリクエストに適用されます。これには、engine.js が自動的に送信するトラッキングコールと、Feature Experimentation SDK が送信するバッチ処理されたトラッキングリクエストが含まれます。多くの訪問者が同じ IP アドレスを共有している環境（オフィスや企業ネットワークなど）では、全体の MUV が契約の範囲内であっても、IP ベースの制限が適用される場合があります。Kameleoon は既知のボットトラフィックを自動的に検出し、これらのレート制限の計算から除外します。ボットからのものと識別されたリクエストは、上記の制限にカウントされません。サーバーサイドの統合では、リクエストを認証することで IP ベースの制限を解除できます。ユースケースでより高い制限が必要な場合は、Kameleoon サポートにお問い合わせください。レート制限はプロジェクト単位ではなく、顧客アカウント全体に適用されます。1つのプロジェクトが過剰なリクエストを生成した場合（例えば、実装の誤りによりカスタムデータイベントを繰り返し送信するループが発生した場合）、そのプロジェクトがアカウント全体で共有されている制限を消費し、他のすべてのプロジェクトで HTTP 429 エラーが発生する可能性があります。予期しないトラフィックを生成しているプロジェクトを特定するには、Live events ページ（Insights > Live events）を使用してください。各プロジェクトを順番に選択し、過去1時間または24時間のイベント数を期待される量と比較します。訪問者数に比べてイベント数が著しく多いプロジェクト（例えば、100,000 MUV 契約に対して数千万のイベント）が原因である可能性が高いです。イベントをタイプでフィルタリングして原因を特定してください：カスタムデータイベントが最も一般的な原因で、設定が誤ったループがページの読み込みごとに同じカスタムデータ変数、またはすべてのカスタムデータ変数を送信していることが多いです。プラットフォームのスケーラビリティ
Kameleoonプラットフォームは、水平スケーリング、オートスケーリングインフラ、ロードバランシング、および定期的な負荷テストとストレステストを活用しています。詳細については、Kameleoonのプラットフォームはどのようにスケーラビリティと弾力性をサポートしていますか? をご覧ください。重要でない実験を最初のページ読み込み後まで遅延させることはできますか?
重要でない実験を最初のページ読み込み後まで遅延させることはできますか?
はい、重要でない実験を最初のページ読み込み後まで遅延させることができます。実験を遅延させるには、遅延させたい実験に
DELAYEDタグを追加してください。詳細については、タグの管理のドキュメントを参照してください。Kameleoonは「DELAYED」タグが付けられた実験をインテリジェントに管理します。アイドル時間が10秒経過した後、または訪問者がターゲットされ、コントロール以外のバリエーションが割り当てられたときにのみ設定をダウンロードします。リソースを大量に消費するテストを遅延させることで、最高のユーザー体験の提供に集中してください。Kameleoon のプラットフォームはどのようにスケーラビリティと弾力性をサポートしていますか?
Kameleoon のプラットフォームはどのようにスケーラビリティと弾力性をサポートしていますか?
Kameleoon のプラットフォームは、データ量が増加しても最適なパフォーマンスを維持できるよう、高いスケーラビリティと弾力性を提供します。プラットフォームは1秒あたり平均20,000クエリの負荷を処理し、ピーク時には最大100,000クエリまで対応します。主な要素は以下のとおりです:
- スケーラブルなアーキテクチャ: 分散型でモジュラーなアーキテクチャにより水平スケーリングが可能です。
- オートスケーリングインフラ: クラウドベースのインフラが計算リソースを自動的にスケーリングします。
- ロードバランシング: 高度な技術によりサーバー間にトラフィックを均等に分散します。
- データの取り込みと処理: 堅牢な API とデータブローカーが大量のデータを効率的に管理します。
- スケーラビリティのテスト: 定期的な負荷とストレステストにより、システムが極端な状況に対応できることを保証します。
- 弾力的なデータストレージ: マルチ階層型ストレージにより、データへの迅速なアクセスと長期的なスケーラビリティが可能です。