JavaScript の読み込み時間を計測することは、ウェブサイトのパフォーマンスを最適化するために不可欠です。ページ読み込み遅延を削減することで、ボトルネックを特定し、ユーザーエクスペリエンスを向上させることができます。

JavaScript のロード タイムズのための主要なメートル

JavaScript のロード性能を定量化するために、いくつかのメトリックが使用されます。これらには、

  • []Time to Interactive (TTI):[]のページが完全にインタラクティブになる時刻。
  • [第一次コンテンツフルペイント(FCP):[) 最初のテキストまたは画像がレンダリングされるとき。
  • ロードタイム:]] 読み込み、実行するすべてのスクリプトの合計時間。
  • スクリプト実行時間:] 期間は JavaScript コードを実行しました。

負荷時間の計算

ブラウザ開発者コンソールやパフォーマンス API などのツールは、これらのメトリックを測定するのに役立ちます。例えば、ナビゲーションタイミング API は、異なるロードステージのタイムスタンプを提供し、次のような期間の計算を可能にします。

  • スクリプトロードの有効期間:]スクリプトリクエストからスクリプトの完了まで時間。
  • [] 実行期間:[] 読み込み後にJavaScriptを実行するために取られた時間。
  • ロード時間:] のネットワークと実行時間のSum。

最適化のヒント

JavaScript の読み込み時間の改善には、いくつかの戦略が含まれています。

  • [] スクリプトの最小化:[]] 不要な文字を削除することでファイルサイズを縮小します。
  • 防御ローディング:] 主コンテンツの後にスクリプトをロードして初期負荷を改善します。
  • []キャッシュ:]] 繰り返しダウンロードを避けるために、ローカルにスクリプトを保存します。
  • ]スプリットコード:[]]] 大きいスクリプトをより小さいチャンクに分割して読み込みが速くなります。