マスター Google Lighthouse:サイトのパフォーマンスをテストして最適化する

検索エンジンの結果で Web サイトを上位にランク付けする場合、Web サイトの速度は無視できない要素です。ユーザーを喜ばせるだけでなく、認知度の向上にもつながります。結局のところ、ページをクリックして読み込まれるまで永遠に待ちたい人はいないでしょう。たとえば TechCult は、ブログの読み込みが非常に速いですよね。冗談はさておき、速度が遅いために自分のウェブサイトがランクインできないのではないかと心配している場合は、Google Lighthouse が役に立ちます。今日の記事では、パフォーマンス テストに Google Lighthouse を使用する方法を説明します。

第一印象が最後になるとはよく言われることわざです。その点で、多くの場合、読み込みが速い Web サイトはユーザー エクスペリエンスの向上という点で優れており、最終的にはコンバージョン率の向上につながる可能性があります。 Google などの検索エンジンでも、読み込みが速いウェブサイトが検索結果で上位にランクされます。

Google Lighthouse は、Web サイト開発者と所有者が Web ページの品質を評価および改善するのに役立つオープンソースの自動ツールです。モバイルとデスクトップの両方について、パフォーマンス、アクセシビリティ、ベスト プラクティス、SEO の監査が行われます。詳細なレポートと推奨事項に基づいて、ユーザーはサイトのパフォーマンスを最適化し、ユーザー エンゲージメントを向上させることができます。 Lighthouse は、パブリックまたはプライベートにアクセスできる任意の Web ページに対して実行できます。それがどのように機能し、どのように使用できるかを見てみましょう。

方法 1:Lighthouse を直接追加して実行する

Lighthouse は、Google 拡張機能の形式でもユーザーが利用でき、ダウンロードして Chrome ブラウザで監査を実行できます。以下の手順に従います。

1. 任意のウェブブラウザで Chrome ウェブストアのページにアクセスして Lighthouse 拡張機能を入手します。

2. [Chrome に追加] をクリックします。 .

3. [拡張機能を追加] を選択します。 確認するため。

4. 追加したら、分析したい Web サイトをブラウザで起動します。

5.拡張機能 (パズル) アイコンをクリックします。 アドレス バーの横にある [ライトハウス] を選択します。 .

6. [レポートの生成] をクリックします。 .

それです！数秒以内に、Lighthouse はテストを実行した Web サイトを分析した詳細なレポートを生成します。

方法 2:PageSpeed Insights を使用する

Google PageSpeed Insights も、分析エンジンとして Lighthouse を使用する Web パフォーマンス テスト ツールです。したがって、これを使用して Web サイトのレポートを生成できます。次の手順に従います。

1. PageSpeed Insights Web サイトにアクセスします。

2. テキストフィールドに Web サイトの URL を入力し、[分析] をクリックします。 .

テストが完了すると、実際のユーザーが体験した結果を示す Chrome ユーザー エクスペリエンス レポートが届きます。

「パフォーマンスの問題の診断」セクションには、Lighthouse スコアが表示されます。モバイルとデスクトップの両方で結果を確認できます。

方法 3:DevTools で Lighthouse を実行する

Lighthouse には Google Chrome DevTools にパネルがあり、Web サイトがローカル サーバー上で実行されている場合や、ログインが必要なサイトのパフォーマンス テストにも使用できます。その方法は次のとおりです。

1. 監査する Web サイトにアクセスします。

2. ページ上の任意の場所を右クリックし、[検査] を選択します。 メニューから。

3. >> アイコン (その他のタブ) をクリックします。 [灯台] を選択します。 コンテキスト メニューから。

4. ページ負荷の分析 をクリックします。 右上のボタンをクリックし、結果が準備できるまで待ちます。

注: デバイスを選択します。 すべての カテゴリ を適切に保持します。 有効になりました。 

モードを変更することもできます。 DevTools の Lighthouse には、次の 3 つのテスト モードが用意されています。

• ナビゲーション: パフォーマンス、アクセシビリティ、SEO などの全体的な結果を表示します。

• 期間: ページの読み込みとサーファーとの対話にかかる時間に基づいて結果を表示します。テストの実行中にページを操作する必要があります。

