Carpe Diem

備忘録。https://github.com/jun06t

Webフロントのパフォーマンス診断

概要

Webフロントのパフォーマンスをチェックする診断ツールの紹介です。
なんだかもっさりした挙動だけどどこから手を付けたら良いか分からない、といった時に問題点を洗い出すのに便利です。

Audits

Chrome DevToolsに標準で付いています。
ページを開いた状態でRunを押すと以下のように診断してくれます。

f:id:quoll00:20170623002538p:plain

PageSpeed Insights

PageSpeed Insights

URLを入力して測ってもらうことができます。Auditsは英語でしたが、こちらは日本語で表示してくれます。
またモバイルとパソコン両方に対して診断してくれるので便利です。

f:id:quoll00:20170623003116p:plain

Lighthouse

Chromeの拡張機能として提供されています。
こちらのツールはパフォーマンスだけでなく、

といった点までチェックしてくれます。診断が完了するまで結構時間がかかります。

f:id:quoll00:20170623003716p:plain

ソース