JSがレンダリングをブロックする様子のイメージ動画と、JSの非同期処理 async, defer での改善方法

HTML5

speedy

2020.10.25 2020.10.19

Table of Content

HTMLの読み込み、レンダリングでは、JSを読み込むタイミングで読み込み時間が変わってきます。

まず、JSを同期で読み込むことと遅くなります。

非同期でJSを読み込む方法は、とがありますが、読み込む位置でも読み込み時間が変わってきます。

一般的には、JSを body の後方で読み込むと、head の中で読み込むより

速度の改善が大きいようです。

また、async と defer では、deferが安定して速度改善されるのに対し、

asyncは、コンテンツ次第で速度改善される場合とされない場合があります。

JSを同期処理で読み込む場合

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Title</title>
    <script src="./script.js">...</script>
  </head>
  <body>
    ...
  </body>
</html>

JSを非同期処理（async）で読み込む場合

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Title</title>
    <script src="./script.js" async>...</script>
  </head>
  <body>
    <p>この属性は、ブラウザーが解析を一時停止してスクリプトを読み込んで評価しなければならないようなパーサーブロック JavaScript を排除することを可能にします。</p>
  </body>
</html>

JSを非同期処理（defer）で読み込む場合

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Title</title>
    <script src="./script.js" defer>...</script>
  </head>
  <body>
    <p>defer 属性の付いたスクリプトは、スクリプトが読み込まれて評価が完了するまで、 DOMContentLoaded イベントの発生が抑制されます。</p>
  </body>
</html>