このページは Cloud Translation API によって翻訳されました。

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 レポートに、レポートの作成に使用されたランタイムエミュレーション設定が含まれるようになりました。これは、長い間要望されていた機能です。

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

Lighthouse の指標（「First Meaningful Paint」、「Time to Interactive」など）は、ユーザータイミングの測定値としてモックされ、--save-assets フラグで保存されたトレースデータに挿入されます。

--save-assets フラグを使用すると、トレース情報を DevTools にドロップしたり、DevTools Timeline Viewer で開いたりできるようになりました。ページ読み込みの完全なトレースのコンテキストで、主要な指標を確認できます。

Lighthouse 閲覧者

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

裏側では、閲覧者が OAuth 経由で GitHub のシークレットギスティングを作成する権限を取得し、そこにレポートを保存します。作成した Gist は、レポートの共有を完全に管理でき、いつでも削除できます。閲覧者が gist を作成する権限は、GitHub の設定で取り消すことができます。

パフォーマンステスト

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

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

Lighthouse のパフォーマンステストの詳細

新しいドキュメント

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

以上です。

Lighthouse の最新情報については、GitHub のリリースノートをご覧ください。いつもどおり、バグを報告したり、機能のリクエストを送信したり、次に追加してほしい機能についてアイデアをブレインストーミングしたりするには、お問い合わせください。