JavaScript のパフォーマンス
平均的なウェブサイトでダウンロードされるバイト数のうち、画像や動画がバイト単位で70％以上を占めているのに対し、JavaScript はパフォーマンスに与える悪影響が大きいと言われています。この記事では、スクリプトに起因するパフォーマンスの問題を紹介し、JavaScript をウェブパフォーマンスのために最適化するためのヒントとコツを紹介します。
| 前提条件: | 基本的なコンピューターリテラシー、 基本的なソフトウェアのインストール、 クライアント側のウェブ技術の基本的な知識 |
|---|---|
| 目標: | JavaScript がパフォーマンス最適化に与える影響について、また、JavaScript のファイルサイズだけがウェブパフォーマンスに与える影響ではないことを学ぶ。 |
画像や動画と同様に、パフォーマンスを向上させる最善の方法は、実際には必要でないものを除外することです。しかし、ダウンロードするすべてのバイトが同じ影響を与えるわけではありません。JavaScript のバイトは、ダウンロードし、解釈し、実行する必要があります。JavaScript はダウンロードのパフォーマンスに影響を与えます。そのダウンロードする際の影響を最小限にするためのヒントやトリックに応じたものを紹介します。しかし、JavaScript はメインスレッド、CPU、バッテリーを消費することもあります。そのため、UI が反応しなくなったり、ジャンキーに感じられたりすることがあります。それを処理するための概念も紹介します。
ダウンロードのインパクト
ウェブアプリケーションには、たくさんの JavaScript が含まれています。多くのアプリケーションは、JavaScript フレームワーク、または複数のフレームワークで構築され、さらにいくつかの依存関係があります。A/B テスト、トラッキングピクセル、地図や対応する機能など、サードパーティーのスクリプトや API が追加されることもよくあります。この JavaScript はすべてダウンロードする必要があります。いずれは。
パフォーマンスの最適化には、次のようなことを行う必要があります。
- 必要な JavaScript の量を縮小する。 複雑な JavaScript を必要とするいくつかの機能は、数行の JavaScript で実行することができます。他にもライブラリーを必要とする機能は開発者の使い勝手を向上させるかもしれませんが、その JavaScript はすべて必要なのでしょうか？もっと軽量なものや自前で開発できるものはないのでしょうか？ある機能は必要ないかもしれませんし、追加することで華やかさは増すかもしれませんが、性能の面でその機能のコストは見合うものでしょうか？
- 使用しないコードを削除する。
- JavaScript を小さなファイルに分割する。 JavaScript を重要な部分とそうでない部分にコード分割します。webpack のようなモジュールバンドルはコード分割に対応しています。
- これらの小さなファイルを最適化する。 Minification は、ファイルの文字数を縮小し、JavaScript のバイト数や重さを軽減します。Gzipping は、さらにファイルを圧縮するもので、Minification を行わない場合でも使用する必要があります。Brotli は Gzip に似ていて、一般的に Gzip の圧縮より優れています。
レンダリングの影響
ウェブアプリケーションには、たくさんの JavaScript が含まれています。多くのアプリケーションは、JavaScript フレームワーク、または複数のフレームワークで構築され、さらにいくつかの依存関係があります。A/B テスト、トラッキングピクセル、地図や対応する機能など、サードパーティーのスクリプトや API が追加されることもよくあります。