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

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

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

  • コメント: 0

東日本震災で集められたお金の流れが分かる絵 Webサービスからの寄付金がよく分かる図前のページ

自宅のセキュリティは大丈夫? Symantec Security Checkでセキュリティを簡単に診断してくれるネットサービス次のページ

関連記事

  1. Web制作ツール

    ロゴ作成ジェネレーター 日本語OKでフリーなサービスを3つ紹介

    ブログやホームページなどのロゴ作成に役立ちそうなフリーでかつユ…

  2. Tips

    【Tips】簡単操作でChromeの拡張機能アイコンをスッキリする方法

    Chromeの拡張機能のアイコンをスッキリ整理してシンプル表示に出…

  3. Web制作ツール

    指定したページのサムネイルを作ってくれるWebサービス 『Page2Images』

    URLで指定したページを画像形式にしてくれるWebサービスデス…

コメント

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

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

こんな人が書いてます

子供のころからパソコンや電子機械が好きでコンピュータ専門学校を卒業後にIT関連企業に勤めております。

企業や個人のネットワーク構築やパソコントラブル対応、ホームページ制作、システム開発などITに関する仕事を数多く対応しています。

Twitterでこのブログの投稿や日々の出来事などをつぶやいています。Twitter:@mogeringo

最近の記事

PAGE TOP