灯台を使用して、ウェブサイトのパフォーマンス、アクセシビリティ、SEOを監査するにはどうすればよいですか？-フロントエンドQ&A-php.cn

灯台を使用して、ウェブサイトのパフォーマンス、アクセシビリティ、SEOを監査するにはどうすればよいですか？

Lighthouseは、Webページの品質を向上させるためのオープンソースの自動化されたツールです。パフォーマンス、アクセシビリティ、SEOなど、ウェブサイトのさまざまな側面を監査するために使用できます。灯台を使用してウェブサイトを監査する方法は次のとおりです。

灯台へのアクセス：
- Google Chromeを使用している場合、LighthouseはChrome Devtoolsに統合されています。 Ctrl Shift I （Windows/Linux）またはCmd Option I （MAC）を押して、[監査]タブに移動し、[レポートの生成]をクリックすることで開くことができます。
- または、監査を自動化する場合は、灯台をノードモジュールとして使用するか、コマンドラインから実行することもできます。
監査の実行：
- Chrome DevTools監査パネルでは、監査するカテゴリを選択できます：パフォーマンス、アクセシビリティ、ベストプラクティス、SEO、およびPWA（Progressive Webアプリ）。これらの側面に焦点を当てた監査を実行するために、パフォーマンス、アクセシビリティ、およびSEOのボックスを確認してください。
- [レポートの生成]をクリックすると、Lighthouseはページのロードをシミュレートし、ページを分析し、選択したカテゴリに基づいてレポートを生成します。
結果の解釈：
- パフォーマンス：灯台は、パフォーマンススコアと、First Contentful Paint（FCP）、Speed Index、最大のコンテンツペイント（LCP）、インタラクティブ時間（TTI）、および総ブロッキング時間（TBT）などのメトリックのリストを提供し、改善の機会を提供します。
- アクセシビリティ：コントラスト比、画像の代替テキストの欠落、キーボードのアクセシビリティなどの問題に関する詳細なレポートとともに、アクセシビリティスコアを受け取ります。
- SEO：灯台は、説明的なタイトル、メタの説明、見出しの適切な使用、検索エンジンがクロール可能にすることなど、SEOのベストプラクティスをチェックします。
レポートの利用：
- レポートには特定の問題がリストされ、それらが問題がある理由を説明し、それらを修正するための提案を提供します。レポートをエクスポートして後でレビューするか、チームと共有できます。

これらの手順に従うことにより、灯台を効果的に使用して、ウェブサイトのパフォーマンス、アクセシビリティ、およびSEOに関する洞察を得ることができ、情報に基づいた改善を可能にします。

Lighthouseは、Webサイトのパフォーマンスの最適化にどのような特定のメトリックを提供していますか？

Lighthouseは、Webサイトのパフォーマンス最適化のためのいくつかの特定のメトリックを提供します。それぞれが、ページの読み込み体験のさまざまな側面を理解するのに役立つように設計されています。これらのメトリックには以下が含まれます。

First Contentful Paint（FCP）：このメトリックは、ページの読み込みが開始される時期から、ページのコンテンツの一部が画面上にレンダリングされる時期を測定します。優れたFCPスコアは1.8秒以下です。
速度インデックス：これにより、ページの内容が目に見えて人口侵食される速さが測定されます。ページロードの視覚的な完全性を定量化します。より低い速度インデックスは、ページが視覚的により速く読み込まれることを意味します。
最大のコンテンツ型塗料（LCP）： LCPは、ページがロードを開始したときから、最大のテキストブロックまたは画像がビューポート内で完全にレンダリングされる時期を測定します。 Googleは、2.5秒以下のLCPを推奨しています。
Interactive（TTI）への時間：このメトリックは、ページが完全にインタラクティブになるまでの時間を記録します。メインスレッドのほとんどがアイドル状態（5秒以上50ミリ秒未満）で、ユーザー入力を迅速に処理できる場合、ページはインタラクティブと見なされます。ターゲットTTIは3.8秒以下です。
総ブロッキング時間（TBT）： TBTは、入力応答性を防ぐためにメインスレッドが十分に長い間ブロックされていたFCPとTTIの間の合計時間を測定します。目標は、これを300ミリ秒未満に保つことです。
累積レイアウトシフト（CLS）： CLSは、ページのロード中に発生する予期しないレイアウトシフトを定量化することにより、ページの視覚的安定性を測定します。優れたCLSスコアは0.1以下です。

