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)

記事をシェアする:

コメントを残す

メールアドレスが公開されることはありません。

Protected by reCAPTCHA