LighthouseによるWebサイト・Webアプリの性能チェック
Webサイト等を作る際、出来るだけ性能のいいサイトを作りたいと思うのは自然なことですが、では性能の良さとは何を指すのかというと具体的な良し悪しの指針というのはなかなかわかりにくのではないかと思います。
そういったWebサイトやWebアプリの良し悪しを数値としてわかりやすく示してくれる”Lighthouse“というツールを紹介したいと思います。
lighthouseはオープンソースで、以下のURLに公開されています。
https://github.com/GoogleChrome/lighthouse
LighthouseはGoogle Chromeの拡張機能としてインストールして用いることもnpmインストールしてコマンドラインから用いることも出来るのですが、今回はGoogle Chrome拡張機能で用いたいと思います。
Chrome Webストアにて「Lighthouse」と検索すると同名の拡張機能が見つかるので、「Chromeに追加」をクリックしてインストールします。
完了すると、Chromeの右上にlighthouseの名の通り灯台のアイコンが表示されます。これで準備完了です。
使い方はごくごく簡単で、性能を測りたいサイトに移動して、lighthouseのアイコンをクリックし、開いたメニューの「Generate report」のボタンをクリックするだけです。
クリックするとしばしの間測定され、完了次第結果画面が表示されます。
SEO対策など様々な観点から採点してくれるのですが、直感的にわかりやすいのは一番左の「Performance」の項目かなと思います。
ページ内の主なコンテンツのレンダリング速度(“First Meaningful Paint“)、ユーザーが完全に操作可能になるまでの速度(“Consistently Interactive“)など事細かに採点された後、”文章を圧縮したほうがいい””画像の表示方法を変えた方がいい”などよりパフォーマンスを上げるためのアドバイスも”Opportunities“の欄で教えてくれます。
サイト等を自分で制作する際、より良いパフォーマンスを目指すのであればLighthouseを使用してみてはいかがでしょうか。
