Dotcom-Monitor Web サイト監視ソリューションを使用すると、パフォーマンス、検索エンジン最適化 (SEO)、およびその他の Web サイトの指標を自動的に監査するライトハウス レポート監視デバイス (Web ページ監視ソリューション) を作成および構成できます。

グーグル灯台とは何ですか?

Googleライトハウス は、ウェブサイトの速度とパフォーマンスを監査するためのオープンソースの自動化ツールです。 ロード時間、アクセシビリティ、Web ページの SEO、プログレッシブ Web アプリ、およびベスト プラクティスの拡張リストを監査します。 ライトハウスはPageSpeedインサイト(PSI)に組み込まれ、ユーザーはパフォーマンスデータに関するレポートを確認できるようになりました。 さらに、PageSpeed Insights ではラボデータと実世界のデータを組み合わせて使用しますが、ライトハウスではレポート作成にラボ データのみを使用します。

PageSpeedインサイトメトリックは、SEOランキングの要因となっているWebページの速度に対するユーザーの認識に関する洞察を提供するのに役立ちます。 しかし、以下の記事で詳しく説明する大きな灯台スコアを目指すのと同じくらい重要なのは、知覚されたウェブページの読み込み時間を減らすことによってウェブページのパフォーマンスを向上させるためにこれらの灯台の推奨事項をどうするかです。

Lighthouseは、実際の状況(パッケージの紛失、接続不良など)の下で実際のブラウザでWebページを読み込むシミュレーションを行い、監査指標を反映したスコアを含むレポートを生成します。 また、サイトの速度とパフォーマンスのスコアを向上させる方法についての提案も含まれています。 Lighthouseレポートは、分離されたテストに加えて、時間の経過に伴う結果の変化を比較するためにWeb開発で非常に役立ちます。

しかし、定期的なウェブサイトテストに関しては、各テストケースでLighthouseを手動で実行 することは効率的ではないようです。 この記事では、ドットコムモニターを使用して監査を自動的に実行する方法について説明します。

灯台レポートをより効果的に使用する方法

SEO要件を満たすためにWebページのコンテンツを改善するたびに、改善前後のSEOスコアの変化を追跡する必要がある場合があります。 SEO の場合、1 回限りのチェックは意味を持たないでしょう。 全く逆です。 SEO スコアが時間の経過と同時に、定期的にどのように変化するかを監視する必要があります。

たとえば、すべてのバージョンでレポートを手動で取得することなく、パフォーマンスメトリックに関連するWebページの更新の影響を把握したいとします。 さらに、Web サイトの機能の最適化が特定のパフォーマンス メトリックに影響を与える場合があります。 たとえば、Web ページにコンテンツを読み込むのにかかる時間を短縮する作業を行っている場合は、 最初のコンテンツフル ペイントまたは最初 意味のあるペイント のスコアの変更に注目し、スコアが低下しないようにする必要があります。 これらのメトリックについては、この記事で詳しく説明します。

ドットコムモニターを使用した灯台レポートの設定

ドットコムモニターは、特定のウェブページのメトリックでの変化を監視するために指定された頻度で灯台レポートを生成することができます。 ソリューションの主な機能は、特定の監査メトリックを監視することです。 メトリックを選択し、監視対象のスコアが許容範囲を超えたときにアラート通知を受け取るエラーしきい値を設定できます。 さらに、Lighthouse の実行中に発生したエラーに対するアラートの構成、監査スケジューラの指定、および監視結果のスケジュールされたレポートの設定を行うことができます。

監視デバイスを構成したら、Dotcom -モニタ オンラインレポートからライトハウスレポートをプルできます。

灯台レポート監査の設定

URL

灯台で監査する URL を入力します。 URL アドレスは、ブラウザで使用する場合とまったく同じ形式http://www.example.com。 アドレスの先頭に http:// または https:// を含める必要があります。 この時点で、URL の最後に GET パラメーターを含めることもできます。

灯台レポートの指標

