Lighthouse は、サイトの品質改善に役立つ自動化ツールです。URL を指定すると、ページ パフォーマンスの改善方法、ページのアクセシビリティの改善方法、ベスト プラクティスの遵守方法などの推奨事項のリストが提供されます。これは、Chrome DevTools 内から Chrome 拡張機能として実行できます。また、継続的インテグレーションに役立つノード モジュールとして実行することもできます。
Lighthouse では以前から、テキスト圧縮の有効化やレンダリング ブロック スクリプトの削減など、ページ読み込みのパフォーマンスを向上させるためのさまざまなヒントを提供してきました。Lighthouse チームは、サイトの高速化に役立つさらに有益なアドバイスを提供するため、継続的に新しい監査を実施しています。この投稿では、あなたが気づかないかもしれない、次のような有用なパフォーマンス監査をまとめています。
- メインスレッドの処理の詳細
- キーのプリロード リクエスト
- JavaScript の起動時間が長い
- ページのリダイレクトの回避
- 使用されていない JavaScript
- 静的アセットに非効率なキャッシュ ポリシーを使用する
- どの出発地と複数回の往復で費用のかかる移動を避ける
- アニメーション コンテンツに動画形式を使用する
- ウェブフォントの読み込み中もすべてのテキストが表示されたまま
- 圧縮されていない CSS と JavaScript
- 使用されていない CSS ルール
メインスレッドの処理の詳細
DevTools のパフォーマンス パネルを使ったことがある方は、ページの読み込みに CPU 時間が費やされた場所の内訳を確認するのが面倒な場合があることはご存じでしょう。この情報は、新しい「メインスレッド処理の内訳」監査を通じて、すばやく簡単に確認できるようになりました。
この新しい診断では、ページの読み込み時に発生するアクティビティの量と種類を評価します。これにより、レイアウト、スクリプトの評価、解析などのアクティビティに関連する読み込みパフォーマンスの問題に対処することができます。
キーのプリロード リクエスト
ブラウザは、リソースを取得する際に、ドキュメントとそのサブリソース内でそのリソースへの参照を見つけます。一部の重要なリソースはページ読み込みプロセスの終盤に発見されるため、この方法は最適でない場合があります。幸いなことに、デベロッパーは rel=preload を使用することで、準拠しているブラウザに対し、どのリソースをできるだけ早く取得すべきかをヒントにすることができます。新しいキーのプリロード リクエスト監査では、デベロッパーは rel=preload によって早く読み込まれるようにするメリットがあるリソースを把握できます。
予期しない方法で読み込みパフォーマンスに影響する可能性があるため、rel=preload の有無にかかわらず、パフォーマンスの変化をテストして比較することが非常に重要です。たとえば、大きな画像をプリロードすると最初のレンダリングが遅くなる可能性がありますが、その代わり、プリロードされた画像がレイアウトで早く表示されます。結果に満足することを忘れないでください。
JavaScript の起動時間が長い
多くの JavaScript が読み込まれると、ブラウザがページを解析、コンパイル、実行する際に、ページが応答しなくなることがあります。サードパーティのスクリプトや広告は、スクリプト処理が過剰に発生し、強力なデバイスでも動作を停止させることがあります。新しい JavaScript の起動時間が長い監査では、ページの各スクリプトが消費した CPU 時間と、その URL を確認できます。
この監査を実施する際に、ネットワーク パネルでサードパーティのバッジを有効にして、リストをフィルタリングしてサードパーティのスクリプト リソースを特定することもできます。この監査で得られたデータにより、JavaScript の過剰なアクティビティの発生原因を突き止めることができます。これは、ページの読み込みが速くなり動作が遅くなる原因となります。アプリケーションに固有のスクリプトの場合は、コード分割やツリー シェイキングなどの手法を使用して、サイトの各ページの JavaScript の量を制限できます。
ページのリダイレクトを回避する
ブラウザが URL をリクエストすると、サーバーが 300 レベルのステータス コードを返すことがあります。これにより、ブラウザは別の URL にリダイレクトされます。リダイレクトは SEO と利便性の目的で必要ですが、リクエストのレイテンシを増大させます。これは特に、他の送信元にリダイレクトする場合に当てはまります。リダイレクトされると、DNS ルックアップや接続/TLS ネゴシエーションに余分な時間がかかる可能性があります。
サイトのランディング ページでのリダイレクトは望ましくありません。Lighthouse では、レイテンシを短縮し読み込みパフォーマンスを向上させるため、ページのリダイレクトの回避の監査が提供されるようになりました。これにより、ナビゲーションによってリダイレクトがトリガーされたときに通知されます。
なお、ページのアドレスバーの現在の URL が分析され、すべてのリダイレクトの解決が反映されるため、この監査は DevTools バージョンの Lighthouse ではトリガーするのが困難です。この監査は Node CLI に入力されることがよくあります
未使用の JavaScript
JavaScript を多用するアプリケーションでは、動作していないコードが深刻な問題になることがあります。呼び出されないため実行コストは発生しませんが、他の望ましくない影響も生じます。無効なコードは引き続き、ブラウザによってダウンロード、解析、コンパイルされます。これは読み込みパフォーマンスと JavaScript の起動時間に影響します。DevTools のカバレッジ パネルと同様に、[使用されていない JavaScript] の監査では、現在のページでダウンロードされた JavaScript が表示されますが、使用されることはありません。
この監査では、アプリケーション内の無効なコードを特定して削除することで、読み込みパフォーマンスを改善し、システム リソースの使用量を減らすことができます。上級者向けのヒント: Chrome の DevTools のコード カバレッジ パネルを使用して、この情報を確認することもできます。
静的アセットに非効率なキャッシュ ポリシーを使用
パフォーマンスに関する多くのアドバイスでは、新規ユーザーによるウェブサイトの速度を改善することに重点が置かれる傾向がありますが、リピーターの読み込みパフォーマンスを向上させるために、キャッシュを使用することも重要です。静的アセットで非効率なキャッシュ ポリシーを使用監査では、ネットワーク リソースのキャッシュ ヘッダーを検査し、静的リソースのキャッシュ ポリシーが標準を下回っている場合は通知します。
この監査を使用すると、現在のキャッシュ ポリシーの問題を簡単に見つけて修正できます。これによりリピーターのパフォーマンスが大幅に向上し、スピードも向上します。
どの出発地と複数回の往復で費用のかかる移動を回避
ブラウザがサーバーからリソースを取得する場合、DNS ルックアップを実行してサーバーへの接続を確立するのに時間がかかることがあります。rel=preconnect を使用すると、デベロッパーはブラウザがやむを得ず前に他のサーバーとの接続を確立することで、このレイテンシをマスクできます。「あらゆるオリジンへの複数回のラウンドトリップを避ける」監査は、rel=preconnect を使用する機会を見つけるのに役立ちます。
rel=preconnect に推奨されるオリジンのリスト。クロスオリジン アセットのレイテンシが短縮されると、ユーザーは物事の進行が少し速くなったことに気が付きます。この新しい Lighthouse の監査では、そのために rel=preconnect を使用する新たな機会が提供されます。
アニメーション コンテンツには動画形式を使用する
アニメーション GIF は巨大で、多くの場合、数メガバイトではないにしても、数百キロバイト以上を消費します。読み込みパフォーマンスが重要な場合は、これらの GIF を動画に変換することをおすすめします。幸いなことに、アニメーション コンテンツ用の動画フォーマットの使用の監査をご利用いただけます。
サイトに 100 KB を超える GIF がある場合、この監査では自動的にフラグが付けられ、動画に変換して埋め込む方法に関するガイダンスが表示されます。Imgur などのサイトは、GIF を動画に変換することで読み込みパフォーマンスを大幅に向上させています。また、サイトが帯域幅従量制のホスティング プランを利用している場合、コスト削減の可能性だけで十分です。
ウェブフォントの読み込み時にすべてのテキストがそのまま表示される
ページのウェブフォントを読み込む際、ブラウザではフォントが読み込まれるまで目に見えないテキストを表示することがよくあります。この現象は Flash of Invisible Text（FOIT）と呼ばれ、設計上好ましいかもしれませんが、実際には問題です。レンダリングがブロックされたテキストは、レンダリングされて表示されるまで読み取ることができません。レイテンシが高い接続や高帯域幅の接続では、ユーザー エクスペリエンスの重要な部分が欠けていることを意味します。また、ページが意味のあるコンテンツを高速でレンダリングしないという、知覚的パフォーマンスの問題になる可能性もあります。幸いなことに、「ウェブフォントの読み込み中にすべてのテキストが引き続き表示される」の監査では、サイトでこの問題を修正する機会を特定できます。
テキスト レンダリングを遅延させるウェブフォントがアプリに含まれていることが Lighthouse で検出された場合、いくつかの対処方法があります。テキスト レンダリングを制御するには、font-display CSS プロパティや Font Loading API を使用します。さらに詳しく知りたい場合は、Zach Leatherman による優れたガイドである A Comprehensive Guide to Font Loading Strategies をご覧ください。最適なフォント読み込みを行うための優れたリソースです。
圧縮されていない CSS と JavaScript
ウェブ パフォーマンスが問題であったことから、圧縮が推奨の手法でした。これにより、テキストベースのリソースのサイズが大幅に削減されるため、読み込みのパフォーマンスが向上します。ただし、この最適化は、特にビルドプロセスで自動的に処理されない場合、見落とされがちです。CSS の圧縮と Minify JavaScript の監査では、現在のページで検出された圧縮前のリソースのリストがまとめられます。そこから、これらのファイルを手動で圧縮するか、ビルドシステムを拡張して自動的に圧縮することができます。
未使用の CSS ルール
サイトの移行が長くなるにつれ、リファクタリングで残された粗悪な要素が積み上がっていくことは避けられません。そのような不正な CSS ルールの 1 つに、使用されていない CSS ルールがあります。これらのルールは、サイトの機能には必要でなくなったものの、帯域幅を消費します。[使用されていない CSS ルール] の監査を使用すると、ページ上のどの CSS リソースに使用されていない CSS が含まれているかを確認できます。
ページ内で使用されていない CSS が見つかった場合は、いくつかの方法で削除できます。 UnCSS は、この処理を自動的に行うユーティリティの 1 つです（ただし、慎重に使用する必要があります）。より手動での方法として、DevTools のコード カバレッジ パネルを使用します。ただし、あるページで使用されていない CSS が、別のページで必要になる可能性がある点に留意してください。また、CSS をテンプレート固有のファイルに分割し、必要な場合にのみ読み込むという方法もあります。どの方法を採用するにしても Lighthouse は CSS の処理能力が 低下しているかどうかを通知します
Lighthouse をぜひお試しください。
この新しい監査にご興味がある場合は、Lighthouse を更新してぜひお試しください。
- Lighthouse Chrome 拡張機能は自動的に更新されますが、
chrome://extensionsから手動で更新できます。 - DevTools の監査パネルで Lighthouse を実行します。Chrome は約 6 週間ごとに新しいバージョンに更新されるため、一部の新しい監査は利用できない場合があります。利用可能な最新の監査を試してみたい場合は、Chrome Canary をダウンロードして、最新の Chrome コードを実行できます。
- ノードユーザーの場合:
npm update lighthouseを実行します。Lighthouse をグローバルにインストールした場合はnpm update lighthouse -gを実行します。
貴重なフィードバックを提供してくれた Kayce Basques、Patrick Hulce、Addy Osmani、Vinamrata Singal に深く感謝します。この記事の品質は大幅に向上しました。