以前にWeb Directions East 「パフォーマンスアップのウェブ技術 WDE-Express」で
パフォーマンスアップについて記事を書きました。
今回はその記事や色々参照した本・セミナーを元に実際に改善をおこなって、
どれだけ高速化したかデータ上で確認し、まとめてみました。
できるだけ手間をかけずに簡単にできる改善方法をおこなってみたので、
しばらくリニューアルの予定はないが、サイトの表示を早くさせたいという方は
ぜひ試してみてください。簡単作業でパフォーマンスアップできます。
CSSのコードを短縮して書こう
え？こんなこと？と思うかもしれないですが、
どんどんコードを書いていくうちに肥大していくものです。
もう一度見直してコードを軽くしていきましょう。
今回コードの見直しのために使用したサイトはclean CSSです。
clean CSSを参考にカラーコードの短縮、
不必要な記述の削除・省略などをおこないました。
ファイルサイズは11.9KBから10.5KBに、約11%削減することができました。
使われていない不要なコードを削除すると、もっと削減することができます。
CSS Redundancy Checker やCSS Usage を使うとさらに探しやすくなります。
全体のpng画像を最適化
punypngでサイト全体のpng画像を最適化しました。
png画像をアップロードするだけで簡単に軽量化できます。
あとはサーバーに上書きするだけなので作業もすぐ終わります。
画像ファイル全体で約42%削減できました。
グローバルナビゲーションをスプライト化
CSSの記述が増えてCSSファイルは重くなりましたが、
画像のリクエストが大幅に軽減されたのでパフォーマンスはアップしました。
読み込むファイルサイズが462.7KBから338.7KBに改善、
そしてHTTP Requestも67から57に軽減しました。
CSSの@importを<link>タグに変更
現在@importを<link>タグの読み込みに変えるだけです。
これでさらにパフォーマンスがアップをおこなえました。
さらに、@importのみに使用していたファイルを削除をおこない、
HTTP Requestsが60から47に軽減されました。
全体のパフォーマンスの結果
実際「Googleウェブマスターツール」の「サイトのパフォーマンス」で確認した結果、
改善をおこなった後、急激に平均読み込み時間が短くなっています。
サイト内のページの平均読み込み時間を見ると4.1秒から2.0秒に改善されました。
数値で確認すると約2.0秒もサイトのパフォーマンスがアップしていました。
Googleはこれからサイトのパフォーマンスも考慮にいれて
検索結果を表示させていこうとする動きもあるので、
一度サイトのパフォーマンスを見直してみてはいかがでしょうか。
関連した記事：
この記事にTwitterでコメント■「iPhoneとツイッターで会社は儲かる」
ツイッター全社導入によるメリット・デメリット、導入して起きた効果、社内への落とし込み方、
iPhone とツイッター、iPhone 活用方法、
さらには、iPhone×ツイッター×Google Apps™によって起こる
クラウド上のコミュニケーション革命について詳細に解説します。
最終章にはGoogle 代表取締役社長 辻野氏との対談を収録。
「iPhoneとツイッターで会社は儲かる」
この記事へのコメント (0)
コメントはまだありません。
ページの先頭に戻る
コメントを投稿