LighthouseによるHTML監査

Lighthouse は Chrome DevTools の「Audits」タブに組み込まれた自動監査ツールです。パフォーマンス、アクセシビリティ、ベストプラクティス、SEO、PWA の各分野でページをスコアリングします。ブラウザー上でページを監査し、計測を行い、実行可能な改善提案を生成します。

Chrome DevTools で Lighthouse に切り替え、カテゴリーを選択し、Desktop または Mobile を選んで、「Analyze page load」をクリックします。ツールがクリーンな環境でページを再読み込みし、1分以内にレポートを生成します。

パフォーマンスは Core Web Vitals とその他の速度指標を測定します。アクセシビリティは WCAG に準拠したルールをチェックします。ベストプラクティスはセキュリティと最新の Web 標準を扱います。SEOはクロール可能なマークアップをチェックします。PWAはインストール可能性とオフライン対応を確認します。

アクセシビリティ監査では、alt テキストの欠落、フォームラベルの欠落、色のコントラスト不足、言語属性の欠落、id の重複、ランドマークの欠落、キーボード操作に対応していないフォーカス可能な要素を検出します。それぞれの問題から、詳しい修正方法の説明を確認できます。

Largest Contentful Paint（LCP）、Cumulative Layout Shift（CLS）、Total Blocking Time（TBT）、Speed Index などがあります。それぞれの指標をスコアリングし、重み付けして総合的なパフォーマンススコアを算出します。Lighthouse では、各指標に最も大きく影響している DOM 要素を確認できます。

HTTPS の使用状況、コンソールエラー、画像のアスペクト比、非推奨 API、混在コンテンツをチェックします。ベストプラクティス監査では、最新化すべき従来型または安全でないパターンを幅広く検出できます。

meta description の欠落、<title> の欠落または重複、robots.txt の問題、説明的なテキストがないリンク、viewport メタタグの欠落、hreflang の問題を検出します。コンテンツレベルの分析には、Lighthouse SEO と実際の SEO 監査ツール（Ahrefs、Screaming Frog）を組み合わせてください。

インストール可能にするためのすべての要件をチェックします。HTTPS、最低限の項目を備えた有効なマニフェスト、登録済みのサービスワーカー、viewport タグ、アイコンなどです。インストール可能なアプリとして公開する前に、PWA 監査のすべての失敗項目を修正してください。

Lighthouse CLI と Lighthouse CI ツールを使うと、監査を CI/CD に統合できます。各 PR でデプロイ済みのプレビューに対して Lighthouse を実行し、スコアがしきい値を下回って低下した場合はアクションを失敗させます。これにより、アクセシビリティ、パフォーマンス、SEO の静かなリグレッションを防げます。

Lighthouse のレポートは JSON として保存し、プログラムで比較できます。LCP スコアを時系列で追跡してリグレッションを検出したり、2つの PR を比較してどの変更がどの指標に影響したかを確認したり、しきい値の超過を通知したりできます。データはツールで扱いやすい構造になっています。

Lighthouse はシンセティックテストです。実際のユーザーではなく、制御された環境で実行されます。実際のユーザー体験を追跡する Real User Monitoring（RUM）ツールと組み合わせてください。シンセティックテストでリグレッションを早期に検出し、RUM でユーザーが実際に改善を感じていることを確認します。

特定の状況では避けられないパターンを監査が検出することがあります。意図的な例外は記録し、Lighthouse CI の無視リストに追加し、プラットフォームの進化に合わせて定期的に再評価してください。「すべて無視する」という一括設定は、自動監査の目的を失わせるため避けてください。

Lighthouse のスコアは一度だけ修正する目標ではなく、継続的に改善する目標として扱ってください。すべての PR でスコアを確認し、リグレッションにはすぐ対応し、ベースラインを少しずつ改善する文化を築きます。この取り組みを続けると、ほとんどのチームで数か月かけてスコアが着実に向上します。

Lighthouse のシンセティック監査を Real User Monitoring（RUM）と組み合わせるべきなのはなぜでしょうか。

Lighthouse は、パフォーマンス、アクセシビリティ、ベストプラクティス、SEO、PWA の各分野でページを監査します。単発のチェックには Chrome DevTools から、継続的インテグレーションには Lighthouse CI から実行してください。すべての PR でリグレッションに対処し、計測に基づいて継続的に改善する文化を築き、シンセティック監査と Real User Monitoring を組み合わせて、ラボでの改善が実際のユーザーにも効果をもたらすことを確認します。