DevTools の使い方を可能な限りスクショ付きで解説してみる

ARANK

以下の公開計測会でやったものを個別に解説してみる。 これを御社のサイトで解説する仕事をやっています。 DevTools を開くF12 or 右クリックから「検証」 DevTools > Lighthouseこの状態で計測このとき、新しいプロファイルを作ったりして、可能な限り Chrome拡張が入ってない状態にすること。Chrome拡張による処理も計測に含まれてしまう。 Lighthouse レポートの読み方点数部分にマウスオーバーすると、内訳が見えるSee Calculator をクリックすると、Google側の現在のスコアの重みがわかるView Treemap で簡易なJSチャンクのサイズ比率と、実行された行のカバレッジが見える。 Lighthouse 計測環境の再現の仕方レポート末尾に設定がある。この状態に合わせると再現できる Lighthouse Dignosticsの読み方上からスコア影響が大きいものが並んでいる。Show audits relevant to ... で絞り込めるクリックすると詳細が見える。これはLCPがいつ確定したかのレポート（大事） 複数のLighthouseレポートを比較 DevTools > Performance読み込み時間を取りたい場合、 Record ではなく Record and Reload を押す。この時、CPUやNetwork を低速化して、Lighthouse計測環境に合わせる…