Lighthouse の使い方

Lighthouse

参考：

GoogleChrome/lighthouse: Auditing, performance metrics, and best practices for Progressive Web Apps – GitHub

概要

参考：

Lighthouse によるウェブアプリの監査 | Google Developers [公式]

使い方

参考：

はじめての Lighthouse／どんな指標があるのか調べてみた – Qiita

Lighthouse の計測結果を見ていく – Qiita

Chrome 拡張機能 Lighthouse でブログの SEO チェックをしたら大変なことになった件 | ワクワクして働くための生産性向上 Hacks

指標

• First Contentful Paint
• Speed Index
• Time to Interactive
• First Meaningful Paint
• First CPU Idle
• Estimated Input Latency

参考：

はじめての Lighthouse／どんな指標があるのか調べてみた – Qiita

Lighthouse Performance Scoring | web.dev

Largest Contentful Paint (LCP)

参考：

Largest Contentful Paint | web.dev

Largest Contentful Paint を最適化する | web.dev

累積レイアウトシフト数 (Cumulative Layout Shift / CLS)

参考：

CLS (Cumulative Layout Shift) を計測してみた！ | 株式会社アルタのごった煮ブログ

CLS (Cumulative Layout Shift) の改善 | 株式会社レクタス

Cumulative Layout Shift (CLS) | web.dev

Cumulative Layout Shift を最適化する | web.dev

Evolving the CLS Metric | web.dev

Evolving Cumulative Layout Shift in Web Tooling | web.dev

Time to Interactive

参考：

Time to Interactive | web.dev

First Input Delay を最適化する | web.dev

Total Blocking Time (TBT)

参考：

Total Blocking Time (TBT) | web.dev

パフォーマンス (Performance)

参考：

Chrome 86 に追加予定の Performance に関する Audits | ミツエーリンクス

アニメーション

参考：

Avoid non-composited animations | web.dev

core(non-composited-animations): add more actionable failure reasons by adamraine · Pull Request #11268 · GoogleChrome/lighthouse – GitHub

core: add unsupported css properties to non-composited-animations audit by adamraine · Pull Request #11246 · GoogleChrome/lighthouse – GitHub

Animations using WebAnimations reports “Unsupported CSS property” · Issue #11658 · GoogleChrome/lighthouse – GitHub

モバイル

参考：

Page Load is Not Fast Enough on Mobile Networks | web.dev

SEO

参考：

Document does not have a meta description | web.dev

Tap targets are not sized appropriately | web.dev

アクセシビリティ

参考：

Buttons do not have an accessible name | web.dev

Labels and text alternatives | web.dev

Links do not have a discernible name | web.dev

Form elements do not have associated labels | web.dev

[aria-*] attributes do not match their roles | web.dev

Background and foreground colors do not have a sufficient contrast ratio | web.dev

対処法

参考：

CSS の実装方法を少し改善するだけで、Web ページの読み込み・表示を最適化するテクニックのまとめ | コリス

Web ページの表示が早くなる！既存ページのクリティカル レンダリング パスを最適化するオンラインツール | コリス

Eliminate Render-Blocking Resources | web.dev

サイトに初回ペイントの遅延を引き起こすリソースを使用しない | Google Developers [Official]

CLI で使う (npm)

参考：

lighthouse – npm

Chrome 拡張

参考：

Lighthouse | Chrome ウェブストア [公式]

オンライン計測ツール

参考：

Measure | web.dev

web.dev

参考：

Google 激推しツール web.dev が便利すぎた！ – Qiita

Google の web.dev とは？最新機能をサイトに実装しよう！ | 大学院生になってみた

パブリッシャー広告監査 (Publisher Ads Audits)

参考：

Publisher Ads Audits for Lighthouse | Google Developers [Official]

Lighthouse によるパブリッシャー広告監査 概要 | Google Developers [公式]

Publisher Ads Audits for Lighlthouse で広告が発生させる大きなCLSを調べる | 海外 SEO 情報ブログ

Improve Site Speed With Publisher Ads Audits For Lighthouse | MonetizeMore

googleads/publisher-ads-lighthouse-plugin: Publisher Ads Audits for Lighthouse – GitHub

lighthouse-plugin-publisher-ads – npm

Lighthouse Viewer

参考：

viewer – GoogleChrome/lighthouse – GitHub

Lighthouse Report Viewer (googlechrome.github.io)