Web

Webページ読み込み高速化に対する<script>タグのdefer/async属性について

投稿日:

1. はじめに

「Webページの読み込み高速化」という観点から、「<script>タグの defer / async 属性」について書いてみます。

2. <script>タグに defer / async 属性を付けた場合のブラウザの動作

まず、HTMLの仕様である HTML Living Standard から画像を引用します。

defer / async 属性を付けたときの動作の違い

この画像では、以下の3種類の動作についての違いについて説明されています。

  1. ただの <script>タグ
  2. defer 属性付きの <script> タグ
  3. async 属性付きの <script> タグ


ここで図示されている違いを言葉で説明すると以下になります。

(1) ただの <script>タグ

  1. HTMLのパース(*1)を止める
  2. JavaScriptファイルをダウンロードする
  3. JavaScriptコードを実行する
  4. JavaScriptコードの実行が終わったら、HTMLのパースを再開します。

(*1) HTMLを読み込んでDOMツリーを構築する処理

(2) defer 属性付きの<script>タグ

  1. HTMLのパースを止めず、並列に JavaScriptファイルをダウンロードする
  2. HTMLのパースが完了したら、JavaScriptコードを実行する (DOMContentLoadedイベントをブロックする)

※ defer 属性付きの <script>タグが複数あった場合、記述されている順番で実行されます。

(3) async 属性付きの <script>タグ

  1. HTMLのパースを止めず、並列に JavaScriptファイルをダウンロードする
  2. ダウンロードが終わったら、HTMLのパースを止めて、JavaScriptコードを実行する。(私の観察では、DOMContentLoaded の前までには実行されます)
  3. JavaScriptコードの実行が完了したら、HTMLのパースを再開する。

※ async 属性付きの <script> タグが複数あった場合、実行される順番は決まっていません。

3. defer / async 属性関連のポイント

以上の動作を踏まえて defer / async 属性に関連するポイントをまとめます。


(1) defer / async なしの場合、HTMLのパースを止めて JavaScript ファイルをダウンロードするので、そのページの読み込み処理が遅くなる。そのため、できるだけどちらかを付けたほうが良い。

(2) JavaScript の実行の順番が重要である場合は、defer 属性を使う。

(3) 画面上の要素を操作する処理を行う JavaScript には defer 属性を使う。

(4) jQuery のような重めのJavaScriptライブラリは、他から依存されているはずなので、defer 属性を利用すると良い。

(5) 画面上の要素を操作しない処理で、実行の順番が問題にならない JavaScript には、async 属性を使う。但し、すぐに実行されることで読み込み&表示処理が遅くなっているのなら、defer 属性に変える。

※ 実際のページはいろいろな要素が関連していることがあるので、解析して最適解を探るのがよい。

以下は補足情報です。defer / async 属性と関連が薄い項目もありますが、重要なので書いておきます。

(6) JavaScriptファイルのダウンロードや、JavaScriptコードの実行処理を短時間で終わらせるために、ページ単位で必要最低限の JavaScript だけを読み込むようにWebサイトを作成する。

※ JavaScript を分割して、ページ毎に必要なものだけを読み込ませる。そして、ページ毎の JavaScript を圧縮 + キャッシュさせる。

※ JavaScriptファイルの動的インポートを利用する。

(7) WordPress などで JavaScript 圧縮プラグインを使っている場合は、出力される <script> タグにどんな属性が指定されているか注意する(圧縮対象になった元の <script>タグにどんな属性が指定されていたかについても注意する)。

(8) あまりに処理が重い JavaScript ならば、ページ上でユーザーが何らかの操作を行ったタイミング(イベント)で実行させることも検討する。


だいたいこのくらいでしょうか。

4. おわりに

<script> タグに defer / async 属性を指定する」というのは、パフォーマンス測定ツールの実行結果に割と大きく影響する項目の1つになっています。


使用している JavaScript コードを分割したり、依存関係を完璧にコントロールするのはかなり骨の折れる作業ですが、依存関係に問題のなさそうな <script> タグに defer / async 属性を指定するというのは、Webページの高速化において、簡単且つ必須な作業であると言えます。

5. 参考

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

プライバシー

ウェブブラウザの DNT (Do Not Track) を有効にする方法

目次1. Do Not Track とは?2. トラッキングを拒否する意思を送信する手順Chrome の場合Firefox の場合Microsoft Edge の場合Internet Explorer …

DokuWiki

DokuWiki が最新版なのに upgrade now! が表示される場合の対処法

目次1. DokuWiki が最新版なのに upgrade now! が表示される2. 対処方法その13. 対処方法その24. おわりに参考 1. DokuWiki が最新版なのに upgrade n …

Web

Webページ中の特定の文字列をURLで指定する(Text Fragments)

Webページ中の特定の文字列をURLで指定する Text Fragments について説明します。

Chrome

Chrome 77 デベロッパーツールの新機能

目次1. はじめに2. 主な新機能要素のスタイルをコピーするレイアウトシフト (layouts shifts) を表示する使い方Audits パネルの Lighthouse 5.1[Performan …

Glitch

Glitch で PHP を使う方法

Glitch は正式にPHPをサポートしていませんが、ほんの少しの設定変更により、PHPが使えるようになります。