新しいWebプロジェクトに着手しようとしています。次のスキームを使用して、JavaScriptを<head>
と</body>
の前に配置する予定です。
ページのUXに不可欠なスクリプト:<head>
。私がウェブを熟読しているように、ページがロードされる前に<head>
のスクリプトがロードされるので、ユーザーエクスペリエンスに不可欠なスクリプトをそこに配置することは理にかなっています。
デザインとUXに必須ではないスクリプト(Google Analyticsスクリプトなど):</body>
の前。
これは賢明なアプローチですか?
別のアプローチは、すべてのスクリプトを<head>
に入れて、重要でないスクリプトに遅延属性を追加することです。しかし、私は古いバージョンのFirefoxがdefer属性を取得しないことを読みました。
多くの開発者は</body>
の直前にjavascriptを実行して、すべての要素がレンダリングされた後に実行されると思います。
ただし、コードを正しく整理すれば、ページ上の位置は関係ありません。
たとえば、jQueryを使用する場合、次の操作を行うことにより、ページとその要素が完全にレンダリングされるまでコードが実行されないようにすることができます。
$(document).ready(function(){
//Code here
});
次に、スクリプト参照をhead
タグに入れることができます。
更新-スクリプトタグは</body>
の直前で参照する必要があります。これにより、スクリプトの読み込み中にレンダリングがブロックされることがなくなり、サイトの認識速度が大幅に向上します。
この手法を使用する場合は、目立たないJavaScriptを使用しないでください。
JavaScriptはドキュメントの最後に配置して、ページ要素の並列読み込みが遅延しないようにする必要があります。この場合、jsが特定の方法で記述されている必要がありますが、ページの読み込み速度は向上します。
また、理想的には、このような参照を別の(サブ)ドメインでホストすることができます。 jqueryへの参照は、Google CDNも指す必要があります。
詳細は http://developer.yahoo.com/performance/rules.html を参照してください。
私はそれが完全に賢明だと思います。おっしゃったように、<head>
から重要なスクリプト(jQuery、Modernizrなど)を移動しない限り、問題は発生しません。
不要なスクリプトをページの下部に移動すると、ロード速度の認識(およびスクリプトの最小化/連結)が向上します。
</body>
の前にスクリプトを配置する理由の1つは、ユーザーの操作なしでDOMを操作するため、操作するためにDOMをロードする必要があるためです。これを行う別の方法は、ページが読み込まれたときにイベントリスナーを追加してスクリプトを実行することですが、これには追加のコードが必要です。スクリプトが多数ある場合、特に自分で記述していない場合は、複雑になる可能性があります。それらをページの最後に置くと、ページの読み込みが速くなりますが、DOMを操作するスクリプトの場合は、それほどきれいではない結果が得られる可能性があります。
それはすべて、「必須のUX」の意味によって異なります。たとえば、modernizrを早期に表示することに同意しますが、すべてをすぐにロードする必要はありません。スタイルのないテキスト(FOUT)のフラッシュを回避しようとしている場合は、それがもっともな理由です。同様に、ユーザーが何かを行う前にページの外観に影響を与えるスクリプトがある場合は、それらを早期にロードする必要があります。
ただし、速度はUXの一部です。適用するコンテンツがユーザーに表示されない場合でも、jqueryインタラクションを実行する準備ができていても、メリットはありません。終了の最初にスクリプトをロードすることの違いは、ほんの数秒です。最初にページを読み込ませると、ユーザーはそれらの秒数を使用してページを取り込むため、スクリプトを目立たずに読み込むことができます。
スクリプトをページの下部に移動すると、ページの読み込みが速くなるため、最近のページランクが変わります。
また、IEの一部のバージョンでは、参照する要素が読み込まれる前にスクリプトを実行しようとすると、エラーがスローされます。
Edが言うように、スクリプトは別のファイルに、できるだけ少ないファイルに保存する必要があります。
Javascriptを別のファイルに入れ、HTMLの先頭部分にそれへのリンクを配置します。