Lighthouse の 'reduce unused JavaScript' 警告を修正する方法

Lighthouse の 'reduce unused JavaScript' 警告とは？

Lighthouse の reduce unused JavaScript 警告とは？ Lighthouse は20KB以上の未使用バイトを含むスクリプトにフラグを立てます。

'reduce unused JavaScript' 警告は Lighthouse スコアに直接影響します。

未使用の JavaScript は Core Web Vitals の合格にも非常に重要です。未使用の JavaScript にはコストがかかります。ネットワークリソースを奪い合い、メインスレッドをブロックする可能性があります。これにより Core Web Vitals、特に Largest Contentful Paint（LCP）と Interaction to Next Paint（INP）が低下します。

未使用の JavaScript の原因は？

未使用の JavaScript にはさまざまな原因があります。一般的な原因は以下の通りです：

• CMS のプラグインが多すぎる。
• デッドコード。
• コーディングの質が低い。
• タグマネージャーへの無制限なアクセス
• 不要なインポート
  
• すぐに読み込まれたが、使用直前に読み込むべきだったコード。

'unused JavaScript' がページ速度に与える影響

未使用の JavaScript は Lighthouse の指標に直接影響します。ウェブページのレンダリングを不必要に複雑にし、高い Lighthouse スコアを達成することがほぼ不可能になります。ブラウザはページを画面に表示する前に、より多くの処理を行う必要があります。 

ただし、Lighthouse スコアは Core Web Vitals スコアではないことに注意してください。Core Web Vitals は CrUX データで測定されます。

未使用の JavaScript には2つの問題があります。

• まず、その JavaScript をダウンロードする必要があります。これらのスクリプトはネットワークリソースを奪い合います。これは Largest Contentful Paint（LCP）に大きな影響を与える可能性があります
• 次に、ブラウザはすべての JavaScript を実行する必要があります。ブラウザが JavaScript を実行している間、基本的に他の処理を停止し、ユーザー入力に応答したりページの解析を続行したりできなくなります。これは Largest Contentful Paint（LCP）と Interaction to Next Paint（INP）の両方に影響します

'unused JavaScript' の見つけ方

'unused JavaScript' を見つけるには、Lighthouse の監査結果を確認するか、「Chrome カバレッジツール」を使用して、すべての JavaScript ファイルとその未使用バイト数の完全なリストを取得できます。

ctrl-shift-i ショートカットで Chrome DevTools を開きます。次に ctr-shift-p ショートカットでコマンドメニューを開き、「coverage」と入力します。「Start instrumenting coverage and reload page」を選択します。これによりページがリロードされ、CSS または JavaScript コードを含むすべてのファイルの未使用バイト数が表示されます。

'reduce unused JavaScript' の修正方法

'reduce unused JavaScript' 警告を修正するには、まずその原因を特定する必要があります。Lighthouse は未使用バイトが多いスクリプトを表示します。一般的な原因は5つあります：

1. 不要または些細なプラグインを削除する。WordPress のようなプラグインベースの CMS を使用している場合、未使用コードをクリーンアップする最も簡単で効果的な方法は、不要なプラグインや簡単なコード変更で置き換えられるプラグイン（アナリティクスプラグイン、チャットプラグイン、ソーシャルシェアプラグインなど）を削除することです
   
2. デッドコードを削除する。デッドコードとは、現在のウェブサイトで使用されていないコードです。スペースと帯域幅を消費するだけです。ウェブサイトを運営している場合、少なくとも年に2回はデッドコード削除マラソンをスケジュールし、カスタムスクリプトを精査して不要なコードを削除することをお勧めします。
   
3. コーディングの質が低いスクリプトを書き直す。  コーディングの質が低いスクリプトは、不要なチェックやif/else文が多い傾向があります。それらのチェックは一度も使用されないかもしれませんし、特定のif/else条件は不要かもしれません。古いスクリプトが多い場合や、現在の JavaScript 開発者が以前の開発者よりも優秀な場合は、古いスクリプトを見直すことをお勧めします。
   
4. タグマネージャーをクリーンアップし、アクセスを制限する。タグマネージャーは未使用コードの一般的な発生源であり、特に技術に詳しくない部門がタグを追加できる場合はなおさらです。未使用のタグを削除し忘れることが多く、タグマネージャーが未使用 JavaScript の主な発生源になります。
5. 不要なインポートを削除する（NextJS、React、VUE など）。ほとんどの SPA 環境では、コンポーネント/関数のインポートが多すぎます。インポートを再確認し、未使用のコードを削除してください。 
6. ルートやコンポーネントを遅延読み込みする （NextJS、React、VUE など）。コンポーネントの遅延読み込みは、必要になった時点でのみインポートします。これにより、未使用コードを遅延読み込みするページでは 'reduce unused JavaScript' の Lighthouse 警告がすぐに解消されます。
7. 重要でないスクリプトの読み込みを遅延する。スクリプトが必要な場合（フォーム送信など）でも、すぐには必要ないことがあります。正直なところ、訪問者の98%はサインアップしません。そのため、ほとんどの場合これらのスクリプトは未使用です。ページ読み込み時ではなく、訪問者がフォームを操作した時にスクリプトを読み込む方が合理的です。

'reduce unused JavaScript' の回避策

すべての未使用 JavaScript の警告を修正できない場合もあります。その場合は、これらの未使用リソースの影響を最小限に抑えることを試みてください

- すべての JavaScript リソースをメインドメインから読み込む（新しいネットワーク接続を回避）
- フォントや LCP 画像要素などのより重要なリソースをプリロードする。
- できるだけ多くの JavaScript を遅延読み込みする
- 重要度の低い JavaScript をページの下部に配置する