JavaScriptの遅延読み込みにdeferを使う方法【仕組みから注意点まで解説】

JavaScriptの読み込みでページ表示が遅くなる、deferとasyncの違いが分からない、scriptタグをどこに書くべきか迷う、という悩みは非常に多いです。
特に表示速度やCore Web Vitalsを意識する場面では、JavaScriptの遅延読み込みを正しく理解しておくことが重要です。

この記事では、deferの基本的な仕組みから、asyncとの違い、使いどころ、実装例、注意点までを体系的に整理します。
初心者にも分かりやすく、実務でもそのまま活かせる形で解説しますので、JavaScriptの読み込み最適化を正しく進めたい方はぜひ参考にしてください。

JavaScriptの遅延読み込みでdeferを使う基本

JavaScriptの遅延読み込みでdeferが注目される理由は、HTMLの解析を止めにくくしながら、スクリプトの実行順も保ちやすいためです。
通常、scriptタグに何も付けずに外部JavaScriptを読み込むと、ブラウザはHTMLの解析を一時停止し、スクリプトの取得と実行を優先します。これが繰り返されると、画面表示の開始が遅れやすくなります。

一方でdeferを付けると、HTMLの解析を続けながらスクリプトを並行して取得し、HTMLの解析完了後に実行します。
そのため、ページの初期表示を改善しやすく、複数のJavaScriptファイルを順番通りに動かしたいケースにも向いています。フロントエンド開発だけでなく、WordPressなどのCMS運用でも実践しやすい方法です。

deferとは何か

deferは、外部JavaScriptファイルを読み込むscriptタグに付与できる属性です。
役割は、スクリプトのダウンロードをHTML解析と並行して進めつつ、実行はHTMLの解析が完了してから行うことにあります。

つまり、読み込み自体は早めに始めながら、実行タイミングだけを後ろへずらすイメージです。
この挙動により、画面の構造を先に組み立てやすくなり、ユーザーがより早くページ内容を認識しやすくなります。見た目の表示速度とスクリプト実行の安定性を両立しやすい点が、deferの大きな利点です。

なぜ表示速度の改善につながるのか

表示速度が低下しやすい主な原因のひとつは、ブラウザのレンダリングをJavaScriptが妨げることです。
同期読み込みのscriptはHTML解析を止めるため、ファーストビューの表示開始が遅れやすくなります。

deferを使えば、ブラウザはHTMLを先に読み進められるため、主要なコンテンツの描画準備を進めやすくなります。
結果として、初期表示の体感速度が改善しやすく、パフォーマンス指標への好影響も期待できます。もちろん、JavaScriptの量が極端に多い場合はdeferだけで解決しませんが、まず取り組むべき基本施策として非常に有効です。

deferが向いているスクリプトの特徴

deferは、DOM構築後に動けば問題ないスクリプトに向いています。
たとえば、メニュー開閉、タブ切り替え、モーダル表示、バリデーション補助など、HTML要素を前提に動く処理では特に相性が良いです。

また、複数ファイルを順番通りに読み込みたい場合にも適しています。
ライブラリの後で自作スクリプトを動かしたい場面では、実行順が保たれるdeferが扱いやすいです。逆に、ページ解析完了前に即時実行したい処理や、インラインスクリプトとの依存関係が強い処理では、設計を慎重に確認する必要があります。

deferとasyncの違いを正しく理解する

JavaScriptの最適化で混同されやすいのがdeferとasyncです。どちらもHTML解析を止めにくくする目的で使われますが、実行タイミングと実行順序の扱いが大きく異なります。
この違いを理解しないまま設定すると、依存関係のあるスクリプトが想定外の順序で実行され、不具合の原因になります。

実務では、安易に全部asyncにするよりも、ページ内での役割に応じて使い分けることが重要です。
特に、ライブラリとその利用コードがある構成ではdeferの方が安全なことが多く、広告や独立した解析タグではasyncが適する場合があります。ここを整理しておくと、実装判断がかなり楽になります。

実行タイミングの違い

deferは、HTML解析と並行してダウンロードし、HTML解析が終わった後に実行されます。
一方、asyncはダウンロード完了後にすぐ実行されるため、その瞬間にHTML解析が一時停止する可能性があります。

この差は、DOM操作を伴うコードで特に重要です。
deferならページ要素が出そろった後に処理されやすいため、要素未生成によるエラーを避けやすくなります。asyncは読み込み完了の早いものから順次実行されるため、ページ構造や他スクリプトとの関係次第で不安定になりやすいです。

実行順序の違い

deferは、HTML上に書かれた順番で実行されます。
そのため、先にライブラリ、後にその利用コードという並びを保ちたい場面で非常に便利です。

一方のasyncは、ダウンロードが終わった順に実行されるため、記述順は保証されません。
たとえば、先に必要な共通処理より後続スクリプトが先に実行されると、未定義エラーの原因になります。依存関係があるならdefer、独立して動くならasync、と整理すると判断しやすいです。

使い分けを一覧で比較

このように、両者は似ているようで用途が明確に異なります。
読み込み最適化では、速さだけでなく安定性も重視することが重要です。

JavaScriptでdeferを使う正しい書き方と実装例

