スクロールせずに見える範囲のJavaScript関数を見つける方法
this oneのように、スクロールせずに見える範囲（クリティカルcssパス）のCSSルールを取得するためのツールがたくさんあります。しかし、折り畳み領域の上にどのJavaScript関数が必要なのか、どうすればわかりますか？
状況は珍しいことではありません。10〜20のcssとjavascriptファイルがあり、それらをhtmlファイルの最後に移動したいと考えています。 cssファイルの移動については、頭に残すべきスタイルを見つけるのは非常に簡単ですが、javascriptではどうですか？
Javascriptファイルがレンダリングをブロックする理由は、DOM（HTML）を操作できるという事実であり、ブラウザがJavascriptファイルのダウンロードとがブラウザの前に実行されるのを待つ理由です。キュー内の次のアイテムへのフォーカスを再開します。
これは場合によって異なりますが、本文の最後にあるすべてのスクリプトタグを移動して開始し、ページがどのように読み込まれるかを確認する必要があります。このテストでは、 Chromeで3gを遅くするネットワークスロットル を使用することをお勧めします。この手順を実行した後、ブラウザの大幅な再描画が発生する場合は、スクロールせずに見える要素の一部が正しい初期レンダリングのためにJavaScriptファイルに依存していることを意味します。
不快な視覚効果を避けるために、頭に移動してレンダリングをブロックするスクリプトを見つけるための一般的な方法に関するいくつかの提案：
カルーセルを前もって持っている場合は、カルーセルスクリプトとそれが依存する可能性のあるライブラリの両方を先頭に移動する必要があります（jQueryは依存関係として頻繁にポップアップします）。
ハンバーガーメニューが点滅して表示され、スクリプトのロード後にのみ非表示になっている場合は、JavaScriptにも依存していることを意味し、対応するスクリプト（およびその依存関係）を先頭に移動する必要があります。
どのJSファイルがそれらの要素に触れているかを見つけるのが難しい場合は、要素の検査中に目立つ要素セレクタORをJSファイルで検索してみてください。
ディスカバリーは、個々のJSファイルを破棄することで実行できます。これにより、どの特殊な要素が誤動作を引き起こしているのかを確認し、適切な開始点を提供します。
このための自動化されたツールはありません。使用シナリオは非常に広く警戒する可能性があるため、常に段階的な試行およびテストプロセスです。
スクリプトタグのdefer属性を使用 もできます。
Defer属性を使用すると、それらのスクリプトタグは、それらが存在する場所（ヘッドまたはボディの最後）に関係なく、レンダリングをブロックしなくなります。
遅延は、スクリプトタグを本文の最後に移動するのとほぼ同じであり、十分にサポートされています- defer attribute browser support
スクロールせずに見えるコンテンツをページの上部に移動し、ページの下部にはスクロールせずに見えるコンテンツのレンダリングをブロックしないJavaScriptとCSSを配置します。
ほとんどのWebサイトでは、ページの残りの部分に不可欠なスタイリングが含まれているため、CSSをページの上部に読み込みます。しかし、ページのフッターにのみ役立つcssがある場合、ユーザーがスクロールダウンするのに時間がかかる場合は、htmlの下部にそれをロードしても問題ありません。実際にサイトを高速化できます。
Javascriptは似ていますが、通常はページがユーザーに最初の視覚的なインターフェイスを表示する必要はありません。その結果、Webサイトは通常、ページをより速くロードできるように、htmlの下部にロードします。
ページの視覚的なレンダリング、特にスクロールせずに見える位置にJavascriptが不可欠な場合は、ほぼ確実にページの上部にJavaScriptをロードする必要があります。
HTMLは、以前のコードがダウンロードされ、後のコードの前にブラウザーによって処理されるように、時間順に並べられます。そのため、ページの上位にページをロードするために必要なコードは何でも配置し、下部にはそれほど重要ではないコードを配置します。