エクスペリエンス監査ダッシュボード experience-audit-dashboard

エクスペリエンス監査でデプロイメントプロセスを検証し、デプロイされた変更が、明確な情報ダッシュボードインターフェイスを通じて、パフォーマンス、アクセシビリティ、ベストプラクティス、SEO のベースライン標準を満たしていることを確認する方法について説明します。

NOTE
この機能は、早期導入プログラムでのみ利用できます。
AEM as a Cloud Service の既存のエクスペリエンス監査機能について詳しくは、エクスペリエンス監査テストのドキュメントを参照してください。

概要 overview

エクスペリエンス監査により、デプロイメントプロセスが検証され、次の変更がデプロイされていることを確認できます。

  1. パフォーマンス、アクセシビリティ、ベストプラクティス、SEO(検索エンジン最適化)、PWA(プログレッシブ Web アプリ)のベースライン標準規格を満たす。

  2. リグレッションを導入しない。

Cloud Manager のエクスペリエンス監査を使用すると、サイト上でのユーザーのエクスペリエンスが最も高い標準に準拠します。

監査結果は参考情報であり、デプロイメントマネージャーはスコアと、現在および以前のスコアとの間の変化を確認できます。このインサイトは、現在のデプロイメントで前のバージョンになかった不具合が導入されたかどうかを判断するのに役立ちます。

エクスペリエンス監査は、Google のオープンソースツールである Google Lighthouse を活用し、すべての Cloud Manager 実稼動パイプラインで有効になります。

可用性 availability

エクスペリエンス監査は、Cloud Manager で使用できます。

  • Sites 実稼動パイプライン(デフォルト)
  • 開発フルスタックパイプライン(オプション)
  • 開発フロントエンドパイプライン(オプション)

オプション環境の監査を設定する方法について詳しくは、設定の節を参照してください。

監査はパイプラインの一部として実行されます。また、監査はパイプラインの外でオンデマンドで実行することもできます。

設定 configuration

実稼動パイプラインでは、エクスペリエンス監査をデフォルトで使用できます。開発フルスタックおよびフロントエンドパイプラインに対して、オプションで有効にすることができます。どのような場合でも、パイプラインの実行中に評価されるコンテンツパスを定義する必要があります。

  1. 設定するパイプラインのタイプに応じて、次の手順に従います。

  2. エクスペリエンス監査を使用する実稼動以外のパイプラインを追加または編集している場合は、「ソースコード」タブの「エクスペリエンス監査」チェックボックスをオンにする必要があります。

    エクスペリエンス監査の有効化

    • これは、実稼動以外のパイプラインの場合にのみ必要です。
    • エクスペリエンス監査」タブは、チェックボックスが選択されていると表示されます。
  3. 実稼動および実稼動以外の両方のパイプラインでは、「エクスペリエンス監査」タブでエクスペリエンス監査に含めるパスを定義します。

    • ページのパスは / で始める必要があり、サイトに対する相対パスです。
    • 例えば、サイトが wknd.site で、エクスペリエンス監査に https://wknd.site/us/en/about-us.html を含める場合は、/us/en/about-us.html というパスを入力します。

    エクスペリエンス監査に含めるパスの定義

  4. ページを追加」をタップまたはクリックすると、パスが使用中の環境のアドレスで自動的に補完され、パスのテーブルに追加されます。

    テーブルへのパスの保存

  5. 上記の 2 つの手順を繰り返して、必要なパスを追加します。

    • 最大 25 個のパスを追加できます。
    • パスを定義しない場合は、デフォルトでサイトのホームページがエクスペリエンス監査に含められます。
  6. 保存」をクリックしてパイプラインを保存します。

エクスペリエンス監査結果 results

エクスペリエンス監査の結果は、実稼動パイプラインの実行ページを介した実稼動パイプラインの​ ステージテスト ​フェーズで表示されます。

パイプライン内のダッシュボード

エクスペリエンス監査では、設定済みのページの Google Lighthouse スコアの中央値と、前回のスキャンとのスコアの差を提供します。

パイプラインの​ ステージテスト ​フェーズのこの概要ビューには、次の 2 つのオプションがあります。

パイプライン実行の詳細に表示される概要に加えて、Cloud Manager ダッシュボードの「レポート」タブを使用してフルレポートに直接アクセスし、監査の完全な結果に直接アクセスすることもできます。

TIP
次の節では、エクスペリエンス監査の結果を表示する方法について説明します。

最も低速のページを表示 view-slowest-pages

