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制作ツール

    Dropboxでホームページを公開出来るWebサービス『Site44』 試しに使ってみました

    無料のストレージサービス「Dropbox」の領域を使ってホーム…

  2. Tips

    緊急地震速報も受信!! 地震・災害に役立つWebサービスやフリーソフトをご紹介

    今朝に起きた地震、私はいつもどおり自転車通勤をしていたのですが…

  3. Web制作ツール

    携帯のサイトを確認できる gooモバイル サイトビューワー

    ブログの携帯用画面やHPの携帯サイトの確認が出来るネットサービス…

  4. Web制作ツール

    自分のブログのFeedly購読者数をチェックできるWebサービス 『Feedly Subscribe…

    自分のブログのFeedlyの購読者数を調べる事ができるWebサービス…

  5. Web制作ツール

    ホームページやブログの表示速度を測定するネットサービス 速度改善にSRC速度測定

    ホームページやブログなどを色々と拡張していますとどんどんサイト…

コメント

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

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

最近の記事

PAGE TOP