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

記事をシェアする:

コメントを残す

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

Protected by reCAPTCHA