*

CSSファイルの圧縮でサイトの表示速度はどれだけ変わるのか実験

公開日: : 最終更新日:2011/10/08 Tips, Web制作ツール

このブログで実験してみました

CSSの圧縮でサイトの読込速度の短縮に繋がるのかを実験してみました

ちゃんと効果はあるようで期待した結果が出ました。

css11

実験に使用したCSSの圧縮サービスが

Online JavaScript/CSS Compression Using YUI Compressor

こちらのサービスを利用してCSSの圧縮をしてみました

 

圧縮の仕方

css5

①一番上の赤枠 Filesを選択

②ファイルを選択でCSSファイルを読込ます

③File Type 「CSS」にして

④Compressをクリック

これで表示されたソースをCSSに書き込んで完了です

css2 css1

左から右の様にCSSファイルが出来ます

改行など無駄なコードも全て無くなりますので

人間は見にくいですが、機械は読みやすい様です。

 

実際に圧縮前と圧縮後の計測

css3 css4

 

 

左が圧縮前 右が圧縮前

layouts.css は大きなCSSファイルでは無いので誤差範囲内の結果しか出ませんでしたが

Core.cssは非常に効果がありました

1110ms  → 652ms  と大幅に時間短縮できました

サイト全体で全てのファイルを圧縮や最適化をすればまだまだ

サイトの表示スピードの改善は出来そうです。

 

  • このエントリーをはてなブックマークに追加

Comment

  1. PandaNoir より:

    Online YUI Compressor に勝利しました!

    ついに、SnowballがOnline YUI Compressor に勝利しました!

Message

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

 

    • Info (64)
    • Tips (129)
    • 市販ソフト (8)
    • 解決 (85)
    • 技あり (8)
    • 比較 (14)
    • Wordpress (15)
    • ハードウェア レビュー (26)
    • Windows8アプリ (2)
    • 美しいデスクトップを求めて (13)
    • Freesoft ゲーム (11)
    • 未分類 (1)



PAGE TOP ↑