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

CLI で使う

参考

lighthouse – npm

指標

  • 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

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

対処法

参考

Eliminate Render-Blocking Resources | web.dev

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

CLS (Cumulative Layout Shift)

参考

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

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

Cumulative Layout Shift (CLS) | web.dev

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

参考

lighthouse-viewer – GoogleChrome/lighthouse – GitHub

Lighthouse Report Viewer (googlechrome.github.io)

記事をシェアする:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です