Lighthouse

監査カテゴリ 機能
パフォーマンス (Performance) パフォーマンスを測定し、ページの読み込み速度を上げる
ユーザー補助 (Accessibility) すべてのユーザーがコンテンツにアクセスし、サイト内を効率的に移動できるかどうかを確認
ベスト プラクティス (Best practices) ウェブページのコードの健全性を改善
SEO ページが検索エンジンの結果ランキング向けに最適化されていることを確認
灯台  |  Lighthouse  |  Chrome for Developers

Performance

Largest Contentful Paint (LCP)

ページの読み込みを開始してから、画面上に最大のテキスト ブロックまたは画像要素が表示されるまでの時間を測定します。Largest Contentful Paint(LCP)  |  Articles  |  web.dev

Cumulative Layout Shift (CLS)

ページの読み込みを開始してから、そのライフサイクル状態が非表示に変更されるまでに発生するすべての予期しないレイアウトシフトの、累積スコアを測定します。Cumulative Layout Shift(CLS)  |  Articles  |  web.dev

Accessibility

Webアクセシビリティを検証できます。

リンクに識別可能な名前が指定されています (Links have a discernible name)

aria-label属性を付けることで対処できます。 Links must have discernible text | Axe Rules | Deque University | Deque Systems Using aria-label for link purpose - WCAG WG aria-label - ARIA | MDN

背景色と前景色には十分なコントラスト比があります (Background and foreground colors have a sufficient contrast ratio)

WCAGのレベルAAでは、

  • 小さい文字 … 4.5:1
  • 大きい文字 … 3:1

のように定められています。Understanding Success Criterion 1.4.3: Contrast (Minimum) | WAI | W3C

修正するにはElements must meet minimum color contrast ratio thresholdsでコントラスト比を算出し、[WCAG Standard]の[AA]がPassとなるように調整します。簡単にはForeground ColorとBackground Colorに現在の色を入力し、Lightness (明度) の値を変えます。