PageSpeedを使用してjQueryのレンダリングをブロックするJavaScriptを排除する
ページの下部にjQueryを追加しました。ただし、ページスピードインサイト（モバイル）でサイトを実行すると、次のエラーが発生します。
スクロールせずに見える範囲のコンテンツでレンダリングをブロックするJavaScriptとCSSを排除するページには、2つのブロックスクリプトリソースと1つのブロックCSSリソースがあります。
これにより、ページのレンダリングに遅延が発生します。次のリソースが読み込まれるのを待たずに、ページのスクロールせずに見える範囲のコンテンツをレンダリングすることはできません。
ブロッキングリソースを延期または非同期でロードするか、それらのリソースの重要な部分をHTMLに直接インライン化してみてください。
参照： http://learnyourbubble.com および https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Flearnyourbubble.com&tab=モバイル
ただし、jQueryはページの下部に追加されています。したがって、スクロールせずに見える範囲にある必要があります。
このエラーを削除するにはどうすればよいですか？
それはあなたのフォントファイルと関係があります。
滝のリクエスト19と20を見てください。これらのフォントファイルはCSSと見なされます。
フォントファイルがロードされるまで、最初のペイント（緑色の縦線）が発生しないことに注意してください。
次に、15個のJSファイルがフォント（CSS）ファイルの前にロードされていることに注意してください。
それがGoogleが取っていることです。
16個のJSファイルを持つことは過度ではありません。
これを試してください：ブラウザでJavaScriptを無効にします。唯一の変更点はメニューヘッダーにあることに注意してください。 16個のJSファイルはそれだけの価値がありますか？私はそうは思わない。
この記事では、起こっていることの多くを説明する必要があります： https://varvy.com/pagespeed/critical-render-path.html
要するに、問題はchromeは、ページの初期レンダリングを行うためにjqueryと基礎javascriptをロードする必要があるということです。これがブロックの理由です。javascriptがhtmlの後に来るからです。 、htmlがまだ表示できることを意味するわけではありません。chromeは、ページが存在するために不可欠であると考えているため、jquery/foundationが読み込まれている間もDOMのレンダリングはブロックされます。 Pagespeedは、特に大きいため、これらについて不平を言います。この問題を軽減するために、できることがいくつかあります。その一部は上記の記事で詳しく説明されており、一部はここにあります https：// Developers.google.com/speed/docs/insights/BlockingJS 。chromeこれらのスクリプトは重要ではなく、「フォールドの下」にロードできることを伝える最も簡単な方法は、追加することですそれらへのdeferまたはasyncタグ。
非同期をロードしてみましたか
JavaScriptを非同期にするデフォルトでは、JavaScriptはDOMの構築をブロックするため、最初のレンダリングまでの時間を遅らせます。 JavaScriptがパーサーをブロックしないようにするには、外部スクリプトでHTMLasync属性を使用することをお勧めします。例えば：
<script async src="my.js">パーサーブロッキングと非同期JavaScriptを参照 非同期スクリプトの詳細については。非同期スクリプトは指定された順序で実行されることが保証されておらず、
document.writeを使用しないように注意してください。実行順序に依存するスクリプト、またはページのDOMまたはCSSOMにアクセスまたは変更する必要があるスクリプトは、これらの制約を考慮して書き直す必要がある場合があります。
Foundation（）の呼び出し中にエラーが表示されますが、それを除外するために削除したと想定しますが、ロード前に同じ呼び出しが発生する可能性があります。常に次のようにコードを囲むようにしてください。
(function($) {
// DOM ready
})(jQuery);