この記事では一部分を中心に解説しています。
全体像や関連知識もあわせて理解したい方は、以下の記事もぜひご覧ください。
JavaScriptを読み込むときに見かける「defer」や「async」。
違いがよくわからないまま使っていませんか？
これらはページの表示速度や動作に大きく影響する重要な属性です。
この記事では、deferとasyncの違いと使い分けを初心者の方にもわかりやすく解説します。
deferとasyncとは？
どちらも、JavaScriptの読み込み方法を制御するための属性です。
通常のscriptタグ
まずは基本の書き方です。
<script src="script.js"></script>
この場合、HTMLの読み込みが途中で止まり、JavaScriptが実行されます。
そのため、ページ表示が遅くなる原因になります。
deferとは
HTMLの読み込みと並行してJavaScriptを読み込み、HTMLの解析が終わった後に実行されます。
▼ 書き方（コピペOK）
<script src="script.js" defer></script>
特徴
- HTMLの読み込みを止めない
- 読み込み完了後に実行される
- 複数あっても順番通りに実行される
asyncとは
HTMLの読み込みと並行してJavaScriptを読み込み、準備ができ次第すぐに実行されます。
▼ 書き方（コピペOK）
<script src="script.js" async></script>
特徴
- HTMLの読み込みを止めない
- 読み込み完了次第すぐ実行
- 実行順序は保証されない
deferとasyncの違い
| defer | async | |
|---|---|---|
| 実行タイミング | HTML解析後 | 読み込み完了後すぐ |
| 実行順序 | 順番通り | バラバラ |
| 安定性 | 高い | 低い |
どちらを使うべき？
基本的には、以下のように使い分けます。
- defer：サイトのメイン処理（おすすめ）
- async：広告や解析タグなど
初心者におすすめの書き方
迷ったらdeferを使うのがおすすめです。
<script src="script.js" defer></script>
安定して動作し、トラブルも少なくなります。
まとめ
deferとasyncは、どちらもページ表示を高速化するための重要な機能です。
- defer：順番通りに安全に実行
- async：高速だが順番が不定
基本はdeferを使い、用途に応じてasyncを使い分けましょう。
表示速度改善のご相談・診断は無料です。
サイト表示速度は、SEO・ユーザー離脱率・CV率にも大きく影響します。
画像最適化・CSS/JS最適化・サーバー設定など、原因は多岐にわたります。
act styleでは、WordPressやEC-CUBEの表示速度改善にも対応しています。
「サイトが重い」と感じたら、まずはお気軽にご相談ください。
今回解説した内容に関連するテーマは、以下の記事でも詳しく解説しています。
理解を深めたい方は、あわせてご覧ください。
このテーマを正しく理解するための基礎知識
この記事の理解を深めるための補足情報です。
関連する重要なポイントや基礎知識を整理してまとめています。