Google、LighthouseをChromeに統合。デベロッパーツールでPWAを検証可能に

[レベル: 上級]

Google Chrome 60 のデベロッパーツールに Lighthouse が統合されました。
Lighthouse は PWA や サイトのパフォーマンスを検証する Chrome 拡張です。

Chrome への組み込みは、今年5月の Google I/O で予告されていました。

Chrome 内蔵 Lighthouse で PWA チェック

Chrome のデベロッパーツールを開き、「Audits」タブを選択すると Lighthouse を起動できます。

デベロッパーツールの Lighthouse

「Perform an audit」ボタンをクリックし、検証をスタートします。
検証は次の4種類を選べます。

  • Progressive Web App
  • Performance
  • Best Practice
  • Accessibility

Lighthouse を実行

「Run audit」でスタートします。

Lighthouse を実行中

しばらく待つと、選択したチェック項目のスコアと詳細の結果が出てきます。

Lighthouse の実行結果

キャプチャはこのブログのトップページの結果です。

PWA はホームスクリーンくらいしか実装していないので、スコアは高くないですね。

パフォーマンスはそんなに悪くないと思っているのですが、54点です。
表示速度はそんなに遅いですかね?

アクセシビリティとベストプラクティスはまずまずでしょうか(ベストプラクティスは、HTTPS にしているかとかアプリケーションキャッシュや Web SQL DB を使っていないかなど、現代のブラウザのセキュリティやパフォーマンスを低下させる要素をチェックします)。

拡張機能を使うことなく、Chrome の中で PWA や パフォーマンスを検証できるようになったのは便利です。
利用してみてください(Chrome 60 へのアップデートをお忘れなく!)。