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

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

株式会社ライブドア
マークアップエンジニア 浜 俊太朗
2009/4/30
ページ表示高速化をサーバの設定だけに任せていませんか? HTMLやCSS、JavaScriptの書き方でも速くできます(編集部)

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

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

  1. CSSはソースコードの上部に記述する
  2. JavaScriptはソースコードの下部に記述する
  3. CSSとJavaScriptを書く順番
  4. JavaScriptを圧縮して読み込みを速くする
  5. 読み込みが遅いブログパーツには要注意

【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要素の内容が最初は青色で表示され、アラートが出る
図1 p要素の内容が最初は青色で表示され、アラートが出る

図2 アラートを消すと、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 フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

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

本日 月間