scriptタグとは？defer/async最適化の基本について解説
ページ速度と安定性に直結するscriptタグの基礎
scriptタグはJavaScriptを外部・インラインで読み込み、実行順や場所により描画へ大きく影響します。基本は外部化し、deferやasyncでブロッキングを避けます。まずは レンダリングブロックの回避 を前提に、依存関係と実行タイミングを整理します。
scriptタグの定義（意味としくみ）
標準の使い方は<script src="app.js" defer></script>などで外部スクリプトを読み込みます。deferはHTML解析と並行で取得し、DOM構築後に順序を保って実行します。asyncは取得完了次第に実行し、順序は保証されません。type="module"はES Modulesを有効化し、デフォルトで遅延実行かつスコープがモジュールに限定されます。
実務での論点（配置・使い分け・落とし穴）
依存のない計測などはasync、DOM依存や複数間の順序が必要ならdeferが適します。モジュール化できる箇所はtype="module"で分割し、旧環境にはnomoduleを併記します。CSP運用ではインラインを避け、nonceまたはhashを使用します。重要なCDN資産はintegrityとcrossoriginで改ざん検知を加えます。判断に迷う場面では defer/asyncの使い分け を最優先で整理します。
- 基本は外部化＋
defer、計測系のみasyncを検討 - モジュールは
type="module"＋旧環境へnomodule併用 - 依存順序があるライブラリは
deferで順序保証 - インラインは極力避け、CSPの
nonceやhashで管理 - CDNは
integrity＋crossoriginでSRIを有効化
比較・使い分け表
| 方式 | 意味 | 用途 |
|---|---|---|
| 通常（属性なし） | 取得・実行でパースを停止 | 基本的に非推奨。小規模デモ等のみ |
| async | 並行取得・到着次第に即実行（順序不定） | 解析に非依存な計測・広告タグ |
| defer | 並行取得・DOM完成後に順序通り実行 | DOM依存スクリプト、複数ライブラリ |
| type=”module” | ESMとして遅延実行・厳格スコープ | モジュール化・ツリーシェイク前提の開発 |
| inline | HTML内に直接記述（CSPで制約） | 最小限のブートコードのみ検討 |
運用上の注意（SEO・パフォーマンス・安全性）
script自体は直接の順位要因ではありませんが、ブロックによりLCPやINPが悪化します。非同期化とコード分割で遅延を抑え、実行は必要ページだけに限定します。CSPで第三者スクリプトを制御し、SRIで改ざんを検知します。モジュール化ではポリフィルの配布範囲を最小にし、type=”module”戦略 を計画的に導入します。
よくある質問（FAQ）
asyncとdeferはどちらを選ぶべきですか？
順序やDOM依存があるならdefer、単独で動く計測系などはasyncが適します。迷ったらまずdeferを基準に設計します。
type=”module”への移行メリットは？
依存を明示でき、ツリーシェイクや遅延読み込みが容易になります。スコープ汚染も避けられ、パフォーマンス最適化と保守性が向上します。
SRI（integrity）は必須ですか？
CDN等の第三者提供スクリプトには推奨です。改ざん検知ができ、セキュリティ品質を底上げできます。自社ホストでも重要資産は検討します。
フッター直前に置けばdeferは不要ですか？
配置だけではネットワークの同時取得ができません。並行取得と順序保証を両立するため、基本はdeferを付ける方が安定します。
scriptタグのまとめ
scriptタグは「どこで・どう読み込み・いつ実行するか」で体験が大きく変わります。外部化を基本にdefer/asyncを適切に選び、type="module"とSRI/CSPで安全かつ高速に運用します。依存関係と実行順を整理し、計測で継続的に最適化しましょう。
