Lighthouse 3.0がリリースされます!使い方と新しい調査項目を確認しておきましょう
SEO対策

Lighthouse 3.0がリリースされます!使い方と新しい調査項目を確認しておきましょう

mottox2
mottox2
2018/05/15 08:57

Webサイトのパフォーマンス計測ツールのLighthouseの3.0がリリースされます。より効果的に使っていくために変更点を確認しておきましょう。

まずはv3の利用方法についての確認です。

利用方法

リリースノートを読む限りNode(Module, CLI), Chrome Extension, Chrome DevToolsで利用出来るようになるということでしたが、2018/5/14時点ではNode経由で利用するのが良さそうです。

しばらく待てばChrome ExtensionやChrome DevToolsで使えるので待つというのも手です。

[追記] 2018/5/20にChrome Extensionでv3.0.0-alpha.2が使えることを確認しました。

CLIの利用方法 (推奨)

$ npm install -g lighthouse@next
$ lighthouse https://en.kobit.in –view

Node Moduleの利用方法

$ npm install lighthouse@next
$ npm install chrome-launcher
でパッケージのインストールを行います。

上のファイルをbabelでコンパイルしてnodeで実行すると以下のような出力が得られます。(コードはlighthouseのdocより)

変更内容

https://developers.google.com/web/updates/2018/05/lighthouse3 の翻訳に訳者の注釈を追記したものです。記事執筆時に利用したLighthouseは3.0.0-alpha.1です。

変更内容を確認していきましょう。

動作速度の向上

内部エンジンが新しくなり動作速度が向上しています。

新しいレポートUI

レポートUIが新しくなり、より把握しやすくなりました。

v2.9.3

v3.0.0-alpha.1

スコアの算出方法の変更

パフォーマンス監査の算出方法が変更されました。スコア50は上位25%、スコア100は上位2%を表します。スコアが低いうちはあげるのが簡単ですが、高スコアを取るのは難しくなっています。

出力形式の変更

CSVが出力できるようになり、JSON出力内容の変更が行われました。Migration Guide

新しい調査項目

おそらく多くの人が気になるのはどういった項目が評価されるのかということだと思うので一つずつ確認していきます。

First Contentful Paint

テキストや画像などのコンテンツが表示され始めるまでの時間を計測する項目です。

今までも計測項目にあったFirst Meaningful Paintは主要コンテンツが表示され始めた時という基準になっていました。詳細な仕様は Time to First Meaningful Paint: a layout-based approachで見ることが出来ます。

robots.txt is not valid

検索エンジンにクロールの拒否などを伝えるためのrobot.txtのバリデーションを行う項目です。

Use video formats for animated content

アニメGIFを動画ファイルに置き換えるように指示されます。
知らない方もいるかもしれませんが同じ動画をアニメgifとmp4などの動画フォーマットで保存するとアニメgifはファイルサイズが膨大になることが多いです。

Avoid multiple, costly round trips to any origin

reource hintsを使いDNSの問い合わせ(dns-prefetch)やTCPの接続(preconnect)を前もって行うべきドメインを表示する項目です。

変更された調査項目

First Interactive => First CPU Idle

First InteractiveよりFirst CPU Idleの方がニュアンスが近いということで変更されました。「メインスレッドが入力を受け付ける状態になった時間」という理解をしておけばいいと思います。アプリケーションにおける応答時間のモデルにあるRAILモデルのI(dle)に相当します。

Perceptual Speed Index => Speed Index

Perceptual Speed IndexはWebPageTestでもメトリックとなっているSpeed Indexに名称が変更になりました。

まとめ

変更点をまとめましたが、個人的に一番うれしいのは「動作速度の向上」でした。以前と比べると格段に早くなっているのでnpm経由でインストールして使ってみてください。

動作速度が向上したことで開発時のCI(継続的インテグレーション)に導入もしやすくなると思うので、より快適なWebを提供出来るように速度を向上する仕組みを取り入れていきたいところです。

わかるページ解析を

Google Analytics・Search Consoleから
わかりやすいPowerPoint・Excelレポートを生成

report
HOMEKOBITブログWEBマーケティングSEO対策Lighthouse 3.0がリリースされます!使い方と新しい調査項目を確認しておきましょう