Google I/O 以来、Google は Lighthouse を優れたプログレッシブ ウェブアプリの構築に役立つツールにするための取り組みを続けています。
- プロジェクトに 50 人の新しいcontributorsが加わりました
- 15 個のリリースを発送済み
- 約 20 個の監査テストを追加(合計約 50 個)
このたび、Lighthouse の 1.3 リリースがリリースされたことをお知らせいたします。Lighthouse 1.3 には、多数の重要な新機能、監査、通常のバグ修正が含まれています。npm(npm i -g lighthouse
)からインストールするか、Chrome ウェブストアから拡張機能をダウンロードできます。
新機能
新しいデザイン
以前のバージョンの Lighthouse をお使いの場合、ロゴが新しくなったことにお気づきかもしれません。HTML レポートと Chrome 拡張機能も全面的に刷新され、スコアリングが見やすくなり、監査結果間の一貫性が向上しました。また、テストに失敗した場合に役立つデバッグ情報を追加し、推奨される回避策のポインタも追加しました。
新しいベスト プラクティス
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
を追加します。
Lighthouse の最新情報については、GitHub のリリースノート全体をご覧ください。いつものように、Google までご連絡いただき、バグを報告したり、機能リクエストを提出したり、次に考えたいことに関するアイデアをブレインストーミングしたりできます。