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

関連記事

  1. Tips

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

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

  2. Tips

    Tips 楽天からのメールマガジンの配信を止める

    楽天からのメールっていつの間にかすごい量になっていて迷惑メール…

  3. Tips

    【まとめ】 緊急地震速報や地震情報を受信できるWebサービス、フリーソフトをまとめてみました

    最近になってまた地震が多くなってきて、このブログでも色々と地震に…

  4. Web制作ツール

    自分のサイトがスマホでどの様に見えるか確認できるWebサービス Test Mobile View

    自分のサイトなどの入力したURLがスマホでどの様に見えるかを確認できる…

コメント

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

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

最近の記事

PAGE TOP