EC studio EC studio デザインブログ

以前にWeb Directions East 「パフォーマンスアップのウェブ技術 WDE-Express」で
パフォーマンスアップについて記事を書きました。

今回はその記事や色々参照した本・セミナーを元に実際に改善をおこなって、
どれだけ高速化したかデータ上で確認し、まとめてみました。

できるだけ手間をかけずに簡単にできる改善方法をおこなってみたので、
しばらくリニューアルの予定はないが、サイトの表示を早くさせたいという方は
ぜひ試してみてください。簡単作業でパフォーマンスアップできます。

CSSのコードを短縮して書こう

え?こんなこと?と思うかもしれないですが、
どんどんコードを書いていくうちに肥大していくものです。
もう一度見直してコードを軽くしていきましょう。

今回コードの見直しのために使用したサイトはclean CSSです。
clean CSSを参考にカラーコードの短縮、
不必要な記述の削除・省略などをおこないました。
ファイルサイズは11.9KBから10.5KBに、約11%削減することができました。

使われていない不要なコードを削除すると、もっと削減することができます。
CSS Redundancy CheckerCSS 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に軽減されました。

全体のパフォーマンスの結果

peformance-graph

実際「Googleウェブマスターツール」の「サイトのパフォーマンス」で確認した結果、
改善をおこなった後、急激に平均読み込み時間が短くなっています。

サイト内のページの平均読み込み時間を見ると4.1秒から2.0秒に改善されました。
数値で確認すると約2.0秒もサイトのパフォーマンスがアップしていました。

Googleはこれからサイトのパフォーマンスも考慮にいれて
検索結果を表示させていこうとする動きもあるので、
一度サイトのパフォーマンスを見直してみてはいかがでしょうか。


関連した記事:
投稿者
カテゴリー
人気のエントリー
最近のエントリー
アーカイブ
Copyright© ChatWork, All Rights Reserved. secured by ESET.