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を使い分けましょう。
ご相談・お見積もりは無料です。まずはお気軽にご連絡ください。
act styleでは、デザイン性はもちろん、表示速度やSEO対策にも配慮したレスポンシブWebデザインを標準仕様として採用していますので、パソコン・スマートフォン・タブレットなど、さまざまな端末から快適に閲覧できるホームページを制作いたします。
「ホームページの新規制作」「ホームページのリニューアル」どちらのご要望にも対応可能です。ホームページ制作に関するご相談やご質問なども、お気軽にお問い合わせください。
「まだ制作するか決まっていない」「まずは話だけ聞いてみたい」という場合でも大丈夫です。しつこい営業は一切ありません。どうぞお気軽にご相談ください。
