30分でできる！Webサイトを高速化する6大原則 (4/4)

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の順で並んでいる


<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>

出典：Optimize the order of styles and scripts

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

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

●YSlow
　https://addons.mozilla.org/ja/firefox/addon/5369

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

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

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

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

◆

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