最も低速のページを表示」をタップまたはクリックすると、最も低速の 5 ページ ​ダイアログが開き、監査するように設定したパフォーマンスのうち、最も低速の 5 ページが表示されます。

最も低速の 5 ページ

スコアは、パフォーマンスアクセシビリティベストプラクティスSEO 別に分類され、前回の監査からの各指標の偏差も表示されます。

デフォルトでは、ダイアログが開き、モバイルデバイスのスコアが表示されます。これは、ダイアログの上部にある​ デバイス ​切替スイッチを使用して、デスクトップスコアに変更できます。

このダイアログは、概要を簡単に理解することを目的としています。詳しくは、「フルレポートを表示」をタップまたはクリックします。

フルレポートを表示 view-full-report

エクスペリエンス監査のフルレポートは、次の方法で表示できます。

  • 最も低速の 5 ページ ​ダイアログで「フルレポートを表示」をタップまたはクリックします。
  • パイプラインの実行を表示する際に、「フルレポートを表示」をタップまたはクリックします。
  • Cloud Manager の「レポート」タブをタップまたはクリックします。

Cloud Manager の「レポート」タブが開き、エクスペリエンス監査 ​が表示されます。

エクスペリエンス監査レポート

レポートは 2 つの領域に分割されています。

ページスコア - トレンド trend

デフォルトでは、ページスコア - トレンド ​の選択されたビューは、過去 6 か月 ​の​ 中央値スコア ​です。

グラフボタンの上部と下部にある​ 選択 ​および​ 表示 ​ドロップダウンを使用して、ページ固有の詳細と異なる時間枠をそれぞれ選択します。グラフの上部にある「トレンドを更新」ボタンをタップまたはクリックして、選択内容を適用し、グラフを更新します。

グラフ上でマウスを移動すると、特定の時点での Google Lighthouse カテゴリの値がツールヒントに表示されます。

トレンドの詳細

特定の時点でチャートをタップまたはクリックすると、ポップオーバーが開き、そのスキャンの詳細が表示されます。開いているエクスペリエンス監査スキャン ​をタップまたはクリックしすると、そのスキャン結果が「エクスペリエンス監査スキャン結果」セクションに読み込まれます。

別のスキャンを選択

エクスペリエンス監査スキャン結果 scan-results

エクスペリエンス監査スキャン結果」セクションには、スコアを向上させる方法と、スキャンされたすべてのページの詳細に関するレコメンデーションが表示されます。これは 2 つのセクションに分割されています。

レコメンデーション recommendations

レコメンデーション」セクションには、一連のインサイトの集計が表示されます。デフォルトでは、パフォーマンス ​に関するレコメンデーションが表示されます。別のカテゴリに変更するには、レコメンデーション ​見出しの横にあるドロップダウンを使用します。

レコメンデーション

レコメンデーションの山形をタップまたはクリックすると、その詳細が表示されます。

レコメンデーションの詳細

使用可能な場合、展開されたレコメンデーションの詳細には、最も影響力のある変更に焦点を当てるのに役立つように、レコメンデーションの影響の割合も含まれます。

詳細表示で「ページを表示」リンクをタップまたはクリックして、レコメンデーションが適用されるページを表示します。

レコメンデーションの詳細のページ

スキャンされたページ scanned-pages

スキャンされたページ」セクションには、スキャンされたすべてのページの詳細スコアが表示されます。「前へ」ボタンと「次へ」ボタンを使用して結果をページ移動し、表示のページ番号を選択できます。

スキャンされたページ

特定のページのリンクをタップまたはクリックすると、「ページスコア - トレンド」セクションの「選択」フィルターが更新され、選択したページの「スコアとレコメンデーション」タブが表示されます。

ページの結果

生レポート」タブには、ページのすべての監査のスコアが表示されます。Lighthouse レポート 列のレポート日付をタップまたはクリックして、生データの JSON ファイルを取得します。

生レポート

これにより、ブラウザーで新しいタブが開き、選択したページの Lighthouse の生の JavaScript Object Notation(JSON)レポートの署名付き URL を含む https://googlechrome.github.io/lighthouse/viewer/ が示されます。このタブは、詳細な検査のために自動的に開きます。

生レポートの表示

オンデマンド監査レポート on-demand

エクスペリエンス監査レポートは、パイプラインの実行中に実行されるだけでなく、オンデマンドで生成することもできます。これは、パイプラインを実行せずにページを素早くスキャンするための優れたソリューションです。

オンデマンドスキャンを実行するには、「レポート」タブに移動して完全な監査レポートを表示し、「スキャンを実行」ボタンをタップまたはクリックします。

オンデマンドスキャン

