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の速度は改善できる


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



HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

デザインハック 記事ランキング

本日 月間