2021年02月08日

JavaScriptの「async」と「defer」を使用してサイトの速度改善を行おう

JavaScriptの「async」と「defer」を使用してサイトの速度改善を行おう

こんにちは!SeekNextの佐藤です。

今回はサイトの速度を改善に大きく関わる、JavaScriptの遅延読み込みについて解説していこうとおもいます。

サイトの速度を改善するためには!?

サイトの改善の大きな原因は以下があります。

  • 画像の読み込み
  • CSSの読み込み
  • JavaScriptの読み込み

今回はJavaScriptの読み込みを改善していこうと思います。

まずかHTMLの読み込みについて理解する必要があります。以下のHTMLがあるとします。どのような流れでサイトが読み込まれていくか(パース)わかりますか?

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" />
    <script src="main.js"></script>
  </head>
  <body>

    <p>Hello World!</p>

  </body>
</html>

結論から書くとこんな以下のようになります。

基本的に上からパースされていく
<!DOCTYPE html>
<html>
  <head>

    <link rel="stylesheet" href="style.css" />
    CSSのダウンロードでパースがとまる

    CSSのダウンロードが終わるとパース再開

    JSのダウンロードでパースがとまる
    <script src="main.js"></script>
    JSのダウンロードが終わるとパース再開

  </head>
  <body>

    <p>Hello World!</p>

  </body>
</html>

上記のように<link>や<script>があると途中でHTMLのパースがストップしサイトの速度が遅くなります。容量が軽いファイルであれば問題なりませんが、容量の大きいファイルになると影響は大きくなります。

この時にパースを止めずにHTMLを解析していく技術が「async」と「defer」になります。WHATWG の規格書には以下の図があり、一番わかりやすいので掲載します。

上記の図の通り、<script>だけだとパースが途切れていますが、deferやasyncを使用することで非同期で読み込むことが可能となります。

この手法はGoogleも推奨されており、「Page Speed Insights」でも速度改善の施策として出ていますので、信頼できます。

JavaScriptの「async」と「defer」の具体的な使い方

asyncの使い方

<script src="main.js" async></script>

deferの使い方

<script src="main.js" defer></script>

たった<script>タグに追加するだけです。

もちろん、つけるだけだと、エラーが起きる可能性もありますので、テストしてからの実装をおすすめします。(webpackなどを使用してバンドルすることでリスク軽減になります。)

基本的には「defer」を使用すれば、エラーの起きる可能性も少ないと思います。是非、一度試してみてください。