Tips

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

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

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  と大幅に時間短縮できました

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

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

関連記事

  1. Tips

    Intel6 インテルがリコールSandy Bridgeに欠陥 各マザーボードメーカ対応状況

    インテルSandyBridgeのチップセット欠陥のリコールでそ…

  2. Tips

    【Tips】Google+のデータをバックアップ!!投稿やサークルのバックアップ方法

    Google+が来年8月にサービスの終了との事でバックアップ方…

  3. Tips

    Yahoo!で旧ブラウザを使っている環境に注意書き ブラウザを最新にする方法も

    Yahoo!にてIE6などの古いブラウザに対してバージョンアッ…

  4. Tips

    【解決】Youtubeからフィードやおすすめ動画の表示を削除する方法

    Youtubeのトップ画面がいつの間にか賑やかになっておすすめ…

コメント

  1. この記事へのコメントはありません。

  1. 2013年 2月 01日
    トラックバック:PandaNoir

PAGE TOP