このルールは、HTML がページのスクロールせずに見える範囲で、外部の JavaScript ファイルを参照していることを PageSpeed Insights が検出した場合にトリガーされます。
概要
ブラウザではページをユーザーに表示する前に解析する必要があります。解析中に外部スクリプトがある場合は、解析を停止して、その JavaScript をダウンロードしなければなりません。そのたびにネットワークの往復が追加されるため、ページが最初に表示されるまでの時間が遅くなります。
推奨される解決方法
スクロールせずに見える範囲の表示に必要な JavaScript はインライン化し、ページに機能を追加するのに必要な JavaScript は、スクロールせずに見える範囲のコンテンツが配信されるまで遅延させてください。なお、この方法で読み込み時間を改善するためには、
CSS の配信を最適化する必要もあります。
小さな 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 ドキュメント内にインライン化することで、small.js に対する外部リクエストが不要になります。
JavaScript の読み込みを遅らせる
JavaScript がページの読み込みを妨げないように、JavaScript を読み込むときに HTML の async 属性を使用することをおすすめします。次に例を示します:
<script async src="my.js">
JavaScript リソースで document.write を使用している場合は、非同期の読み込みを安全に使用できません。document.write を使用するスクリプトは、別の方法を使用するように書き直すことをおすすめします。
また、JavaScript を非同期的に読み込む際に、ページで互いに依存している複数のスクリプトを読み込む場合は、アプリケーションで適切な依存関係の順序でスクリプトを読み込むように注意を払う必要があります。
よくある質問
- jQuery などの JavaScript ライブラリを使用している場合はどうすればよいですか？
- JQuery など多くの JavaScript ライブラリは、インタラクティブ性やアニメーションなどの効果を付加してページの魅力を高めるために使用されています。ただし、こうした動作の多くは、スクロールせずに見える範囲のコンテンツが表示された後に追加しても差し支えありません。そのような JavaScript の実行や読み込みをページの読み込み後に移動することを検討してください。
- ページの作成に JavaScript フレームワークを使用している場合はどうすればよいですか？
- クライアントサイドの JavaScript を使ってページのコンテンツを作成している場合は、関連する JavaScript モジュールをインライン化して、余分なネットワークの往復を避けることを検討してください。同様に、サーバーサイド レンダリングを使用すると、最初のページの読み込みのパフォーマンスが大幅に改善される場合があります。JS テンプレートをサーバー上でレンダリングし、その結果を HTML にインライン化してから、アプリケーションの読み込み後にクライアントサイド テンプレートを使用します。サーバーサイド レンダリングの詳細については、http://youtu.be/VKTWdaupft0?t=14m28s をご覧ください。