このページの本文へ

Webサイトからユーザーを逃さない基本テクニック

30分でできる!Webサイトを高速化する6大原則

2009年09月09日 07時00分更新

Web Directions East

  • この記事をはてなブックマークに追加
本文印刷

5.CSSは上に、JavaScriptは下に『まとめて』記述せよ

 CSSとJavaScrptの記述場所にも、高速化のためのルールがある。CSSは必ずhead要素の中の上部に、JavaScriptは下部にまとめて記述すること。下のグラフのとおり、まとめて書けば読み込みが速くなる。

●悪い例:CSSの間にJavaScriptを挟んでいる


<head>
<link rel="stylesheet" type="text/css" href="stylesheet1.css" />
<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />
<link rel="stylesheet" type="text/css" href="stylesheet2.css" />
<link rel="stylesheet" type="text/css" href="stylesheet3.css" />
</head>

CSS、JavaScript

●良い例:CSS、JavaScriptの順で並んでいる


<head>
<link rel="stylesheet" type="text/css" href="stylesheet1.css" />
<link rel="stylesheet" type="text/css" href="stylesheet2.css" />
<link rel="stylesheet" type="text/css" href="stylesheet3.css" />
<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />
</head>


CSS Sprite

6.プロファイリングツールを使いこなせ!

 Webサイトのパフォーマンスを改善するときに欠かせないのが、プロファイリングツールだ。中でも、米ヤフーが提供するFirefoxアドオン「YSlow」は、簡単で使いやすいのでおすすめだ。

YSlow

 Firebugを立ち上げてYSlow のタブを選び、左下のオレンジの「Run Test」をクリックすると、Webサイトのパフォーマンスをチェックしてくれる。

YSlow

 このとき、「Rulesets」の「Small Site or Blog」(小規模サイトかブログ用)を選択すると、チェック項目からCDN(コンテンツデリバリーネットワーク)の利用とExpireヘッダーの項目が除外される。10ページ程度の簡素なWebサイトなら「Small Site or Blog」で十分だろう。

YSlow

 チェックが終わると、パフォーマンスを落としている原因には赤で「F」と表示されるので、その原因を改善すればいい。

 「Componets」のタブを選ぶと、Webページに読み込まれたファイルの詳細が一覧表で閲覧できる。画像の場合は一番右の「ACTION」から、米ヤフー製の画像最適化ツール「smush.it」ですぐに最適化もできる。

YSlow

 本稿では、バックエンドではなくフロントエンドの改善に絞って、Webサイトを高速化する6つの具体的な方法を解説した。米ヤフーの元CPY(Chief Performance Yahoo!) のスティーブ・サウダーズ氏は、Webページの表示が完了するまでにかかる時間を1秒とすると、そのうちの80%、つまり0.8秒はフロントエンドの処理によるものだと述べている。せっかくWebサイトを訪れたユーザーに不満を与えないために、本稿で紹介した改善策が役立てば幸いだ。

Web Professionalトップへ

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く

ランキング