Mach3.laBlog

今すぐ出来る、ちょこざいなサイトパフォーマンスアップ

この記事は賞味期限切れです。(更新から1年が経過しています)

一言にサイトパフォーマンスアップと言っても、どこまで手をつけるか悩みどころ。
今日のお話は、出来るだけ忘れずにやっておきたいごくごく簡単なチューニングです。

今すぐ出来るサイトパフォーマンスアップ

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

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

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

Minify CSS

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のような開発ツールの導入も検討してみましょう。

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が良い感じです。

YSlow

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


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

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

Tweets that mention 今すぐ出来る、ちょこざいなサイトパフォーマンスアップ | Mach3.laBlog -- Topsy.comd41d8cd98f00b204e9800998ecf8427e