フロントエンドで出来ること

CSSは一番はじめにロードする

スタイルシートに含まれる背景画像のロードと、
ページのレンダリングを出来るだけ早くおこなう為です。

JavaScriptは一番最後にロードする

JavaScriptは</body>の直前あたりでロードするのがパフォーマンスが上がる様子。
ただし、レンダリング前に処理したいケースもあるので、可能な限りで。

CSS/JavaScriptは圧縮しよう

ツールを使って、CSS/JavaScriptファイルを最小化してあげましょう。
YahooライブラリにあるYUICompressorは、CSS/JS両方を圧縮出来るのと、
ついでに軽くバリデートしてくれるのも助かりますね。

使用例など。

java -jar yuicompressor-2.4.2.jar -v --charset UTF-8 -o hoge.min.js hoge.js

• YUI Compressor
• YUI Compressorをお手軽にするバッチファイルを書いてみる

また、導入が面倒な場合はオンラインツールも公開されています。

• Minify CSS – Compress CSS Code
• Free Javascript Compression and Minify Javascript Resources – Minify JS

HTTPアクセスを減らす

大量のJavaScriptやCSSをロードしているページはご注意を。
可能な限りファイルを纏めて、HTTPアクセスを減らしてやると良いようです。

<script type="text/javascript" src="hoge.js"></script>
<script type="text/javascript" src="fuga.js"></script>
<script type="text/javascript" src="foo.js"></script>
<script type="text/javascript" src="bar.js"></script>

<!-- ↓ ファイルをまとめて圧縮 -->

<script type="text/javascript" src="mylibraries.min.js"></script>

また、大量の画像を部品として使用する場合は、
CSS Spriteなどを利用してまとめてあげると良いですね。

CSSの@importを避ける

@importによるインポートは、に比べてパフォーマンスが落ちるそうなのでご注意を。
むしろ、ひとつのCSSファイルにまとめてあげて圧縮するのがベストですね。
それが面倒だと感じる場合は、LESSやSassのような開発ツールの導入も検討してみましょう。

• LESS – Leaner CSS
• Sass – Syntactically Awesome Stylesheets

DNSルックアップを減らす

広告やGoogleAnalytics等で致し方ない場合の方が多いですが、
出来るだけ別ドメインからのファイルインポートは避け、
DNSルックアップを減らすのが吉です。

サーバサイドで出来ること

Expiresを設定する

ヘッダの有効期限を適正に設定する事で、更新頻度の低いファイルをキャッシュさせます。
※ApacheのExpiresモジュールが有効になっている必要があります。
cf) mod_expires – Apache HTTP サーバ

.htaccessでの設定例。
有効期限の初期設定を1ヶ月に設定しています。

ExpiresActive On
ExpiresDefault "access plus 1 month"

もしくは、ファイルの種類毎に設定を変えたい場合の例がこちら。

ExpiresActive On
ExpiresByType text/css "access plus 1 week"
ExpiresByType applicdation/javascript "access plus 1 month"
ExpiresByType image/png "access 3 month"

YSlowでチェックしてみる

サイトパフォーマンス測定ツールとしては、こちらもYahooから提供されている、
FirebugプラグインのYSlowが良い感じです。

インストールするとFirebugに「YSlow」タブが追加され、
閲覧しているページのパフォーマンスを測定する事が出来ます。
細かく項目別にA～F判定を行ってくれるので、
チェックすべきところがすぐに分かり、目安として使えそうですね。

• Yahoo! YSlow for Firebug

Webデザインは年々リッチになりつつありますが、
その分フロントエンドのパフォーマンスは注意しておきたいですね。