今日のお題は、プロなら是非とも知っておきたい、ウェブサイトの最適化方法です。
最適化
ぶっちゃけて言えば、いかに素早く、画面を表示するか、ということです。
入門書ではあまり書かれていないことですから、知らなかった人は、ぜひとも覚えていってください！
今日のお題はズバリ、
「画面の表示に関係の無い JavaScript は、あとで読み込もう！」
です。
それ、なんのこと？
ひとつのウェブページを表示するためには、いろいろ必要です。
元になる HTML
スタイルシート
数枚の画像ファイル
JavaScript ファイル
・・・
ひとつのページを表示するために、たくさんのファイルをダウンロードしないといけないわけです。
しかし、よくみると、HTML、スタイルシート、画像ファイルは画面の表示に必要としても、JavaScript は必ずしも画面の表示には必要ない場合があります。画面が全部表示されて、ユーザーにボタンがクリックされるなどして、初めて必要になる場合が多いです。
こういうときに、次の方法が利用できます。それはつまり、
”最初に画面表示に必要なファイル （HTML, CSS, JPEG・・・） をダウンロード。
その後で JavaScript をダウンロードする”
ということです。
どうすればいいの？
JavaScript のインクルードを、ページの最後に行います。
つまり、
<html>
<head>
<link rel="stylesheet" ...>
<script ....>
</head>
<body>
...
</body>
ではなくて、
<html>
<head>
<link rel="stylesheet" ...>
</head>
<body>
...
<script ...>
</body>
というように、script タグをページの最後に持ってきます。
ファイルはページの上に含まれているものから順にダウンロードされますから、これだけで、JavaScript が最後にダウンロードされることになります。
（注意） ただし、document.write を含むなど、JavaScript ファイルを先に読み込まなければならない理由がはっきりしている場合は、どうしようもありませんので、この方法は使えないことになります。ご注意ください。
ではまた！