スキャンを実行」ボタンが使用できなくなり、オンデマンドスキャンが既に実行中の場合は時計のアイコンが付いたバッジが表示されます。

オンデマンドスキャンの実行中

オンデマンドスキャンは、最新の 25 の設定済みページのエクスペリエンス監査をトリガーし、通常は数分で終了します。

完了すると、スコアグラフが自動的に更新され、パイプライン実行スキャンと同様に結果を正確に検査できます。

トリガー ​セレクターを使用すると、トリガータイプに基づいてスコアグラフをフィルタリングできます。

トリガーフィルター

NOTE
オンデマンドスキャンは、環境が削除されておらず、同じ環境上に他の保留中のスキャンがない場合にのみ開始できます。

エクスペリエンス監査で発生した問題 issues

監査対象として設定した ページが使用できなかった場合や、監査で他のエラーが発生した場合は、エクスペリエンス監査にこの情報が反映されます。

パイプラインには、アクセスできなかった相対 URL パスを表示するための展開可能なエラーセクションが表示されます。

エクスペリエンス監査で発生した問題

レポート全体を表示すると、詳細が「エクスペリエンス監査スキャン結果」セクションに表示され、展開可能になります。

フルレポートの問題

ページが使用できない理由は、次のとおりです。

  • 設定により、アクセスがブロックされる。
  • ページが存在しない。
  • ページにより、基本認証以外の認証を必要とするリダイレクトが行われる。
  • 内部的な問題が発生した。
  • 等。
TIP
ページの生レポートにアクセスすると、ページが監査できなかった理由の詳細を示すことができます。

一般的なパフォーマンスに関するヒント performance-tips

簡単に修正できる最も一般的な影響力のある問題のうち 2 つは、Cumulative Layout Shifts(CLS)と Largest Contentful Paint(LCP)に関連しています。

これらは、次の方法で改善できます。

  • スクロールしないと見えない範囲にある画像(下にスクロールしなくてもブラウザーに表示されるコンテンツ)を遅延読み込みしない。
  • リソースの読み込み方法に適切な優先度を付ける(例えば、ドキュメントを読み込んだ後に、スクロールしないと見えない範囲にある画像を非同期的に読み込むなど)。
  • スクロールしないと見えない範囲にコンテンツをレンダリングするために使用される JavaScript および CSS ファイルをプリフェッチする(必要な場合)。
  • 読み込みが遅いコンテナや後でレンダリングされるコンテナに縦横比を割り当てることで、垂直方向のスペースを確保する。
  • 画像を WebP 形式に変換してサイズを削減する。
  • <picture> と画像 srcset を使用して、ビューポートサイズごとに様々な画像サイズを指定する(およびサイズ変更が機能することを確認する)。

エクスペリエンス監査評価の詳細 details

次に、エクスペリエンス監査でのサイトの評価方法に関する追加情報を示します。これらは、機能の一般的な使用には必要ではなく、完全を期すためにここに提供されます。

  • この監査は、パブリッシャーの 設定されたエクスペリエンス監査ページのパスで定義されたオリジン(.com)ドメインをスキャンし、実際のユーザーエクスペリエンスをより正確にシミュレートし、web サイトの管理と最適化に関するより十分な情報に基づいた意思決定を支援します。

  • 実稼動のフルスタックパイプラインでは、ステージング環境がスキャンされます。

    • 監査中に関連する詳細が監査で提供されるようにするには、ステージング環境のコンテンツを実稼動環境にできる限り近づける必要があります。
  • ページスコア - トレンド」セクションの​ 選択 ​ドロップダウンに表示されるページは、すべてエクスペリエンス監査によって過去にスキャンされた既知のページです。

  • レコメンデーションには、前回のスキャンからの潜在的なゲインと差異が含まれる場合があります。

    • エクスペリエンス監査では、各ページの生レポートを処理し、無駄になったバイト数またはミリ秒を、パフォーマンススコアに重み付けされた影響を与えるインサイトと関連付けることで、潜在的なゲインを推定します。
    • 監査では、追跡するレコメンデーションを決定するために、この情報(および影響を受けるページ)が提供されます。
    • 詳しくは、一般的なパフォーマンスに関するヒントの節を参照してください
  • フロントエンドパイプラインが既存の環境にデプロイされる可能性がある(または同じ環境をターゲティングする複数のフロントエンドパイプラインが存在する可能性がある)とすると、スキャン結果は環境レベルで集計され、スキャンをトリガーしたパイプライン実行に関係なく、スコア、トレンド、レコメンデーションが同じ選択した環境に表示されます。

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab