JavaScriptは、現代のWebサイトやWebアプリケーションに欠かせない技術です。メニューの開閉、フォームの検証、動的コンテンツの表示など、多くの機能がJavaScriptによって実現されています。

一方で、JavaScriptの量が増えすぎると、ページ表示が遅くなったり、ボタンを押しても反応が遅れたりすることがあります。

本記事では、JavaScriptの読み込みと実行を最適化するための基本的な方法を紹介します。

JavaScriptが重くなる主な原因

JavaScriptのパフォーマンスが低下する理由はいくつかあります。

代表的なものは次の通りです。

• 大きすぎるJavaScriptファイル

• 使用していないライブラリ

• ページ表示時に不要な処理

• 長時間実行されるタスク

• 重複したイベント処理

• 不要なDOM操作

こうした処理が積み重なると、ブラウザのメインスレッドが長時間占有され、ユーザー操作への反応が遅くなります。

1. deferとasyncを使い分ける

JavaScriptファイルを通常のscriptタグで読み込むと、HTMLの解析が一時的に停止する場合があります。

これを避けるために、deferやasyncを利用できます。

defer

deferを指定すると、HTMLを解析しながらJavaScriptをダウンロードし、HTML解析が完了した後に実行します。

ページ全体の構造に依存するJavaScriptでは、deferが使いやすい選択肢です。

async

asyncはJavaScriptのダウンロードが完了すると、その時点で実行されます。

他のスクリプトとの実行順序が重要でない処理に向いています。

分析ツールや一部の外部スクリプトなどで利用されることがあります。

2. 必要なコードだけを読み込む

すべてのページで同じJavaScriptファイルを読み込む必要はありません。

例えば、グラフ機能を特定のページでしか利用しない場合、そのライブラリをトップページでも読み込むのは効率的ではありません。

ページや機能ごとにコードを分割する「Code Splitting」を利用すると、初回読み込み時のファイルサイズを減らせます。

3. Lazy Loadingを活用する

JavaScriptも画像と同じように、必要になったタイミングで読み込むことができます。

例えば、

• モーダル画面

• チャート表示

• 動画プレーヤー

• 管理画面

• 高度な検索機能

などは、ユーザーが実際に利用するときだけ読み込む設計が可能です。

これにより、最初のページ表示を軽くできます。

4. 不要なライブラリを見直す

便利なライブラリを追加しているうちに、プロジェクト全体のJavaScriptサイズが大きくなることがあります。

定期的に依存関係を確認し、

• 実際に使用しているか

• より軽量な代替手段がないか

• ブラウザ標準機能で代替できないか

を見直すことが重要です。

単純な処理のために大きなライブラリを導入している場合は、ネイティブJavaScriptへ置き換えるだけでも効果があります。

5. Tree Shakingを利用する

Tree Shakingは、使用していないコードをビルド時に削除する仕組みです。

ES Modulesを利用し、ViteやWebpackなどのビルドツールを適切に設定すると、実際に使われている機能だけを最終的なバンドルへ含めることができます。

特に多機能なライブラリを利用している場合に効果的です。

6. 長い処理を分割する

一つのJavaScript処理が長時間続くと、その間ブラウザはユーザー操作へすぐに反応できません。

こうした長時間処理は「Long Task」と呼ばれます。

大量のデータ処理などを行う場合は、

• 処理を小さく分ける

• 必要に応じてWeb Workerを利用する

• ユーザー操作を優先する

といった方法を検討できます。

これはCore Web VitalsのINP改善にも関係する重要なポイントです。

DOM操作を減らす

JavaScriptから頻繁にDOMを書き換えると、ブラウザがレイアウトや描画を何度も再計算する可能性があります。

例えば、複数の要素を1件ずつ追加するより、まとめて更新した方が効率的な場合があります。

また、スクロールイベントなど高頻度で発生する処理では、不要なDOM更新を避けることが重要です。

イベント処理を最適化する

スクロールやリサイズなどのイベントは短時間に何度も発生します。

そのたびに重い処理を実行すると、ページの動きが不安定になることがあります。

DebounceやThrottleを利用して実行頻度を制御すると、ブラウザ負荷を減らすことができます。

キャッシュを活用する

JavaScriptファイルは適切なキャッシュ設定を行うことで、再訪問時のダウンロード量を減らせます。

ファイル名にハッシュ値を付ける方式を利用すると、長期間キャッシュを設定しながら、更新時には新しいファイルを確実に取得できます。

例えば、

app.a83f21.js

のようなファイル名です。

内容が変更されるとハッシュも変わるため、キャッシュ管理がしやすくなります。

実際のサービス運用で考えること

JLPHのように複数のページやインタラクティブな機能を持つデジタルプラットフォームでは、機能追加のたびにJavaScript量が増加しやすくなります。

そのため、単に新しい機能を実装するだけでなく、バンドルサイズや実行時間も継続的に確認することが重要です。

例えば、新しい機能を追加した際に「何KB増えたか」「初回表示へどの程度影響したか」を記録しておけば、パフォーマンスの悪化に早く気付くことができます。

測定に使えるツール

JavaScriptのパフォーマンス確認には、次のようなツールを利用できます。

• Chrome DevTools

• Lighthouse

• PageSpeed Insights

• Coverage

• Performance Panel

特にChrome DevToolsのCoverage機能では、読み込まれているものの使用されていないJavaScriptを確認できます。

まとめ

JavaScript最適化では、単にコードを短くするだけではなく、「最初に何を読み込む必要があるのか」を考えることが重要です。

deferやasync、Code Splitting、Lazy Loading、Tree Shakingなどを組み合わせることで、初回読み込みを軽くできます。

さらに、長時間処理やDOM操作を見直すことで、ユーザー操作への反応速度も改善できます。

機能追加と同時にパフォーマンスを測定し続けることが、軽快で使いやすいWebサービスを維持するための重要な習慣です。