コンテンツ
CSSファイルとJavascript（JS）ファイルの読み込み順について
<head>～</head>内でCSSやJavascriptの外部ファイル（xxx.cssやxxx.js）を読み込む際の順番について意識されているでしょうか？
何気に大事なことなので、
今回は、外部ファイルの読み込み順についてまとめてみました。
で、結論から言うと、
「JS外部ファイル→CSS外部ファイル」ではなく「CSS外部ファイル→JS外部ファイル」として下さい。
理由は以下の通りです。
■Javascriptの外部ファイルは、その読み込みを開始すると、ページの読み込み（HTMLの解析）が一旦止まってしまう
■CSSの外部ファイルの読み込みは、ページの読み込み（HTMLの解析）と並行して行うことが可能
↓
Javascriptの外部ファイルの読み込みが開始されると、その読み込みが完了するまでHTMLの解析がストップします。
逆に、
CSSの外部ファイルの読み込みはHTMLの解析と並行して行えるので、その読み込みが完了するのを待つ必要はありません。
つまり、
HTML内でJavascriptの外部ファイルの読み込み記述を先に記載してしまうと、
その読み込みが完了するまでCSSの外部ファイルを読み込みが開始されません。
が、
CSSの外部ファイルの読み込み記述を先に記載した場合には、
Javascriptの外部ファイルの読み込みも並行して開始することが可能です。
↓
これにより、ページの読み込み速度も速くなります。
ページの表示速度もGoogleの検索ランキングのシグナルに入っているので、
CSSとJavascriptの読み込みの順番には注意した方がいいです。
もう少し詳しく説明します。
Javascriptの外部ファイル読み込み時には、ページの読み込み（HTMLの解析）が止まる
Javascriptの外部ファイルの読み込みが開始されると、その読み込みが完了するまでは、
後続のHTMLの解析が行われません。
また、Javascriptの外部ファイルが複数ある場合には、1ファイルずつしか読み込めません。
例えば、
<script src="sample01.js"></script> <script src="sample02.js"></script> <script src="sample03.js"></script>
と記述した場合、
まず、sample01.jsを読み込んだ後にsample02.js、さらにsample03.jsと順番に読み込んでいきます。
さらに、CSSの外部ファイルの読み込み記述をsample03.jsの読み込み記述よりも下に記載してしまうと、
sample03.jsの読み込みが完了するまでCSSの読み込みを開始できなくなります。
この読み込み順は非効率で、ページの読み込み速度にも影響します。
CSSはHTMLの解析と並行して読み込むことが可能
CSSは、複数の外部ファイルを読み込む際には、並行して同時に読み込むことが可能です。
例えば、
<link type="text/css" rel="stylesheet" href="sample01.css"> <link type="text/css" rel="stylesheet" href="sample02.css"> <link type="text/css" rel="stylesheet" href="sample03.css">
と記述した場合、
sample01.cssとsample02.cssとsample03.cssを並行して読み込んでくれます。
その為、
sample03.cssの読み込みタグの下に、
<script src="sample01.js"></script>
を記述すると、
sample01.css、sample02.css、sample03.cssと並行してsample01.jsの読み込みも行われるので、外部ファイル読み込みの効率が良くなります。
外部ファイル読み込みの記述例
外部ファイル読み込みの悪い記述例と良い記述例を上げておきます。
<head> ・ ・ <script src="sample01.js"></script> <script src="sample02.js"></script> <script src="sample03.js"></script> <link type="text/css" rel="stylesheet" href="sample01.css"> <link type="text/css" rel="stylesheet" href="sample02.css"> <link type="text/css" rel="stylesheet" href="sample03.css"> ・ </head>
<head> ・ ・ <link type="text/css" rel="stylesheet" href="sample01.css"> <link type="text/css" rel="stylesheet" href="sample02.css"> <script src="sample01.js"></script> <script src="sample02.js"></script> <script src="sample03.js"></script> <link type="text/css" rel="stylesheet" href="sample03.css"> ・ </head>
<head> ・ ・ <link type="text/css" rel="stylesheet" href="sample01.css"> <link type="text/css" rel="stylesheet" href="sample02.css"> <link type="text/css" rel="stylesheet" href="sample03.css"> <script src="sample01.js"></script> <script src="sample02.js"></script> <script src="sample03.js"></script> ・ </head>
その他の注意点（読み込みを改善する方法）
【CSS】@importで読み込みは避けましょう！
最近は減ってきたように感じますが、
1つのCSSファイルに@importで複数のCSSファイルを読み込ませるという手法があります。
例えば、
sample.cssというCSSファイルを作成して、
@import url("sample01.css");
@import url("sample02.css");
@import url("sample03.css");
と記述します。
↓
で、sample.cssを以下のように読み込ませます。
<link type="text/css" rel="stylesheet" href="sample.css">
こうすることで、<head>～</head>内のソース量が減ってすっきりするのはいいのですが、
これだとCSSファイルを1つずつしか読み込めません。
つまり、sample01.css → sample02.css → sample03.cssの順番に1ファイルずつ読み込むことになるので、
せっかく並行して読み込める能力があるのに、それを活かせずに読み込みに時間が掛かってしまいます。
外部ファイルは1つにまとめる
CSSやJavascriptの外部ファイルを複数読み込むことはよくありますが、
出来る限り1つのCSSファイルやJSファイルにまとめるようにしましょう。
ただ、実際には難しいと思います。
特にJavascriptの場合にはまとめるのが難しいです。
その為、無理矢理まとめる必要はありません。
が、極力、読み込む外部ファイルの数を減らすようにして下さい。
【Javascript】外部ファイルはHTML内の最後の方で読み込む
Javascriptの外部ファイルの読み込みの記述は、
HTMLの中の最後の方（
この記事へのコメントはありません。