Lighthouse
参考:
目次
- 1 概要
- 2 使い方
- 3 指標
- 4 Largest Contentful Paint (LCP)
- 5 累積レイアウトシフト数 (Cumulative Layout Shift / CLS)
- 6 Time to Interactive
- 7 Total Blocking Time (TBT)
- 8 パフォーマンス (Performance)
- 9 アニメーション
- 10 モバイル
- 11 SEO
- 12 アクセシビリティ
- 13 対処法
- 14 CLI で使う (npm)
- 15 Chrome 拡張
- 16 オンライン計測ツール
- 17 web.dev
- 18 パブリッシャー広告監査 (Publisher Ads Audits)
- 19 Lighthouse Viewer
概要
参考:
Lighthouse によるウェブアプリの監査 | Google Developers [公式]
使い方
参考:
はじめての 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
参考:
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
モバイル
参考:
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)
参考:
Chrome 拡張
参考:
Lighthouse | Chrome ウェブストア [公式]
オンライン計測ツール
参考:
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
参考: