控えめなJavaScript：HTMLコードの上部または下部にある<script>？
最近、Yahooのマニフェストを読みました Webサイトを高速化するためのベストプラクティス 。可能であれば、HTMLコードの最後にJavaScriptを含めることをお勧めします。
しかし、いつどこで正確に？
</html>を閉じる前、または後に配置する必要がありますか？そして何よりも、それをいつ<head>セクションに入れるべきですか？
本当に目立たないスクリプトには2つの可能性があります。
- headセクションのscriptタグを介して外部スクリプトファイルを含める
- 本文の下部（
</body></html>の前）のスクリプトタグを介して外部スクリプトファイルを含める
最初のYahooの調査では、一部のブラウザーがスクリプトタグをヒットしたときにスクリプトファイルを読み込もうとするため、終了するまでページの残りの部分を読み込まないことが示されているため、2番目の方が高速になります。ただし、DOMの準備ができたらすぐに実行する必要がある「準備完了」部分がスクリプトにある場合は、それを頭に入れる必要があります。もう1つの問題はレイアウトです。スクリプトがページレイアウトを変更する場合、できるだけ早くロードして、ユーザーの前でページを再描画する時間が長くならないようにします。
外部スクリプトサイトが別のドメイン（外部ウィジェットなど）にある場合、ページの読み込みの遅延を避けるために、下部に配置する価値があります。
また、パフォーマンスの問題については、独自のベンチマークを行う-調査が行われたときに真実であることが、ローカルのセットアップやブラウザーの変更によって変わる可能性があります。
決してカットされて乾燥することはありません-ヤフーは、スクリプトを閉じる直前に置くことをお勧めします</body>タグは、空のキャッシュでページがより速く読み込まれるという錯覚を引き起こします（スクリプトがドキュメントの残りのダウンロードをブロックしないため）。ただし、ページの読み込み時に実行するコードがある場合は、ページ全体が読み込まれた後にのみ実行が開始されます。スクリプトを<head>タグ、それらは前に実行を開始します-したがって、プライムされたキャッシュでは、ページは実際により速くロードされるように見えます。
また、ページの下部にスクリプトを配置する特権は常に利用できるとは限りません。以前に読み込まれているライブラリまたは他のJavaScriptコードに依存するインラインスクリプトをビューに含める必要がある場合、それらの依存関係を<head>タグ。
ヤフーのすべての推奨事項はすべて興味深いものですが、常に適用できるわけではなく、ケースバイケースで検討する必要があります。
他の人が言ったように、閉じるbodyhtmlタグの前に配置します。
先日、サイトからの苦情が非常に遅いとクライアントから何度も電話がありました。私たちはそれらをローカルに訪問し、1ページをロードするのに20〜30秒かかったことがわかりました。サーバーのパフォーマンスが悪いと考えてログオンしましたが、WebサーバーとSQLサーバーの両方が〜0％のアクティビティでした。
数分後、外部サイトがダウンしていることに気付き、Javascriptトラッキングタグにリンクしていました。これは、ブラウザーがサイトのheadセクションでscriptタグを押し、スクリプトファイルのダウンロードを待機していることを意味していました。
そのため、少なくともサードパーティ/外部スクリプトについては、それらをページの最後に置くことをお勧めします。その後、それらが利用できなかった場合、ブラウザは少なくともその時点までページをロードし、ユーザーはそれを忘れます。
要約すると、上記の提案に基づいて：
- 外部スクリプト（Googleアナリティクス、サードパーティマーケティングトラッカーなど）の場合は、
</body>タグ。 - ページレイアウトに影響するスクリプトの場合は、先頭に配置します。
- 「jread」のような「dom ready」に依存するスクリプトについては、
</body>頭にスクリプトを配置するエッジケースの理由がない限り。 - 依存関係のあるインラインスクリプトがある場合は、必要なスクリプトを先頭に配置します。
いいえ、それは</html>の後にあるべきではありません。それは無効だからです。スクリプトを配置する最適な場所は、</body>の直前です。
これは基本的に、ほとんどのブラウザが提供するスクリプトを評価している間、ページのレンダリングを停止するためです。したがって、ページ内のどこにでもノンブロッキングコードを配置しても構いません（イベントバインディングは非常に高速であるため、関数をonLoadイベントにアタッチするものを主に考えています）。ここでの大きなキラーは、広告サーバースクリプトを挿入するページの先頭にあります。これにより、広告が完全にダウンロードされる前にページの読み込みが妨げられ、ページの読み込み時間が長くなります。
スクリプトの位置を調整したい場合、YSlowはパフォーマンスを改善または損なう場合にフレーバーを提供するための優れたツールです。特定のドキュメントの位置にjavascriptを配置すると、ページの読み込み時間が本当に短縮される可能性があります。
一番下に配置すると、最後にロードされるため、ユーザーがページを表示できる速度が速くなります。最後の</html>の前にある必要がありますが、そうでなければDOMの一部にはなりません。
ただし、コードがすぐに必要な場合は、頭に入れてください。
ブログウィジェットのようなものを一番下に置いて、ロードしない場合でもページのユーザビリティに影響しないようにするのが最善です。