---
title: "async・deferとは？scriptの読み込みタイミングの違い"
description: "scriptタグにasyncかdeferを追加すると表示が速くなる場合があります。どちらの属性がHTMLの解析をブロックせずにJavaScriptを読み込むのか、タイミングの違いと使い分けの基準を実例で整理します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-async-defer"
markdown: "https://giga-site.com/articles/what-is-async-defer/index.md"
category: "用語解説"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# async・deferとは？scriptの読み込みタイミングの違い

scriptタグにasyncやdeferを付けると、ページの表示が速くなると聞いたことがあるかもしれません。これらはJavaScriptの読み込みと実行のタイミングを変える属性です。この記事では、両者の違いとどちらを使うべきかを、具体的な動きに沿って説明します。

> Source HTML: https://giga-site.com/articles/what-is-async-defer
> Article index: https://giga-site.com/articles/index.md

## なぜscriptの読み込み方が問題になるのか

ブラウザはHTMLを上から順に読みながらページを組み立てます。途中で何も指定のないscriptタグに出会うと、ブラウザはいったんHTMLの解析を止めて、そのJavaScriptをダウンロードして実行し終えるまで待ちます。

この間、ページの組み立てが止まるため、scriptが重いほど表示が遅れます。とくにHTMLの先頭付近に大きなscriptを置くと、本文が出るまで真っ白な時間が長くなりがちです。これを避けるための仕組みがasyncとdeferです。

## deferは「解析を止めず、最後にまとめて実行」

deferを付けたscriptは、ダウンロード自体はHTML解析と並行して進みますが、実行はHTMLの解析がすべて終わってから行われます。つまりページの組み立てを邪魔しません。

さらにdeferを付けた複数のscriptは、書かれた順番どおりに実行されます。あるscriptが別のscriptに依存している場合でも順序が守られるため、扱いやすいのが特徴です。

## 実務ではどこで関係する？

async defer 違いは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

async・deferとは？scriptの読み込みタイミングについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

- 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
- 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
- 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
- 運用の話: 期限、差し替え、削除、共有メッセージまで決める

## asyncは「準備でき次第すぐ実行」

asyncを付けたscriptも、ダウンロードはHTML解析と並行して進みます。違うのは実行のタイミングで、ダウンロードが終わった瞬間にHTML解析を一時的に止めて実行します。

そのため実行の順番は読み込みの速さ次第で前後し、書いた順番どおりには動きません。他のscriptに依存しない、独立した処理に向いています。

## 使い分けの基準

どちらを使うか迷ったときは、scriptの性質と依存関係で判断します。次のような目安で選ぶと失敗が少なくなります。

1. 他のscriptやDOMに依存する処理はdeferを選ぶ
2. 順番どおり実行したい複数scriptはdeferでそろえる
3. アクセス解析など独立して動く処理はasyncを検討する
4. どちらか迷ったらまずdeferを使う
5. scriptはなるべくbodyの末尾近くに置くことも合わせて意識する

## 属性を付けないとどうなるか

asyncもdeferも付けない素のscriptは、出会った時点でHTML解析を止め、その場でダウンロードして実行します。これがもっとも表示をブロックしやすい形です。

昔ながらの書き方ではbodyの一番下にscriptを置くことで影響を減らしていました。今でも有効な手ですが、headに置きたい場合はdeferを使うと、見た目はheadにありながら解析を止めずに済みます。

## 読み込みの工夫が体感速度を変える

asyncとdeferは小さな属性ですが、付けるだけで本文が出るまでの時間が短くなり、ユーザーの体感が大きく変わります。表示速度を気にするなら最初に押さえたいポイントです。

変更前後で表示の速さがどう違うかをチームに見比べてもらいたいときは、ギガサイト便のような一時URLで両方のページを共有すると、同じURLのまま中身を差し替えながら確認してもらえます。

## よくある質問

### asyncとdeferはどちらを使えばよいですか？

迷ったらdeferが無難です。解析を止めず、書いた順番どおりに実行され、DOMの準備が整ってから動くため、依存関係のある処理でも安全に使えます。

### asyncが向いているのはどんなときですか？

他のscriptやDOMに依存しない、独立して動く処理です。アクセス解析のタグなど、実行順がどうでもよいものに向いています。

### 属性を付けないscriptは何が問題ですか？

出会った時点でHTMLの解析を止めて実行するため、ページの表示が遅れます。とくに先頭付近に重いscriptを置くと、本文が出るまでの待ち時間が長くなります。

### deferを付けたscriptの実行順は保証されますか？

はい。deferを付けた複数のscriptは、HTMLに書いた順番どおりに実行されます。依存関係のある処理をまとめて扱うときに便利です。

### 実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？

細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。

## 関連記事

- [レンダリングブロックとは？表示を止めるCSS/JSの話](https://giga-site.com/articles/what-is-render-blocking/index.md)
- [DNSとは？ドメインとサーバーをつなぐ仕組みをやさしく解説](https://giga-site.com/articles/what-is-dns/index.md)
- [ドメインとは？URLの住所をやさしく解説](https://giga-site.com/articles/what-is-domain/index.md)
- [URLの構造とは？スキーム・ホスト・パスの意味を解説](https://giga-site.com/articles/what-is-url-structure/index.md)
- [HTTPステータスコードとは？主要な番号の意味](https://giga-site.com/articles/what-is-http-status-code/index.md)
- [404エラーとは？ページが見つからない原因と仕組み](https://giga-site.com/articles/what-is-404/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "async・deferとは？scriptの読み込みタイミングの違い",
  "description": "scriptタグにasyncかdeferを追加すると表示が速くなる場合があります。どちらの属性がHTMLの解析をブロックせずにJavaScriptを読み込むのか、タイミングの違いと使い分けの基準を実例で整理します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/what-is-async-defer",
  "url": "https://giga-site.com/articles/what-is-async-defer",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "asyncとdeferはどちらを使えばよいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "迷ったらdeferが無難です。解析を止めず、書いた順番どおりに実行され、DOMの準備が整ってから動くため、依存関係のある処理でも安全に使えます。"
      }
    },
    {
      "@type": "Question",
      "name": "asyncが向いているのはどんなときですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "他のscriptやDOMに依存しない、独立して動く処理です。アクセス解析のタグなど、実行順がどうでもよいものに向いています。"
      }
    },
    {
      "@type": "Question",
      "name": "属性を付けないscriptは何が問題ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "出会った時点でHTMLの解析を止めて実行するため、ページの表示が遅れます。とくに先頭付近に重いscriptを置くと、本文が出るまでの待ち時間が長くなります。"
      }
    },
    {
      "@type": "Question",
      "name": "deferを付けたscriptの実行順は保証されますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "はい。deferを付けた複数のscriptは、HTMLに書いた順番どおりに実行されます。依存関係のある処理をまとめて扱うときに便利です。"
      }
    },
    {
      "@type": "Question",
      "name": "実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。"
      }
    }
  ]
}
```