Lighthouse を使った優れたウェブの構築

Google I/O 以降、Google は Lighthouse を優れた プログレッシブ ウェブアプリの構築に役立つ優れたコンパニオンにするために、懸命に取り組んできました。

このたび、Lighthouse の 1.3 リリースを発表いたします。Lighthouse 1.3 には、多くの新機能、監査、通常のバグ修正が含まれています。npm(npm i -g lighthouse)からインストールするか、Chrome ウェブストアから拡張機能をダウンロードできます。

新機能

新しいデザイン

以前のバージョンの Lighthouse をご利用だった方は、ロゴが新しくなっていることに気づかれたかもしれません。HTML レポートと Chrome 拡張機能も完全に刷新され、スコアリングがよりわかりやすくなり、監査結果の整合性が向上しました。また、テストが失敗した場合に役立つデバッグ情報を追加し、推奨される回避策へのポインタも追加しました。

Lighthouse レポート

新しいベスト プラクティス

これまで Lighthouse は、パフォーマンス指標と PWA の品質に重点を置いてきました。ただし、このプロジェクトの包括的な目標は、すべてのウェブ開発のガイドブックを提供することです。これには、一般的なベスト プラクティス、パフォーマンスとユーザー補助に関するヒント、高品質なアプリの作成に関するエンドツーエンドのヘルプが含まれます。

「Do Better Web」は、デベロッパーがウェブを改善できるように支援する Lighthouse プロジェクトの一環です。つまり、ウェブ アプリケーションのモダナイゼーションと最適化を支援します。ウェブデベロッパーは、古い手法やアンチパターンを使用したり、既知のパフォーマンスの落とし穴に陥ったりすることがよくあります。たとえば、JS ベースのアニメーションは setInterval() ではなく requestAnimationFrame() で行う必要があることは広く知られています。ただし、デベロッパーが新しい API を認識していない場合、ウェブアプリが不必要に損なわれます。

Lighthouse 1.3 には、CSS と JavaScript の機能のモダナイゼーションに関するヒントから、「レンダリングをブロックするアセットの数を減らす」、「パッシブ イベント リスナーを使用してスクロールのパフォーマンスを改善する」などのパフォーマンスに関する推奨事項まで、20 以上の新しいベスト プラクティスの提案が含まれています。

ウェブのベスト プラクティスを実施する。

今後、さらに最適化案を追加していく予定です。ベスト プラクティスに関する提案がある場合や、監査の作成にご協力いただける場合は、GitHub で問題を報告してください。

レポート ビューア

最後に、Lighthouse の結果を表示する新しいウェブ ビューアを発表します。googlechrome.github.io/lighthouse/viewer にアクセスし、Lighthouse 実行の出力をドラッグ&ドロップするか、クリックしてファイルをアップロードします。「Insta」Lighthouse HTML レポート。

レポートの閲覧者。
レポート閲覧者

Lighthouse 閲覧者もレポートを他のユーザーと共有できます。共有アイコンをクリックすると、GitHub にログインします。レポートはアカウントにシークレット ギストとして保存されるため、共有したレポートを後で簡単に削除または更新できます。データ ストレージに GitHub を使用すると、バージョン管理も無料で利用できます。

ビューアーのアーキテクチャ。
閲覧者のアーキテクチャ

Lighthouse Viewer で既存のレポートを再読み込みするには、URL に ?gist=GIST_ID を追加します。

ビューア アーキテクチャ 2。
閲覧者アーキテクチャ 2

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