ドットコムモニターは、特定のWebページの監査指標の監視とアラートを有効にします。 ライトハウス レポートで選択したメトリック スコアが監視されます。 メトリック スコアの エラーしきい値 が指定され、[ 灯台エラーに警告] オプションが選択されている場合、対象のスコアが許容範囲を超えると、デバイスは失敗したと見なされます。 アラート通知を受信するには、デバイスの編集画面の [アラート] タブでデバイスのアラート構成します。

また、選択したメトリック監視の結果を日単位、週単位、月単位の統計に基づいて集計する スケジュール済みレポート を構成することもできます。 アラートとレポートを受信する次の Lighthouse メトリックから 1 つの監査メトリックを選択します。 パフォーマンスレポートにはさまざまなメトリックが含まれており、以下の各メトリックについて説明します。

パフォーマンス総合スコア

パフォーマンス全体スコアは、すべてのパフォーマンスメトリックの 加重平均 です。 重み付けされた指標は、パフォーマンス全体スコアに大きな影響を与えます。

最初のコンテンツペイント

最初のコンテンツフル ペイント(FCP) は、ユーザーがページに移動した後、DOM コンテンツの最初の部分をレンダリングするのにブラウザが必要な時間を測定します。 良い最初のコンテンツフルペイントスコアは1秒以下のものです。 ファーストコンテンツフルペイントとファーストペイントという用語を区別することが重要です。 最初のペイントは、ページ自体の背景色と同じくらい単純な、何かがレンダリングされたと見なされる場合ですが、ユーザーが利用または操作するようになった関連するコンテンツや情報を提供しません。

最初のコンテンツフルペイントは、ユーザーに配信またはペイントされるコンテンツになります。 ほとんどの Web ページでは、これは通常、ナビゲーション メニューやヒーロー画像などのスクロールせずに見える範囲のコンテンツです。 これらは、ページの読み込み時にユーザーに表示される実際のコンテンツの最初の部分になります。 ファーストコンテンツフルペイントは、ファーストペイントよりも便利な実世界のデータポイントを提供します。

速度指数

速度インデックスは、ページのコンテンツが目に見えて読み込まれる速さを示します。 スピードインデックスは、ウェブページの速度を測定し、他のウェブサイトのデータと比較することによって決定されます。 速度指数スコアが低いほど、パフォーマンスが向上します。 4.3秒未満のページは良好と見なされ、緑色の色分けで示されます。 4.4~5.8の間のページ速度は、適度な速度と見なされ、オレンジ色で表示されます。 最後に、5.8秒以上のページ速度は遅いと見なされ、赤で示されます。

インタラクティブに時間

Time to Interactive (TIME to Interactive)または TTI は、ページの読み込みを開始してからメインのサブリソースが読み込まれた時刻までの時間を測定し、ユーザー入力に迅速に確実に応答できます。 対話型に合理的な時間は 5 秒未満です。 Time to Interactive に関する重要な注意事項の 1 つは、ボタンやリンクなどのページ コンテンツが表示されたときに、ユーザーがサイトを操作できるようにすることです。 目標は、最初のコンテンツフルペイントとインタラクティブへの時間の間の時間をできるだけ短くすることです。 ページがこのコンテンツを提供するように設定されているが、スクリプトが読み込まれるまでインタラクティブでない場合、一部のユーザーが迷惑になる可能性があります。

最初の意味のあるペイント

最初の意味のあるペイント(FMP) は、ページのプライマリ コンテンツが表示されるときに測定されます。 最初の意味のあるペイントは、ページの読み込みが開始されてから、プライマリのアバブザフォールドがレンダリングされるまでの時間です。 最初の意味のあるペイントは、実際のウェブサイトのデータパフォーマンスに対して得点される最初のコンテンツフルペイントと同じ方法で測定されます。 ページの読み込み方法によっては、最初の意味のあるペイントと最初のコンテンツフルペイントが同じスコアになる可能性がありますが、インラインフレーム(iframe)が使用されている場合など、時間は異なります。 2 秒未満の時間は高速とみなされ、緑色で示されます。 2秒から4秒の間のものは中程度で、オレンジ色で表示されます。 最後に、4秒以上のものは遅く、赤で示されます。

最初の CPU アイドル

