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

指標

• FCP (First Contentful Paint)：視覚コンテンツの初期表示時間
• Speed Index
• LCP (Largest Contetful Paint)：最大視覚コンテンツの表示時間
• Time to Interactive
• TBT (Total Blocking Time)：合計ブロック時間
• CLP (Cumulative Layout Shift)：累積レイアウトシフト数

参考：

はじめての 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

CLS 指標の進化 | web.dev

Evolving Cumulative Layout Shift in Web Tooling | web.dev

Time to Interactive (TTI)

指標

• First Input Delay (FID)
• Total Blocking Time (TBT)：合計ブロック時間

参考：

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]

v8

v8 でパフォーマンス指標の計算式が見直され、CLS が重視されるようになった。

参考：

Lighthouse 8.0 の Performance スコアと CLS | ミツエーリンクス

Google PageSpeed Scores Updated with Lighthouse 8.0 | Search Engine Journal

v8.0 Performance FAQ – GitHub

CLI で使う (npm)

入手：

lighthouse – npm

Chrome 拡張

参考：

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

オンライン計測ツール

ツール：

Measure | web.dev

web.dev

→ Measure

参考：

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

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

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

ツール：

Publisher Ads Audits for Lighthouse | Google Developers [Official]

リポジトリ：

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

入手：

lighthouse-plugin-publisher-ads – npm

ドキュメント：

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

参考：

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

Improve Site Speed With Publisher Ads Audits For Lighthouse | MonetizeMore

翻訳

コード：

locales/ja.json – GitHub

shared/localization/locales – GitHub

オンラインツール

Lighthouse Scoring Calculator

FAQ

v8.0 Performance FAQ – GitHub

ドキュメント

docs – GitHub

HTML Report Renderer

リポジトリ：

report – GitHub

Lighthouse Viewer

ツール：

Lighthouse Report Viewer

リポジトリ：

viewer – GitHub

Stack Packs

リポジトリ：

GoogleChrome/lighthouse-stack-packs: Lighthouse Stack Packs – GitHub

ソースコード

• render：レポートを HTML 形式で表示する

コード：

byte-efficiency.js – GitHub

diagnostics.js – GitHub

stack-packs-test.js – GitHub

test-definitions – GitHub

core – GitHub

core/audits – GitHub

core/computed – GitHub

core/computed/metrics – GitHub

core/lib – GitHub

core/lib/tracehouse – GitHub

core/test/audits – GitHub

core/test/audits/accessibility – GitHub

core/test/audits/byte-efficiency – GitHub

core/test/audits/dobetterweb – GitHub

core/test/audits/metrics – GitHub

core/test/audits/seo – GitHub

core/test/lib – GitHub