Lighthouse による 2017 年 1 月の更新内容

Brendan Kenny

Eric Bidelman

Lighthouse は、ウェブアプリの品質向上に役立つオープンソースの自動化ツールです。Chrome 拡張機能としてインストールすることも、Node コマンドライン ツールとして実行することもできます。Lighthouse に URL を入力すると、ページに対して一連のテストが実行され、ページのパフォーマンスと改善点を示すレポートが生成されます。

Lighthouse のロゴ

本日、Lighthouse の 1.5 リリースを発表いたしました。これは 128 の PR を擁する大規模なリリースです。Lighthouse 1.5 には、多数の重要な新機能、監査、通常のバグ修正が含まれています。npm（npm i -g lighthouse）からインストールするか、Chrome ウェブストアから拡張機能をダウンロードできます。

新しい監査

[CSS 使用状況の監査] には、ページ内で使用されていないスタイルルールの数と、それらを削除することによるコスト/時間の節約が表示されます。

最適化されたイメージの監査では、最適化されていないイメージと、その最適化にかかる費用/時間の節約が報告されます。

レスポンシブ画像の監査では、大きすぎる画像と、特定のデバイスに合わせて画像のサイズを正しく設定した場合の費用と時間の節約の可能性について報告します。

介入を伴う非推奨の API や機能をページで使用している場合、[非推奨と介入の監査] に Chrome からのコンソールの警告が表示されます。

変更を報告する

これまで見てきたように、表形式データの追加、無関係なヘルプテキストの非表示、データ操作が容易な新機能の追加により、レポートを見やすく整理しました。

エミュレーション設定

特定の Lighthouse の実行で使用されたスロットリングとエミュレーションの設定を忘れがちです。Lighthouse レポートに、レポートの作成に使用されたランタイム エミュレーション設定（長時間にわたる機能リクエスト）が含まれるようになりました。

より有用なトレースデータ

「First Meaningful Paint」や「Time to Interactive」などの Lighthouse の指標は、カスタム速度の測定値としてモックアウトされ、--save-assets フラグを使用して保存されたトレースデータに挿入されます。

これで、--save-assets フラグを使用すると、トレースを DevTools にドロップするか、DevTools タイムライン ビューアで開くことができます。ページ読み込みの完全なトレースとともに主要な指標を確認できます。

Lighthouse 閲覧者

HTML レポートには、レポートをさまざまな形式でエクスポートするオプションを含む新しいボタンが表示されます。その 1 つが [ビューアで開く] です。このボタンをクリックすると、レポートがオンライン ビューアに送信され、レポートをさらに GitHub ユーザーと共有できます。

バックグラウンドで、閲覧者は OAuth を介して GitHub Secret gist を作成する権限を取得し、そこにレポートを保存します。Gist で行われるので、レポートの共有を完全に制御でき、いつでも削除できます。閲覧者の権限は、GitHub の設定で gist を作成できます。

パフォーマンス テスト

パフォーマンス テスト プロジェクトの最初のバージョンが 1.5.0 でリリースされました。これにより、ページ読み込みのパフォーマンスをテストし、開発中にクリティカル パス内のアセットをブロックまたは遅延した場合の影響をインタラクティブにテストできます。

Lighthouse を --interactive フラグ付きで実行すると、コストの高いページリソースをインタラクティブに選択できる特別なレポートが生成されます。その後、テストサーバーはそのページで Lighthouse を再実行し、これらのリソースをブロックします。

詳しくは、Lighthouse でのパフォーマンス テストに関する記事をご覧ください。

新しいドキュメント

最後に、developers.google.com/web/tools/lighthouse/ のドキュメントをモダナイズし、新しい監査リファレンスを追加しました。

以上です。

Lighthouse の最新情報については、GitHub のリリースノート全体をご覧ください。いつものように、Google までご連絡いただき、バグを報告したり、機能リクエストを提出したり、次に考えたいことに関するアイデアをブレインストーミングしたりできます。