レンダリングを妨げる JavaScript を削除する

このルールは、HTML ページのスクロールせずに見える範囲に、レンダリングをブロックする外部 JavaScript ファイルへの参照が含まれていることを PageSpeed Insights が検出した場合にトリガーされます。

概要

ブラウザでは、ページを表示する前に HTML マークアップを解析して DOM ツリーを構築する必要があります。この処理の途中でスクリプトが出現するたびに、パーサーは HTML の解析を停止してスクリプトを実行してから、解析を続行する必要があります。外部スクリプトの場合はリソースがダウンロードされるのを待つ必要もありますが、その際リソースのダウンロードによってネットワークラウンドトリップが発生し、ページが最初に表示されるまでの時間が長くなる可能性があります。 JavaScript がクリティカルレンダリングパスにどのように影響するかについては、JavaScript を使用してインタラクティブにするをご覧ください。

推奨される解決方法

レンダリングをブロックする JavaScript、特に、実行前に取得する必要のある外部スクリプトの使用を避け、最小限に抑えます。ページコンテンツのレンダリングに必要なスクリプトをインライン化すると、余分なネットワークリクエストを避けることができます。ただし、最適なパフォーマンスを提供するために、インライン化するコンテンツのサイズを小さくし、また、すばやく実行する必要があります。最初のレンダリングに必要のないスクリプトは、非同期にするか、最初のレンダリングが終了するまで実行を遅らせます。なお、この方法で読み込み時間を改善するためには、CSS の配信を最適化する必要もあります。

JavaScript をインライン化する

レンダリングをブロックする外部スクリプトがあると、ブラウザは JavaScript が取得されるのを待たなければなりません。それによって、ページが表示されるまでのネットワークラウンドトリップが増える可能性があります。外部スクリプトが小さい場合は、その内容を HTML ドキュメントに直接インライン化することで、ネットワークリクエストの遅延を回避できます。たとえば、次のような HTML ドキュメントがあるとします。

<html>
  <head>
    <script type="text/javascript" src="small.js"></script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>

また、リソース small.js が次のようになっているとします。

  /* contents of a small JavaScript file */

この場合、スクリプトを次のようにインライン化できます。

<html>
  <head>
    <script type="text/javascript">
      /* contents of a small JavaScript file */
    </script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>

スクリプトの内容をインライン化することにより small.js の外部リクエストがなくなり、ブラウザでは最初のレンダリングを早く開始できます。ただし、インライン化すると HTML ドキュメントのサイズが大きくなるほか、複数のページに同じ内容のスクリプトをインライン化しなければならなくなる場合があります。このため、最適なパフォーマンスを提供できるよう、インライン化するのは小さいスクリプトに限る必要があります。

JavaScript を非同期にする

デフォルトでは、JavaScript によって DOM の構築が妨げられ、最初のレンダリング時間が遅くなります。JavaScript が解析を妨げないように、外部スクリプトには HTML の async 属性を使用することをおすすめします。次に例を示します。

<script async src="my.js">

非同期スクリプトについて詳しくは、パーサーブロックと非同期 JavaScript をご覧ください。非同期スクリプトは、指定された順序での実行は保証されません。また、document.write は使用しないでください。実行順序に依存するスクリプトや、ページの DOM または CSSOM へのアクセスや変更が必要なスクリプトは、そうした制約に対応するために書き直しが必要となる場合があります。

JavaScript の読み込みを遅らせる

最初のページレンダリングに不要なスクリプトの読み込みと実行は、最初のレンダリングの完了後、またはページ内の他の重要部分の読み込みの完了後まで遅らせることができます。それにより、リソースの競合を減らしてパフォーマンスを改善できます。

よくある質問

jQuery などの JavaScript ライブラリを使用している場合はどうすればよいですか？: JQuery など多くの JavaScript ライブラリは、インタラクティブ性やアニメーションなどの効果を付加してページの魅力を高めるために使用されています。ただし、こうした動作の多くは、スクロールせずに見える範囲のコンテンツが表示された後に追加しても差し支えありません。そうした JavaScript を非同期にする、または読み込みを遅らせることを検討してください。
ページの作成に JavaScript フレームワークを使用している場合はどうすればよいですか？: クライアント側の JavaScript を使ってページコンテンツを作成している場合は、関連する JavaScript モジュールをインライン化して、余分なネットワークラウンドトリップを避けることを検討してください。同様に、サーバー側のレンダリングを使用すると、最初のページ読み込みのパフォーマンスが大幅に改善される場合があります。JavaScript テンプレートをサーバー上でレンダリングして最初のレンダリングをすばやく配信し、ページが読み込まれた後にクライアント側のテンプレートを使用します。サーバー側のレンダリングについて詳しくは、http://youtu.be/VKTWdaupft0?t=14m28s をご覧ください。