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 以上の新しいベスト プラクティスに関する提案が含まれています。

ウェブに関するおすすめの方法を改善します。

今後、最適化案をさらに追加していく予定です。ベスト プラクティスに関するご提案や、Google による監査作成のサポートを希望される場合は、GitHub で問題を報告してください。

レポート ビューア

最後に、Lighthouse の結果を確認できる新しいウェブビューアについてお知らせします。googlechrome.github.io/lighthouse/viewer にアクセスし、Lighthouse の実行結果をドラッグ&ドロップ(またはクリックしてファイルをアップロード)するだけで完了します。Lighthouse HTML レポートです

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

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

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

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

閲覧者のアーキテクチャ 2.
閲覧者のアーキテクチャ 2

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