> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt
> Use this file to discover all available pages before exploring further.
# KameleoonがWebサイトのパフォーマンスに与える影響
> PageSpeed Insights、Core Web Vitals、およびKameleoon Chrome拡張機能を使用して、KameleoonがWebサイトに与えるパフォーマンス影響を分析し、改善します。
さまざまなパフォーマンス分析ツールを使用して、サイトの効率を評価できます。結果に基づいて必要な改善を特定し、実装するために、以下のKameleoonのガイドラインを参照してください。
## スニペットのロードタイミングを確認する
下のスクリーンショットに示すように、ページの再読み込み後に`engine.js`(以前は`kameleoon.js`と呼ばれていた)タグのタイミングを確認します。`started at`メトリクスが1秒以上の場合、Kameleoonスクリプトを``タグのより上に配置し、`fetchpriority="high"`を設定してください。これらの変更により、Kameleoonスクリプトは1秒未満でロードされます。
ページが初めてロードされる場合、KameleoonスクリプトはCDNから直接ダウンロードされるため、通常60ミリ秒未満で時間がかかります。その後の再読み込み時には、スクリプトはキャッシュからダウンロードされます。
## Kameleoon Chrome拡張機能によるパフォーマンススコアの確認
拡張機能に表示される **パフォーマンススコア** (以下のスクリーンショット参照)に応じて、以下のいずれかまたはすべてのアクションを実行してください。
* 2か月以上実行されている実験またはパーソナライゼーションを停止し、実験またはパーソナライゼーションの結果に基づいてコードをサイトのソースコードに転送します。
* 停止された実験またはパーソナライゼーションをアーカイブします。
* カスタムゴールの場合はそのコードを含む、使用されていないゴールを削除します。
* 使用されていないセグメントを削除します。
* 使用されていないカスタムデータを削除します。
* グローバルカスタムスクリプトを最適化し、使用されていない/非推奨のすべてのコードを削除します。
詳細については、Kameleoon Debug Assistant拡張機能のヘルプとして[こちら](../../developer-tools/kameleoon-debug-assistant-extension)の記事を参照してください。
## 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ミリ秒)はアンチフリッカースクリプトを削除します。以下のサンプルコードスニペットでこれを達成する方法を示します。
```java theme={null}
var kameleoonLoadingTimeout = 1000;
```
### Largest Contentful Paint
Largest Contentful Paint(LCP)は、知覚的なロード速度を測定します。これは、ページの主要なコンテンツがおそらくロードされたページロードタイムラインのポイントを示します。
* **考えられる影響**: アンチフリッカーは、ページ上で最大の要素の表示を遅延させるため、LCPに影響を与える可能性があります。
* **アクション:** 上記のFCPと同じです。
### Interaction to Next Paint
Interaction to Next Paint(INP)は、ページの応答性を測定します。良好なユーザーエクスペリエンスを提供するために、INPを200ミリ秒未満にすることを目指してください。
* **考えられる影響**: Kameleoonが早くロードされる場合、悪影響はないはずです。ただし、インタラクションの動作を変更するテストは、このメトリクスに影響を与える可能性があります。
* **アクション:** Kameleoon Chrome拡張機能または以下のコードをコンソールで使用して、対象のページでアクティブな実験/パーソナライゼーションを確認し、影響の原因となる可能性を見つけることができます。以下のサンプルコードスニペットでこれを達成する方法を示します。
```javascript theme={null}
Kameleoon.API.Experiments.getActive()
Kameleoon.API.Personalizations.getActive()
```
### 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属性があることを確認してください。以下のスニペットを参照してください。
```html theme={null}