deferの仕組みを理解していても、実際の書き方や配置ルールを曖昧にしていると、期待した動作にならないことがあります。
特に重要なのは、deferは主に外部スクリプトで使う属性であり、記述場所や依存関係の整理が重要という点です。

また、近年の実装では単純に属性を付けるだけでなく、必要なスクリプトを本当に必要なページでだけ読み込む考え方も大切です。
ここでは、基本のHTML記述と、実務で意識したい設計ポイントを見ていきます。

基本的な記述方法

deferの基本形はとてもシンプルです。
scriptタグにsrc属性とdefer属性を付けるだけで利用できます。

この形にすると、ブラウザはHTMLを解析しながらapp.jsを取得し、解析完了後に実行します。
head内に置いてもbody末尾に置いても動きますが、設計意図が伝わりやすいよう、読み込み方針を統一しておくと保守性が上がります。

複数ファイルを読み込むときの考え方

複数のJavaScriptを使う場合、deferは記述順を守ってくれるため、依存関係を整理しやすいです。
たとえば、共通ライブラリを先に、その後で画面固有の処理を読み込む構成にすると安定しやすくなります。

ただし、順序が保たれるからといって、不要なファイルまで一括で増やすのは逆効果です。
ファイル数や総容量が大きいと、ダウンロード負荷や実行コストは残ります。読み込み順の最適化に加えて、不要なコード削減や分割も並行して進めることが大切です。

WordPressなどCMSで使う際の注意

CMSではテーマやプラグインが多くのJavaScriptを自動で読み込むことがあります。
そのため、単に後からscriptタグを書き換えるのではなく、どのスクリプトがどこで必要かを把握することが先決です。

特に管理画面用とフロント用のスクリプトが混在すると、表示速度にも保守性にも悪影響が出ます。
必要なページだけに限定して読み込み、DOM依存の処理はdeferで整えると、安定性と速度の両方を改善しやすくなります。既存テーマでは他のスクリプトとの依存関係確認も忘れないことが重要です。

deferを使うときの注意点とよくある失敗

deferは便利ですが、万能ではありません。
属性を付ければ必ず速くなり、必ず安全というわけではなく、実際にはスクリプトの役割やページ構成を見ながら判断する必要があります。

特に多い失敗は、インラインスクリプトとの関係を考えずにdefer化すること、そして依存順を十分に確認しないことです。
ここを誤ると、表示崩れやクリック不良、未定義エラーが起きることがあります。導入前に注意点を押さえておけば、トラブルをかなり防げます。

インラインスクリプトとの相性

deferは外部スクリプトで効果を発揮しますが、インラインスクリプトでは同じ意味になりません。
そのため、外部ファイルをdefer化したのに、直後のインラインコードがその機能を前提に動いていると、実行順が崩れてエラーになることがあります。

たとえば、外部ライブラリの読み込み直後に、そのライブラリを利用するインライン処理を書いている構成は要注意です。
この場合はコードを外部ファイルへ寄せる、DOMContentLoaded後に実行する、依存順を再設計するなどの対応が必要です。deferの導入では、ファイル単位ではなく処理全体の流れを見ることが大切です。

すべてのJavaScriptをdeferにしない方がよい理由

一見すると、全部deferにすればよさそうに見えますが、実際には適さないケースもあります。
たとえば、できるだけ早く取得したい独立した計測処理や、実行順に依存しない外部スクリプトは、別の読み込み戦略が適する場合があります。

また、deferでダウンロードしても、解析完了後に大量のスクリプトが一気に実行されれば、今度はメインスレッドの負荷が高まります。
つまり、問題は読み込み方法だけでなく、コード量と実行コストにもあります。重要なのは全部を一律に遅らせることではなく、必要な処理を必要なタイミングで動かす設計です。

導入前に確認したいチェックポイント

deferを安全に導入するには、事前に確認すべき点があります。
特に既存サイトでは、長年の改修で依存関係が複雑になっていることがあるため、見た目だけで判断しない方が安全です。

• 外部スクリプト同士に依存順があるか
• インラインコードが外部ファイルに依存していないか
• DOM生成前提の処理かどうか
• 不要なスクリプトを読み込んでいないか

これらを確認したうえで段階的に適用すると、不具合を抑えながら最適化できます。
速度改善は一度の変更で終わるものではなく、計測と見直しを繰り返すことが大切です。

まとめ

JavaScriptの遅延読み込みでdeferを使うと、HTML解析を止めにくくしながら、記述順を保ってスクリプトを実行しやすくなります。
そのため、表示速度の改善と安定した動作の両立を狙ううえで非常に有効です。

特に重要なのは、deferとasyncの違いを正しく理解し、ページ内の役割に応じて使い分けることです。
依存関係のあるJavaScriptにはdefer、独立した処理には別の選択肢も含めて検討すると、実装の失敗を減らせます。

また、最適化は属性を付けるだけで完了しません。
不要なスクリプトを減らし、読み込み対象を絞り、実行コストまで見直すことで、初めて効果が大きくなります。JavaScriptの読み込みで悩んでいるなら、まずはdeferを正しく理解し、段階的に導入していくことをおすすめします。