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

<ph type="x-smartling-placeholder">で確認できます。 このルールは、HTML でブロックが参照されていることを PageSpeed Insights が検出した場合にトリガーされます ページのスクロールせずに見える範囲に 外部の JavaScript ファイルを配置します

概要

ブラウザは、ページをレンダリングする前に、HTML マークアップを解析して DOM ツリーを構築する必要があります。 このプロセスでは、パーサーがスクリプトを検出するたびに、スクリプトを停止して実行する必要があります。 HTML の解析を続行できません。外部スクリプトの場合、パーサーは リソースのダウンロードを待機することになります。これにより、1 つ以上のネットワーク ラウンドトリップと ページが最初にレンダリングされるまでの時間を遅らせる。 <ph type="x-smartling-placeholder"></ph>をご覧ください。 JavaScript によるインタラクティビティを追加する」をご覧ください。 レンダリング パスを指定します。

推奨事項

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

JavaScript をインライン化する

外部ブロック スクリプトにより、ブラウザは JavaScript の取得を待機させます。 ネットワークのラウンドトリップが 1 回以上発生する可能性があります。外部スクリプトが小さい場合は、その内容を 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 モジュールのインライン化を調べて、余分な 最大 100%削減できます同様に、サーバー側のレンダリングを使用すると、最初のページ読み込みのパフォーマンスが大幅に改善される場合があります。JavaScript テンプレートをサーバー上でレンダリングして最初のレンダリングをすばやく配信し、ページが読み込まれた後にクライアント側のテンプレートを使用します。詳細 サーバーサイド レンダリングについて詳しくは、 http://youtu.be/VKTWdaupft0?t=14m28s.

フィードバック

このページは役に立ちましたか？

<ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">