最初の CPU アイドル は、ページのメイン スレッドが入力を処理するのに十分な静けさを持つ最初の時間をマークします。 ページが読み込まれるまでの時間と読み込み時間を考慮できます。 このスコアは、このリストの他のスコアと同様に、ページを他の Web サイトのデータと比較することによって決定されます。 良い最初のCPUアイドルスコアは4.7秒未満の任意の時間であり、緑色で示されます。 4.8秒から6.5秒の間の任意の時間は適度に速く、オレンジ色で示されます。 最後に、6.5秒を超える時間は遅く、赤で示されます。

最大ポテンシャルファースト入力遅延

[最大可能性のある最初の入力遅延]は、ユーザーが経験できるデバイスの最長実行の時間 (ミリ秒単位) です。 つまり、リンクやボタンをクリックしてそのアクションを処理するなどのユーザーの操作にブラウザーが応答するのにかかる時間です。 高速の最大潜在的な最初の入力遅延は 130 ミリ秒未満の値で、緑色で示されます。 250 ミリ秒を超えるものは遅いと見なされ、赤で示されます。

アクセシビリティ総合スコア

アクセシビリティ総合スコアは

 

、ウェブサイトの

アクセシビリティを向上させる機会を強調します。

これは、障害を持つユーザーにアクセシビリティを確保することだけではありません。 最小の修正でもmakin

g は HTML 要素の

タイトルが正しく、実装されている

場合、すべての

ユーザーが Web ページにアクセスできるように、長い道の

りを歩むことができます。

 

ベスト プラクティス全体のスコア

ベスト プラクティスの総合スコアは、有効な JavaScript、画像のサイズ、暗号化など、業界のベスト プラクティスに従っていることを保証します。 このセクションでは、ライトハウス監査に合格または失敗したさまざまな要素の概要と推奨事項も示します。

SEO総合スコア

SEO総合スコアは、ページが検索エンジンの結果ランキングに最適化されていることを保証します。 たとえば、Lighthouse監査では、指定されたページに関連するタイトル、メタディスクリプション、成功したステータスコードなどがあることが示されます。 また、このセクションには、監査基準を満たしておらず、SEO の改善と最適化に関する確認が必要な項目も含まれています。

エラーしきい値

選択したメトリックに対して許容可能なスコア範囲を設定します。 スコアが範囲外の場合、デバイスは失敗としてマークされます。 設定したしきい値に基づいてアラートを受信するには、[灯台のエラーの警告]フィールドで[はい]を選択します。

DNS オプション

DNS オプション機能を使用すると、監視タスク中にドメイン ネーム サーバー (DNS) 要求を実行する方法をユーザーが選択できます。

ホスト名の解決モードを指定するには 、[DNS 解決モード] セクションで、使用可能なモードのいずれかを選択します。 機能の構成の詳細については 、「DNS モード オプション」を参照してください。

[カスタム DNS ホスト]セクションには、IP アドレスとホスト名のマッピングが含まれています。

マッピングを指定するには、対応するフィールドに IP アドレスとホスト名を入力します。

例:

192.168.107.246 example.com user.example.com userauth.example.com tools.example.com
192.168.107.246 example.com
192.168.107.246 user.example.com
192.168.107.246 userauth.example.com

参照 : DNS モード オプション

 

より良いユーザーエクスペリエンスを実現するために灯台の監視を自動化

ページの速度とページの読み込み時間は密接に関連していますが、Web サイトのパフォーマンスに関しては別の要素として見なされる必要があることを認識することが重要です。 ページの読み込み時間は、すべての Web ページ コンテンツのレンダリングにかかる時間を測定することに重点を置いていますが、これは優れたユーザー エクスペリエンスを提供する際の要因ですが、ユーザーは Web ページが完全に読み込まれるのを待ってから、移動、クリック、または次のアクションを実行します。

Lighthouse の監視レポートを使用すると、Web ページのパフォーマンスを継続的に測定して追跡し、PageSpeed Insights によって設定されたパフォーマンスメトリック、しきい値、およびベスト プラクティスに合わせてページを確実に満たすことができます。

灯台のメトリックに関するその他のリソース

灯台の指標の詳細については、次のページを参照してください。

https://developers.google.com/web/tools/lighthouse

https://web.dev/performance-scoring/