• スナップショット: 現在のページのスコアを計算します

こちらもお読みください: ベスト Web スクレイピング ツール 31 選

方法 4:コマンドラインで Lighthouse モジュールを使用する

 Lighthouse は、継続的インテグレーション システムに統合し、コマンド ラインまたはプログラムで使用できるノード モジュールとしても利用できます。必要なのはノードのバージョンだけです。 PC に Node.js がインストールされている場合は、以下の手順に従います。

1. サーバーにログインし、次のコマンドを実行してデバイスに Lighthouse グローバル モジュールをインストールします。

npm install -g lighthouse

2. インストールしたら、次のコマンドを実行して Lighthouse テストを実行します。

lighthouse -- view <url>

次のコマンドを使用すると、利用可能なすべてのオプションを表示できます。

lighthouse --help

Lighthouse はスコアをどのように計算しますか

Google Lighthouse は、パフォーマンス、アクセシビリティ、ベスト プラクティス、SEO、PWA など、ウェブサイトのパフォーマンス指標のさまざまな側面を組み合わせて評価します。監査が成功すると、Web サイトのパフォーマンスとユーザー インタラクションを改善するために必要な改善案だけでなく、各側面のスコアを含むレポートが生成されます。通常、ウェブサイトは 0 から 100 のスケールで評価されます。

パフォーマンス

Lighthouse は、Web ページの読み込み速度を分析します。パフォーマンス スコアは、次の指標を考慮して計算されます –

• 最初のコンテンツフル ペイント (FCP): コンテンツの最初の要素が画面上に描画される速度
• 最大のコンテンツフル ペイント (LCP): 最大のコンテンツ要素が表示されるまでにかかる時間を測定します
• 累積レイアウト シフト (CLS): ページの視覚的な安定性を評価するために、ページの読み込み中に発生する予期しないレイアウトのシフトの量を測定します。 CLS が低い場合は、Web サイトが安定していることを示します。 
• 合計ブロック時間: メインスレッドがブロックされ、ユーザー入力に応答しない時間を測定します。
• 速度指数: ページのすべてのコンテンツが完全に表示されるまでの時間を示します

これらの指標は、Web サイトの読み込み速度と視覚的な安定性を測定します。画像のサイズと数、使用されているプラグインの数、ウェブサイト コードの効率など、いくつかの要因がこのレポートに影響します。

Lighthouse は、メトリック値の加重平均を取得してスコアを計算します。当然のことながら、重み付けが高い測定値は、合計パフォーマンス スコアに大きな影響を与えます。メトリック スコアはレポートには表示されませんが、バックグラウンドで計算されます。 [計算ツールを表示] オプションをクリックすると、ウェブサイトに影響を与える要素の詳細な計算にアクセスできます。

アクセシビリティ

これは、障害のあるユーザーが Web サイトにどれだけ簡単にアクセスできるかを測定するユーザー中心のスコアです。これは、画像上の代替テキストの存在、ARIA 属性の使用、Web サイトのキーボード アクセシビリティなどの要因に影響されます。各アクセシビリティ監査は合格または不合格のいずれかになります。パフォーマンス監査とは異なり、ページはアクセシビリティ監査に部分的に合格してもポイントを受け取りません。

• 画像の代替テキスト: ページ上のすべての画像には、適切かつ説明的な代替テキストが必要です。これは、画像を解釈するためにスクリーン リーダーに依存している視覚障害のあるユーザーにとって必要であるためです。
• セマンティック HTML: タイトル、見出し、リストなどのセマンティック HTML 要素を適切に使用すると、スクリーン リーダーやその他の支援ソフトウェアがページの構造を理解するのに役立ちます
• 色のコントラスト: テキストとその背景の色のコントラストは、Web コンテンツ アクセシビリティ ガイドラインで設定された基準を満たす必要があります。十分な色のコントラストにより、視覚障害や色覚異常のある人でもテキストを確実に読むことができます。 

こちらもお読みください: ChatGPT を使用して Web サイトを構築する方法

ベスト プラクティス

