WebデザイナのためのHTMLチューニング入門（2）

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

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

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

　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　真っ白な画面でアラートが表示される

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

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

[an error occurred while processing this directive]

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

HTML5 + UX フォーラム新着記事

GASで棒、円、折れ線など各種グラフを作成、変更、削除するための基本 （2017/7/12）
　資料を作る際に、「グラフ」は必要不可欠な存在だ。今回は、「グラフの新規作成」「グラフの変更」「グラフの削除」について解説する
GET／POSTでフォームから送信された値をPHPで受け取る「定義済みの変数」【更新】 （2017/7/10）
　HTMLのフォーム機能についておさらいし、get/postメソッドなどの内容を連想配列で格納するPHPの「定義済みの変数」の中身や、フォーム送信値の取り扱いにおける注意点について解説します【PHP 7.1含め2017年の情報に合うように更新】
PHPのfor文＆ループ脱出のbreak/スキップのcontinue【更新】 （2017/6/26）
　素数判定のロジックからbreak文やcontinue文の利点と使い方を解説。for文を使ったループ処理の基本とwhile文との違い、無限ループなども併せて紹介します【PHP 7.1含め2017年の情報に合うように更新】
Spreadsheetデータの選択、削除、挿入、コピー、移動、ソート （2017/6/12）
　Spreadsheetデータの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する