これらの各メトリックは、最初のレンダリングから完全なインタラクティブ性や視覚的安定性まで、パフォーマンスのさまざまな側面を理解するために重要です。これらのメトリックで強調されている問題に対処することにより、ウェブサイトのパフォーマンスを大幅に向上させることができます。

灯台は、私のウェブサイトのアクセシビリティの問題を特定して修正するのにどのように役立ちますか？

Lighthouseは、包括的なアクセシビリティ監査を通じて、Webサイトのアクセシビリティの問題を特定して修正するのに役立ちます。これがどのように機能しますか：

問題の識別：
- 自動テスト： Lighthouseは、WCAG（Webコンテンツアクセシビリティガイドライン）2.1標準に基づいた一連の自動テストを実行します。色のコントラスト不足、ARIA属性の欠落または不適切な使用、キーボードナビゲーションの問題などの問題をチェックします。
- レポート生成：監査を実行した後、Lighthouseは、ページ上の重大度や場所など、各アクセシビリティの問題をリストする詳細なレポートを生成します。問題は、批判的で、深刻で、中程度の3つのレベルに分類されます。
問題を理解する：
- 説明：特定された問題ごとに、Lighthouseは、それが問題である理由と、特に障害のあるユーザーにどのように影響するかについての明確な説明を提供します。これは、問題の実際の影響を理解するのに役立ちます。
- 例：レポートには、多くの場合、問題がページ上の場所で発生する場所の特定の例が含まれており、見つけやすくなります。
問題の修正：
- 推奨事項： Lighthouseは、各アクセシビリティの問題を修正するための実用的な推奨事項を提供します。たとえば、ページに色のコントラストが不十分な場合、灯台はWCAG標準を満たす特定の色の組み合わせを提案します。
- ドキュメントとリソース：より複雑な問題については、灯台は、修正を正しく実装するのに役立つドキュメントまたはリソースへのリンクを提供する場合があります。
検証：
- 提案された変更を行った後、問題が解決されたことを確認するために灯台を再度実行できます。この反復プロセスは、ウェブサイトが時間の経過とともにアクセスできるようにするのに役立ちます。

Lighthouseのガイダンスに従うことで、Webサイトのアクセシビリティを体系的に改善し、すべてのユーザーにより包括的にすることができます。

サイトの検索エンジンのランキングを改善するために、灯台監査にどのようなSEOの推奨事項が期待できますか？

Lighthouseは、サイトの検索エンジンのランキングを改善することを目的としたいくつかのSEO推奨事項を提供します。ここにあなたが期待できる重要な提案のいくつかがあります：

適切なタイトルとメタ説明：
- Lighthouseは、ページに記述<title></title>と<meta name="description">タグがあるかどうかを確認します。これらは、コンテンツを正確に理解してインデックスを合わせるのに役立つため、検索エンジンにとって重要です。
見出しの使用：
- Lighthouseは、見出し（ <h1></h1> 、 <h2></h2>など）が正しく、構造化された方法で使用されることを保証します。見出しを適切に使用すると、検索エンジンがコンテンツの構造と階層を理解するのに役立ちます。
クロール性：
- Lighthouseは、ページが検索エンジンによってクロール可能であることを確認します。ブロックされたリソース（robots.txtを介して）、標準タグ、およびhreflangタグなどの問題をチェックします。これは、SEOにとって重要です。
レスポンシブデザイン：
- Lighthouseは、サイトがモバイルフレンドリーかどうかを評価します。これは、Googleのような検索エンジンの重要なランキング要因です。タップターゲットが近づきすぎたり、モバイルデバイスのサイズが正しくないなどのモバイルユーザビリティの問題を探します。
画像の最適化：
- Lighthouseは、画像に説明的なalt属性を追加することをお勧めします。これは、検索エンジンが画像の内容を理解し、アクセシビリティを改善するのに役立ちます。また、画像ファイルサイズを最適化してページの読み込み時間を改善することも示唆しています。
コンテンツインデックス性：
- Lighthouseは、タブやアコーディオンの後ろに隠されたコンテンツなど、インデックス不可能なコンテンツをチェックし、検索エンジンによってそのようなコンテンツをインデックスできるようにするための推奨事項を提供します。
リンクとアンカー：
- Lighthouseは、アンカーテキストが説明的であり、リンクがクロール可能であることを保証します。また、サイトマップの存在をチェックします。これにより、検索エンジンがサイトのインデックスを検索するのに役立ちます。