【ITニュース解説】Async vs Defer: quando usare uno o l'altro?

Webサイトの表示速度が遅いと感じる主な原因の一つに、JavaScriptファイルの読み込み方法が挙げられる。ブラウザがWebページを画面に表示する際、HTMLファイルを上から順に読み解いていく。この処理をHTMLの解析（パース）と呼ぶ。通常、ブラウザはHTMLの解析中にJavaScriptを読み込むための<script>タグに遭遇すると、その場でHTMLの解析を一時停止する。そして、指定されたJavaScriptファイルをダウンロードし、実行し終えるまで解析を再開しない。この、処理を中断させる振る舞いを「ブロッキング」と呼ぶ。もしサイズが大きいJavaScriptファイルや、処理に時間のかかるスクリプトがページの初期段階で読み込まれると、後続のHTML解析が滞り、結果としてユーザーがページ全体を閲覧できるまでの時間が長くなってしまう。この表示遅延は、ユーザー体験を損なうだけでなく、GoogleがWebサイトの評価指標として用いるCore Web Vitalsにも悪影響を及ぼし、SEO（検索エンジン最適化）の観点からも不利になる可能性がある。しかし、この問題を解決し、ページの読み込みを高速化するための有効な手段が存在する。それが、<script>タグに付与できるdeferとasyncという二つの属性である。これらの属性を適切に使い分けることで、JavaScriptの読み込みによるページの表示遅延を大幅に改善できる。

まず、defer属性について説明する。<script>タグにdefer属性を追加すると、ブラウザはそのスクリプトファイルのダウンロードをすぐに開始するが、HTMLの解析を中断することはない。つまり、スクリプトのダウンロードとHTMLの解析が並行して進められる。そして、ブラウザがHTMLファイル全体の解析を完了した直後、ページの構造が完全に構築されたタイミングで、ダウンロードしておいたスクリプトを実行する。複数のスクリプトにdefer属性が指定されている場合、それらはHTMLに記述された順序通りに実行されることが保証される。この特性により、スクリプト間に依存関係がある場合、例えば、あるライブラリを読み込んだ後にそのライブラリを利用するスクリプトを実行したい場合でも、意図した通りの順序で動作させることができる。したがって、defer属性は、ページの初期表示に必須ではないが、カルーセル（スライドショー）やインタラクティブなメニュー、アニメーションといった、ユーザー体験を豊かにするための機能を追加するスクリプトに最適である。ページの表示を妨げることなく、必要な機能を正しい順序で追加できるため、多くの場面で最も安全かつ効果的な選択肢となる。

次に、async属性の動作を解説する。async属性を<script>タグに指定した場合も、deferと同様に、ブラウザはHTMLの解析を中断せずにスクリプトのダウンロードを並行して開始する。しかし、実行のタイミングに大きな違いがある。async属性が指定されたスクリプトは、ダウンロードが完了した時点で即座に実行される。このとき、ブラウザはHTMLの解析を一時的に中断し、スクリプトの実行が終わり次第、解析を再開する。複数のスクリプトにasync属性が指定されている場合、それらの実行順序はHTML内の記述順とは無関係になり、ダウンロードが完了した順に実行される。そのため、スクリプト間に依存関係がある場合には使用できない。この特性から、async属性は、他のどのスクリプトとも依存関係がなく、またページのDOM構造にも依存しない、完全に独立したスクリプトに適している。具体的な例としては、Google Analyticsのようなアクセス解析用のトラッキングコードや、広告配信用のスクリプトなどが挙げられる。これらのスクリプトはページの主要な機能とは直接関係がないため、ダウンロードが完了次第すぐに実行されても問題がなく、ページの読み込みパフォーマンスへの影響を最小限に抑えることができる。

一方で、deferもasyncも使用すべきではないケースも存在する。それは、そのスクリプトがページの基本的な機能や表示に不可欠であり、できるだけ早く実行される必要がある場合だ。例えば、ReactやVue.jsといったフレームワークを用いて構築されたシングルページアプリケーション（SPA）の本体となるスクリプトや、eコマースサイトにおける決済処理を担うスクリプトなどがこれに該当する。これらのスクリプトの実行が遅れると、ユーザーには何も表示されない、あるいはサイトが正常に機能しないといった致命的な問題が発生する。このような重要なスクリプトは、意図的にHTMLの解析をブロックさせてでも最優先で読み込み、実行する必要があるため、属性を付けずに通常通りに読み込ませるのが正しいアプローチである。

結論として、deferとasyncはWebサイトのパフォーマンスを向上させるための強力なツールであるが、その特性を正しく理解し、スクリプトの役割に応じて適切に使い分けることが極めて重要である。deferは、ページの表示をブロックせず、HTML解析完了後に記述順を維持して実行するため、依存関係を持つ補助的なスクリプト群に適している。asyncは、ページの表示をブロックせず、ダウンロード完了次第すぐに実行するため、依存関係のない独立したスクリプトに適している。これらの属性を不適切に使用すると、サイトの機能が損なわれるリスクもあるため、導入する際には各スクリプトの役割と依存関係を慎重に検討する必要がある。正しく活用すれば、Webサイトの表示速度は劇的に改善され、ユーザー体験とSEO評価の向上に大きく貢献するだろう。