判断基準と適用範囲
JavaScriptの最適化は、不要なスクリプトの処理を減らし、ページが必須のコンテンツと操作を、すばやく確実に提供できるようにします。JavaScriptの処理は、デバイスのメインスレッドを取り合います。最適化とは、最初に役立つページに必要のない処理を、減らす、後回しにする、分割することです。そのうえで、必須の操作とアクセスしやすいコンテンツは使える状態に保ちます。
確認方法
代表的なルートを1つ選び、リクエストのウォーターフォール、レンダリング後の出力、長いタスク、サードパーティの影響を確認します。性能を制限したモバイルのプロファイルでも繰り返し、サイズの大きなダウンロードファイルと、実際に操作をブロックするスクリプトを区別します。
実務の進め方
ローダーを追加する前に、使っていない依存関係を取り除きます。そのうえで、重要でない機能を遅延させ、ルート固有の機能をコード分割します。変更のきっかけとなった実際の操作を、意味がある場合はJavaScriptの有効時と無効時の両方でテストします。
よくある誤りと測定の限界
バンドルサイズの削減は、それだけではユーザーにとっての成果ではありません。処理がハイドレーション、ネットワークのレイテンシ、別のルートに移るだけのこともあります。変更のたびに、レンダリング、操作、エラー、アクセシビリティを確認してください。よくある失敗は、バンドルをminifyしただけで、レンダリング、サーバーの応答、画像の問題が解決したと思い込むことです。
FAQ
JavaScriptの最適化とは何ですか？
JavaScriptの最適化は、不要なスクリプトの処理を減らし、ページが必須のコンテンツと操作を、すばやく確実に提供できるようにします。
JavaScriptの最適化はどう確認しますか？
レンダリング後の出力、リクエストのウォーターフォール、メインスレッドの処理、サードパーティのスクリプト、JavaScriptなしの境界を確認します。そのうえで、情報源、日付、設定、不足している根拠を記録します。
最大の制約は何ですか？
1回の観察を保証と混同しないでください。よくある誤りは、バンドルをminifyしただけで、レンダリング、サーバーの応答、画像の問題が解決したと思い込むことです。