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

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

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

ページ表示高速化をサーバの設定だけに任せていませんか？ HTMLやCSS、JavaScriptの書き方でも速くできます（編集部）

　連載第1回の「Webサイトを“速く”表示させる7つの計測ポイント」では、YSlowを使って速度に関する問題を調査しました。

　今回は、CSS・JavaScript・HTMLの工夫で速度を改善する下記5つの方法を紹介します。中にはYSlowの指摘に含まれないものもありますが、併せてチェックしていきましょう。

【1】CSSはソースコードの上部に記述する

　連載第1回では、「CSSはソースコードの上部に記述していますか？」というYSlowの指摘がありました。HTMLの仕様を知っている人は、これに違和感を覚えたかもしれません。

□ 「CSSは上部に記述する」のは当たり前

　CSSをHTML文書に適用するためには、link要素・style要素・style属性の3つの方法があります。その中で主に使われるであろうlink要素とstyle要素は、ソースコードの上部であるhead要素の内容としかできないからです。style属性は多くの要素に記述できますが、この手法はCSSを採用するメリットが少ないことからあまり使われません。

　つまり、HTMLのルールを守っていればCSSは自然にソースコードの上部に記述されるので、HTMLの仕様を知っている人が感じた違和感とは「それ以外にあるの？」ということでしょう。

□ CSSを下部に記述したサンプル

　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>CSSの記述位置による速度の違いを検証</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
 
<style type="text/css">
    * {
        color: blue;
    }
</style>
 
</head>
<body>
 
<h1>CSSの記述位置による速度の違いを検証</h1>
<p>p要素です。head要素内のstyle要素では文字色を青にしていますが、body要素内のstyle要素（文法違反）で文字色を赤にします。</p>
 
<script type="text/javascript">
    alert("style要素の直前にアラートを出す");
</script>
 
<style type="text/css">
    p {
        color: red;
    }
</style>
 
</body>
</html>

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

図1　p要素の内容が最初は青色で表示され、アラートが出る

図2　アラートを消すと、p要素の文字色が赤色になる

　分かりやすくするために、下部のstyle要素の直前にアラートを出してWebブラウザの動作をストップさせています。

□ CSSが上部と下部にあることで起こる“差”

　head要素内に記述されたCSSは、始めから適用されていますが、コンテンツの下部に記述されたCSSはコンテンツの表示の後に適用されていることが分かります。これにより、ユーザーはページ読み込みの完了を遅く感じる可能性があります。

　次ページでは、CSSと同じくJavaScriptの記述位置やCSSとJavaScriptを書く順番について説明します。今度は下です。

1/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データの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する