HTMLツール

無料 HTMLスクリプト読み込み戦略ビルダー

normal、defer、async、type moduleの適切な読み込み戦略でscriptタグを生成します。

ツールを読み込み中...

HTMLスクリプト読み込み戦略ビルダーとは

スクリプトの読み込み方法は、ページのパフォーマンスとスクリプトの実行順序に影響します。通常のスクリプトはHTML解析をブロックします。deferは並行してダウンロードし、HTML解析後に実行します。asyncは並行してダウンロードし、準備ができ次第すぐに実行します。type='module'スクリプトはデフォルトでdeferされます。適切な戦略の選択は、スクリプトが重要か、他のスクリプトに依存するか、独立しているかによって異なります。

クイックアンサー

スクリプトの実行タイミングに基づいて読み込み戦略を選択します。完全なDOMが必要だが並行ダウンロードでよい場合はdefer、アナリティクスなどの独立したスクリプトにはasync、モダンなESモジュールコードにはtype='module'を使用します。

Last updated: 2026-05-25

制限事項

deferはスクリプトの実行順序を保持しますが、asyncは保持しません。スクリプトの順序が重要かどうかに基づいて選択してください。
asyncスクリプトはダウンロードが完了次第実行されるため、スクリプトが大きい場合にレンダリングをブロックする可能性があります。
type='module'スクリプトはデフォルトでdeferされるため、追加のdefer属性は必要ありません。

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

使い方

ユースケースに合ったスクリプトタイプを選択します。
スクリプトURLを入力します。
ツールが最適な読み込み属性を推奨します。
正しい属性を持つスクリプトタグをコピーします。

主な用途

ページ解析後に実行される遅延アプリケーションバンドルを追加する。
独立して読み込まれる非同期アナリティクススクリプトを含める。
ViteやAstroのエントリポイント用にモジュールスクリプトを設定する。

用途

使用例

例

asyncを使用したアナリティクススクリプト

アナリティクススクリプトはasyncを使用して、ページをブロックせずに読み込まれます。

例

deferを使用したアプリケーションバンドル

アプリケーションバンドルはdeferを使用して、HTML解析をブロックせずに実行順序を維持します。

よくあるミス

DOM要素や他のスクリプトに依存するスクリプトにasyncを使用する。
解析状態に関係なく即座に実行する必要があるスクリプトにdeferを使用する。
ESモジュールでないスクリプトにtype='module'を使用する。

検証

Chrome DevToolsのNetworkパネルを開き、Initiator列とWaterfall列を確認して、各スクリプトの読み込みと実行のタイミングを確認します。
Performanceパネルを使用して、異なる戦略でのページレンダリングとインタラクティブのタイミングをテストします。

比較

async vs defer vs type="module"

Aspect	async	defer	type="module"
Execution timing	Executes as soon as the script finishes downloading, before DOMContentLoaded	Executes after HTML parsing is complete, just before DOMContentLoaded	Executes after HTML parsing is complete, same as defer behavior
Script order guarantee	No. Scripts execute in the order they finish downloading.	Yes. Scripts execute in the order they appear in the HTML.	Yes. Scripts execute in the order they appear, same as defer.
Blocks HTML parsing	Does not block HTML parsing. Downloads in parallel.	Does not block HTML parsing. Downloads in parallel.	Does not block HTML parsing. Downloads in parallel.
Use cases	Independent scripts such as analytics, A/B testing, or social widgets	Scripts that need the full DOM such as app bundles that query or modify the page	Modern ES module code where import/export syntax is used
Default behavior without attribute	Without any attribute, the script blocks HTML parsing until it downloads and executes	N/A	type="module" scripts are deferred by default and do not need an explicit defer attribute

Async downloads in parallel and runs on completion. Defer downloads in parallel but waits for the HTML to finish parsing. Module scripts are deferred by default and support ES module dependency graphs.

FAQ

HTMLスクリプト読み込み戦略ビルダーのFAQ

deferとasyncの違いは何ですか？

deferは並行してダウンロードし、HTML解析が完了するのを待ってから実行し、スクリプトの順序を保持します。asyncは並行してダウンロードし、準備ができ次第すぐに実行し、順序は無視します。

type='module'にdeferは必要ですか？

いいえ。モジュールスクリプトはデフォルトでdeferされるため、明示的なdefer属性は必要ありません。

scriptタグはHTMLドキュメントのどこに配置すべきですか？

モダンなベストプラクティスは、scriptタグをheadにdeferまたはtype="module"とともに配置することです。どちらもHTML解析と並行してダウンロードし、DOMの準備ができた後に実行します。bodyの最後にスクリプトを配置することは、deferをサポートしない古いブラウザ向けの回避策でした。deferまたはmoduleを使用すれば、レンダリングをブロックせずにheadへのスクリプト配置がよりクリーンで保守しやすくなります。

deferはインラインスクリプトで動作しますか？

いいえ。defer属性はsrc属性を持つ外部スクリプトでのみ機能します。インラインスクリプトはHTML解析中に即座に実行されます。DOM準備後にインラインスクリプトを実行する必要がある場合は、DOMContentLoadedイベントリスナーを使用するか、スクリプトをbodyの最後に配置します。または、インラインスクリプトを外部ファイルに変換してdeferを使用します。