WebデザイナのためのHTMLチューニング入門
連載インデックスへ
 WebデザイナのためのHTMLチューニング入門（2）

Webページを速く見せるための5つのちょっとした工夫

株式会社ライブドア
マークアップエンジニア 浜 俊太朗
2009/4/30

【2】JavaScriptはソースコードの下部に記述する

- PR -

　CSSと同じく連載第1回では、「JavaScriptはソースコードの下部に記述していますか？」という指摘もありました。

□ JavaScriptを上部に記述したサンプル

　JavaScriptは、CSSとは逆にソースコードの下部に記述することが理想なのです。その理由を再びサンプルコードで見てみましょう。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JavaScriptの記述位置による速度の違いを検証</title>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript">
    alert("head要素の中にアラートを出す");
</script>
</head>
<body>
<h1>JavaScriptの記述位置による速度の違いを検証</h1>
<script type="text/javascript">
    alert("h1要素の次にアラートを出す");
</script>
<p>h1要素とp要素の間でアラートを出しています。</p>
<script type="text/javascript">
    alert("body要素の最後にアラートを出す");
</script>
</body>
</html>

　このソースコードをWebブラウザで開くと、次のような順番で表示が変わります。

図3　真っ白な画面でアラートが表示される
図3　真っ白な画面でアラートが表示される

図4　アラートを消すと、h1要素が表示されて次のアラートが表示される
図4　アラートを消すと、h1要素が表示されて次のアラートが表示される

図5　アラートを消すと、p要素が表示されて次のアラートが表示される
図5　アラートを消すと、p要素が表示されて次のアラートが表示される

□ WebブラウザはHTMLを上から順番に解釈する

　Webブラウザはソースコードを読み込んだ後に上から順番に解釈していきます。このときにscript要素があると、Webブラウザはscript要素の中身を解釈し実行を終えるまで次の要素の処理に進みません。

□ JavaScriptはbody要素を閉じる直前に配置

　JavaScriptが外部ファイルの場合は、その取得が終わるまで先に進めなくなるため、応答の遅いサーバに置かれたスクリプトや実行に時間がかかるスクリプトは画面の描画をブロックする原因になります。可能であれば、JavaScriptはbody要素を閉じる直前に配置することが望ましいでしょう。

　ただし、JavaScriptは関数の呼び出しより先に関数を定義する必要があるため、body要素の中で実行する関数やライブラリなどはhead要素の中で読み込んでおく必要があります。その場合も、サイズ圧縮や複数のライブラリを1ファイルにまとめて転送時間を短くする工夫を行ったり、なるべく応答性のいいサーバに配置するよう心掛けましょう。

【3】CSSとJavaScriptを書く順番

　CSSはhead要素の中に記述し、JavaScriptはソースコードのできるだけ下部に記述するということが分かりました。しかしJavaScriptは、その内容によってはhead内で読み込んでおく必要があるものが存在することも確かです。そんなときは、CSSとJavaScriptのどちらを先に記述すればよいのでしょうか？

　JavaScriptの実行中は次の要素の解釈を止めてしまいますが、CSSにはそれが起こりません。よって、CSSを先に記述しておいた方がよいでしょう。

　次ページでは、JavaScriptの圧縮やブログパーツ、そして3カラムの表示順などについて説明します。

2/3

　INDEX
WebデザイナのためのHTMLチューニング入門（2）　
Webページを速く見せるための5つのちょっとした工夫
  Page1
【1】CSSはソースコードの上部に記述する
Page2
【2】JavaScriptはソースコードの下部に記述する
【3】CSSとJavaScriptを書く順番
  Page3
【4】JavaScriptを圧縮して読み込みを速くする
【5】読み込みが遅いブログパーツには要注意
ちょっとした工夫でWebの速度は改善できる

WebデザイナのためのHTMLチューニング入門 バックナンバー 連載インデックスへ»


「デザインハック」コーナーへ


TechTargetジャパン

リッチクライアント & 帳票 フォーラム 新着記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH