JavaScript のカバレッジレポートは、観測期間中に実行されたコードを示します。初期表示で実行されなかったコードも、メニュー、購入手続き、別のルートで必要になる場合があります。レポートから調査対象を選び、バンドルを変更する前に関連する操作を確認しましょう。
リソースと条件から始める
調べたいページで Milten JS Scanner を実行します。URL、日時、選択した条件を結果とともに保存してください。スキャナーはクリックやスクロールをせず、1 回のページ読み込みを観測します。スクリプトの読み込み、カバレッジ、JavaScript エラーを報告しますが、そのファイルがサイト全体で不要であることまでは証明しません。
ファイルの読み込みデータとコードの実行データを比較します。転送量が多いこと、実行時間が長いこと、未実行の割合が高いことは、それぞれ異なる観測結果です。ダウンロードが速くても、実行でメインスレッドを長く占有することがあります。読み込まれなかったファイルについては、その試行の実行データを評価できません。
購入手続きを例に考える
app.js にランディングページと購入手続きのコードが含まれているとします。ランディングページを開いただけでは、購入手続きの関数は実行されません。これは説明用の例であり、顧客サイトでの測定結果ではありません。
リソースの URL と読み込み方法を調べます。購入手続きに進み、メニューを操作し、同じバンドルを使う別のページも確認してください。検証した操作を記録します。Chrome DevTools Coverage では、ページを操作している間も記録を続けられます。初期表示だけのスキャンとは、観測する範囲が異なります。
購入手続きに必要なコードを削除すれば、その機能が壊れてしまいます。購入手続きに進んだ時点で読み込む方法は、検討の対象になります。採用するかどうかは、アプリケーションの構成と次の操作への影響を見て判断します。
ソース マップが利用可能な場合はそれを使用する
ソースマップは、生成されたバンドルと元のモジュールを対応付けます。Milten のモジュール表示には、スキャナーが読み取れる、対応形式の有効なソースマップが必要です。マップがなければ、その部分のレポートは不完全になります。リソースやエラーの情報は、引き続き問題の絞り込みに使えます。
利用できるマップがない場合は、リソースのインポート経路とビルド出力を調べます。モジュール表示がないことを、すべてのコードが実行された証拠とみなさないでください。MDN のソースマップガイド は、生成コードと元のコードの関係を説明しています。
変更を一つ加え、関連する操作を検証する
利用頻度の低い機能の分離や、必須ではない外部連携の遅延読み込みなど、効果を検証できる改善候補を選びます。比較しやすい小さな変更にとどめてください。必要な機能が動くこと、新しいコンソールエラーが出ないこと、想定したファイルが読み込まれることを確認します。
読み込みの結果は Speed Scanner、遅い操作は INP Scanner で調べます。起動時の TBT や長いタスクは、実際の訪問から得られる INP と同じ指標ではありません。遷移を繰り返すとオブジェクトが蓄積する場合は、Memory Leaks を使い、報告された経路を再現します。
同じ条件で結果を比較する
同じデバイス、ネットワーク、キャッシュ条件で同じ URL を繰り返します。両方のレポートを保存し、手動でテストしたインタラクションを記録します。コード変更を公開した後、実稼働ビルドを検証します。開発バンドルは異なる動作をする可能性があります。
未実行のバイトをすべて削除できますか?
いいえ。結果が示すのは観測期間中の状態であり、アプリケーションのすべての状態ではありません。削除前に、関連する操作と同じバンドルを使うルートを検証してください。
バンドルが小さいほど、ページの高速化が保証されますか?
保証されません。読み込み順序、サーバー応答、コードの実行、その後の操作も影響します。ファイルサイズだけでなく、一連の操作も比較してください。
ページの JavaScript を分析する。読み込みをより広く考えるには、サイトの速度と SEO も参照してください。