Lighthouse は、Web サイトが Web 開発のベスト プラクティスとコーディング標準にどの程度準拠しているかを測定し、それに基づいたスコアを提供します。最新の JavaScript 機能と安全な接続 (HTTPS) の使用をチェックし、縮小と圧縮の使用、セキュリティ ヘッダーの存在、robots.txt ファイルの使用などの要因の影響を受けます。その下の一般的な監査には次のようなものがあります。

• 大規模な JavaScript ライブラリを避ける
• 未使用の CSS を避ける
• テキスト圧縮を有効にする
• レンダリングをブロックするリソースを排除する
• ブラウザのキャッシュを活用する
• 効率的なキャッシュ ポリシーを使用して静的アセットを提供する

SEO

SEO は、Web サイトが検索エンジンに対してどの程度最適化されているかを測定します。これは、メタディスクリプションやタイトルタグの存在、関連キーワードの使用、Web サイトのコンテンツの構造などの要因によって影響されます。スコアは、次の監査のスコアを平均して計算されます。

• ドキュメントのタイトル
• 説明
• 見出し
• 画像
• リンク
• メタディスクリプション
• ロボット.txt

こちらもお読みください: ベスト 27 の無料 Web サイト ホスティング サービス

結果の解釈方法

Lighthouse は、各生のメトリクス値を 0 ～ 100 のメトリクス スコアに変換します。スコアが高いほど、優れていることになります。 メトリクス スコアは、次の範囲に従って色付けされます。

• 0 ～ 49 (赤い三角形):悪い
• 50 ～ 89 (オレンジ色の四角):改善の必要あり
• 90 ～ 100 (緑色の円):良好

同じ Web サイトでテストを実行すると、全体的なスコアの変動が観察されるのが一般的です。この変動には、いくつかの要因が考えられます。

• 各分析では、単一ページ読み込みのパフォーマンスに関する洞察のみが提供されます。 2 ページのロードは同じではないため、ロード時間は当然異なる可能性があります。 
• ページの速度は、広告や頻繁に変更される要素、ネットワーク リクエストや PC 上のバックグラウンド アクティビティを変更するブラウザ拡張機能などの動的コンテンツの存在によって影響を受ける可能性があります。
• PageSpeed Insights とローカル コンピュータなど、異なる環境で取得されたスコアは、ハードウェアやネットワークの状態が異なるため、直接比較できない場合があります。

Lighthouse スコアを向上させる方法

Lighthouse は、Web ページのパフォーマンスを評価するために、ラボ データ (シミュレートされたテスト) とフィールド データ (実際のユーザー データ) の両方を提供します。フィールド データは実際のユーザーがサイトをどのように体験するかについての洞察を提供し、ラボ データは変更や改善をテストするのに役立ちます。

まず、パフォーマンスの領域における推奨事項に集中します。 Web サイトの読み込みが高速化すると、ユーザー エクスペリエンスが向上し、SEO ランキングが向上する可能性があります。パフォーマンス スコアが向上したら、他の領域の推奨事項に焦点を当て始めることができます。アクセシビリティと SEO はウェブサイト全体の品質に不可欠な要素であるため、これらの領域の強化にも努力を注ぐ価値があります。

こちらもお読みください: Zyro 対 Wix:どのウェブサイト ビルダーを選ぶべきですか?

初心者向けのボーナスヒント

ウェブサイトを設計して立ち上げたばかりの場合は、以下の点に注意してください。

• ライトハウス レポートの数多くの提案に圧倒されないでください。最も重要なアドバイスから始めて、リストの下に向かって進めていきます。
• Lighthouse レポートは、長期にわたる成長を追跡するために使用できます。推奨事項を実行すると、Lighthouse の評価が向上するはずです。
• 多くのデバイスやブラウザでウェブサイトをテストすることを忘れないでください。 Lighthouse レポートは単一のテストに基づいているため、ウェブサイトを複数のデバイスとブラウザでテストして、すべてのユーザーにとって適切に動作することを確認することが重要です。

私たちのガイドが、ウェブサイトのパフォーマンスをテストするために Google Lighthouse を使用する方法を理解するのに役立ったことを願っています。 そしてそれによってそれを改善します。ご質問やご提案がございましたら、コメント欄にご記入ください。 TechCult では、このような有益なブログを今後も更新していきますので、ご期待ください。