エクスペリエンス監査ダッシュボード experience-audit-dashboard
エクスペリエンス監査でデプロイメントプロセスを検証して、変更内容がパフォーマンス、アクセシビリティ、ベストプラクティスおよび SEO のベースライン標準を満たしていることを確認する方法について説明します。これらの指標を追跡するための、明確で有益なダッシュボードインターフェイスが用意されています。
概要 overview
エクスペリエンス監査により、デプロイメントプロセスが検証され、次の変更がデプロイされていることを確認できます。
-
パフォーマンス、アクセシビリティ、ベストプラクティス、SEO（検索エンジン最適化）のベースライン標準を満たしている。
-
リグレッションを導入しない。
Cloud Manager のエクスペリエンス監査を使用すると、サイト上でのユーザーのエクスペリエンスが最も高い標準に準拠します。
監査結果は参考情報であり、デプロイメントマネージャーはスコアと、現在および以前のスコアとの間の変化を確認できます。このインサイトは、現在のデプロイメントで前のバージョンになかった不具合が導入されたかどうかを判断するのに役立ちます。
エクスペリエンス監査は、Google のオープンソースツールである Google Lighthouse を活用し、すべての Cloud Manager 実稼動パイプラインで有効になります。
可用性 availability
エクスペリエンス監査は、Cloud Manager で使用できます。
- （デフォルト）Sites 実稼動パイプライン
- （オプション）フルスタックパイプラインの開発
- （オプション）フロントエンドパイプラインの開発
オプション環境の監査を設定する方法について詳しくは、設定の節を参照してください。
監査はパイプラインの一部として実行されます。また、監査はパイプラインの外でオンデマンドで実行することもできます。
設定 configuration
実稼動パイプラインでは、エクスペリエンス監査をデフォルトで使用できます。フルスタックパイプラインとフロントエンドパイプラインの開発に対して、オプションで有効にすることができます。どのような場合でも、パイプライン実行中に評価されるコンテンツパスを定義する必要があります。
-
設定するパイプラインのタイプに応じて、次のいずれかの操作を行います。
- 新しい実稼動パイプラインを追加して、監査で評価するパスを定義します。
- フロントエンドまたは開発フルスタックパイプラインで監査を有効にする場合は、新しい実稼動以外のパイプラインを追加します。
- または、既存のパイプラインを編集し、既存のオプションを更新することもできます。
-
実稼動以外のパイプラインを追加または編集する際にエクスペリエンス監査を使用するには、「エクスペリエンス監査」チェックボックスをオンにします。このオプションは「ソースコード」タブにあります。
- 実稼動以外のパイプラインの場合にのみ必要です。
- 「エクスペリエンス監査」タブは、チェックボックスが選択されていると表示されます。
-
実稼動および実稼動以外の両方のパイプラインでは、「エクスペリエンス監査」タブでエクスペリエンス監査に含めるパスを定義します。
- ページのパスは
/で始める必要があり、サイトに対する相対パスです。 - 例えば、サイトが
wknd.siteで、エクスペリエンス監査にhttps://wknd.site/us/en/about-us.htmlを含める場合は、/us/en/about-us.htmlというパスを入力します。
- ページのパスは
-
「ページを追加」をクリックすると、パスが使用中の環境のアドレスで自動的に補完され、パスのテーブルに追加されます。
-
上記の 2 つの手順を繰り返して、必要なパスを追加します。
- 最大 25 個のパスを追加できます。
- パスを定義しない場合は、デフォルトでサイトのホームページがエクスペリエンス監査に含められます。
-
「保存」をクリックします。
エクスペリエンス監査結果 results
エクスペリエンス監査の結果は、実稼動パイプラインの実行ページを介した実稼動パイプラインの ステージテスト フェーズで表示されます。
エクスペリエンス監査では、設定済みのページの Google Lighthouse スコアの中央値と、前回のスキャンとのスコアの差を提供します。
パイプラインの ステージテスト フェーズのこの概要ビューには、次の 2 つのオプションがあります。
Cloud Manager ダッシュボードの「レポート」タブをクリックすると、完全な監査結果にアクセスできます。パイプライン実行の詳細に表示される概要に加えて、完全なレポートを直接表示することもできます。
- 監査の仕組みについて詳しくは、エクスペリエンス監査評価の詳細を参照してください。
- エクスペリエンス監査をオンデマンドで実行する方法については、オンデマンド監査レポートを参照してください。
- 監査で問題が発生した場合は、エクスペリエンス監査で発生した問題を参照してください。
- パフォーマンスに関する一般的なヒントについては、一般的なパフォーマンスに関するヒントを参照してください。
最も低速のページを表示 view-slowest-pages
「最も低速のページを表示」をクリックして 最も低速の 5 ページ ダイアログボックスを開きます。監査対象として設定した、最もパフォーマンスの低い 5 つのページが表示されます。
Cloud Managerは、スコアを パフォーマンス、アクセシビリティ、ベストプラクティス、SEO 別に分類し、以前の監査からの各指標の偏差を示します。
デフォルトでは、ダイアログボックスが開き、モバイルデバイスのスコアが表示されます。ダイアログボックスの上部付近にある「デバイス」切替スイッチを使用すれば、デスクトップスコアを表示できます。
このダイアログボックスは、概要をすばやく理解できるように設計されています。詳しくは、「フルレポートを表示」をクリックします。
フルレポートを表示 view-full-report
エクスペリエンス監査のフルレポートは、次の方法で表示できます。
- 最も低速の 5 ページ ダイアログの「
View full report」をクリックします。 - パイプラインの実行を表示する際に、「
View full report」をクリックします。 - Cloud Manager の「レポート」タブをクリックします。
Cloud Manager の「レポート」タブが開き、エクスペリエンス監査 が表示されます。
レポートは 2 つの領域に分割されています。
ページスコア - トレンド trend
デフォルトでは、ページスコア - トレンド の選択されたビューは、昨年 の 中央値スコア です。
凡例のカテゴリ名をクリックすると、特定の Lighthouse カテゴリのトレンドを表示するように選択できます。
グラフの上部にある 選択 ドロップダウンを使用すると、ページ固有の詳細を選択でき、下部にある 表示 および トリガー ドロップダウンを使用すると、それぞれ異なる時間枠とトリガータイプを選択できます。
表示 ドロップダウンでは、プリセットされた時間枠や、より具体的な表示用のカスタム間隔を選択できます。
グラフ上でマウスを移動すると、特定の時点での Google Lighthouse カテゴリの値がツールヒントに表示されます。
特定の時点でチャートをクリックすると、ポップオーバーが開き、そのスキャンの詳細が表示されます。開いているエクスペリエンス監査スキャン をクリックすると、そのスキャン結果が「エクスペリエンス監査スキャン結果」セクションに読み込まれます。
エクスペリエンス監査スキャン結果 scan-results
「エクスペリエンス監査スキャン結果」セクションには、スコアを向上させる方法と、スキャンされたすべてのページの詳細に関するレコメンデーションが表示されます。これは 2 つのセクションに分割されています。
レコメンデーション recommendations
「レコメンデーション」セクションには、一連のインサイトの集計が表示されます。デフォルトでは、パフォーマンス に関するレコメンデーションが表示されます。別のカテゴリに変更するには、レコメンデーション 見出しの横にあるドロップダウンを使用します。
レコメンデーションをクリックすると、その詳細が表示されます。
使用可能な場合、展開されたレコメンデーションの詳細には、最も影響力のある変更に焦点を当てるのに役立つように、レコメンデーションの影響の割合も含まれます。これに加えて、レコメンデーションが拡張され、関連する AEM ドキュメントのリンクや、推奨される修正の実装をガイドするヒントが含まれている場合があります。
詳細表示で「ページを表示」リンクをクリックして、レコメンデーションの適用対象ページを表示します。
スキャンされたページ scanned-pages
「スキャンされたページ」セクションには、スキャンされたすべてのページのスコアの詳細が表示されます。「前へ」ボタンと「次へ」ボタンを使用すると、結果のページを移動したり、表示のページ番号を選択したりできます。
特定のページのリンクをクリックすると、「ページスコア - トレンド」セクションの「選択」フィルターが更新され、選択したページの「スコアとレコメンデーション」タブが表示されます。
「生レポート」タブには、ページのすべての監査のスコアが表示されます。Lighthouse レポート 列のレポート日付をクリックして、生データの JSON ファイルを取得します。
ブラウザーに新しいタブが開き、https://googlechrome.github.io/lighthouse/viewer/ が表示されます。選択したページの Lighthouse の生の JSON レポートを含んだ署名付き URL が自動的に読み込まれ、詳細な検査が可能になります。
オンデマンドスキャン監査レポート on-demand
エクスペリエンス監査レポートは、パイプライン実行時に実行されるだけでなく、オンデマンドで生成することもできます。このオプションは、パイプラインを実行しなくてもページをすばやくスキャンできる優れたソリューションです。
オンデマンドスキャンを実行するには、「レポート」タブに移動して完全な監査レポートを表示し、「スキャンを実行」ボタンをクリックします。
「スキャンを実行」ボタンが使用できなくなり、オンデマンドスキャンが既に実行中の場合は、時計アイコンを示すバッジが付きます。
オンデマンドスキャンは、最新の 25 の設定済みページのエクスペリエンス監査をトリガーし、通常は数分で終了します。
完了すると、スコアグラフが自動的に更新され、パイプライン実行スキャンと同様に結果を正確に検査できます。
トリガー セレクターを使用すると、トリガータイプに基づいてスコアグラフをフィルタリングできます。
エクスペリエンス監査で発生した問題 issues
監査対象として設定したページが利用できなかった場合や、監査にその他のエラーがあった場合は、エクスペリエンス監査にその事実が反映されます。
パイプラインには、アクセスできなかった相対 URL パスを表示するための展開可能なエラーセクションが表示されます。
フルレポートを表示すると、「エクスペリエンス監査スキャン結果」セクションに詳細が表示され、展開することもできます。
ページが使用できない理由は、次のとおりです。
- 設定により、アクセスがブロックされる。
- ページが存在しない。
- ページにより、基本認証以外の認証を必要とするリダイレクトが行われる。
- 内部的な問題が発生した。
一般的なパフォーマンスに関するヒント performance-tips
簡単に修正でき、最も一般的な影響力のある問題のうち 2 つは、Cumulative Layout Shifts（CLS）と Largest Contentful Paint（LCP）に関する問題です。
以下を実行することで、これらの領域を改善できます。
- トップ画像（下にスクロールしなくてもブラウザーに表示されるコンテンツ）を遅延読み込みしない。
- リソースの読み込み方法に適切な優先度を付ける（例えば、ドキュメントを読み込んだ後に、スクロールしないと見えない範囲にある画像を非同期的に読み込むなど）。
- スクロールしないと見えない範囲にコンテンツをレンダリングするために使用される JavaScript および CSS ファイルをプリフェッチする（必要な場合）。
- 読み込みが遅いコンテナや後でレンダリングされるコンテナに縦横比を割り当てることで、垂直方向のスペースを確保する。
- 画像を WebP 形式に変換してサイズを削減する。
<picture>と画像srcsetを使用して、ビューポートサイズごとに様々な画像サイズを指定する（およびサイズ変更が機能することを確認する）。
エクスペリエンス監査評価の詳細 details
次に、エクスペリエンス監査でのサイトの評価方法に関する追加情報を示します。これらは、機能の一般的な使用には必要ではなく、完全を期すためにここに提供されます。
- 監査では、パブリッシャーの設定済みエクスペリエンス監査ページパスに含まれるオリジン（
.com）ドメインをスキャンして、実際のユーザーエクスペリエンスをシミュレートし、web サイトの管理と最適化に関してより適切な意思決定を行うのに役立ちます。 - 実稼動のフルスタックパイプラインでは、ステージング環境がスキャンされます。監査中に関連する詳細が監査で提供されるようにするには、ステージング環境のコンテンツをできる限り実稼動環境に近づける必要があります。
- 「ページスコア - トレンド」セクションの 選択 ドロップダウンに表示されるページは、すべてエクスペリエンス監査によって過去にスキャンされた既知のページです。
- レコメンデーションには、前回のスキャンからの潜在的なゲインと差異が含まれる場合があります。
- エクスペリエンス監査では、ページごとに生レポートを処理して、潜在的な改善点を推定します。無駄になったバイト数またはミリ秒をインサイトに関連付けて、パフォーマンススコアに対する重み付けされた影響を割り当てます。監査では、追跡するレコメンデーションを決定するために、この情報（および影響を受けるページ）が提供されます。
詳しくは、一般的なパフォーマンスに関するヒントの節を参照してください。 - フロントエンドパイプラインを既存の環境にデプロイしてもよく、複数のフロントエンドパイプラインが同じ環境をターゲットにすることができます。スキャン結果は環境レベルで集計されるので、スコア、トレンドおよびレコメンデーションは一貫性があります。これらの結果は、スキャンをトリガーしたパイプラインに関係なく、選択した環境で表示されます。