【CSS】CSSMiniferでCSSを圧縮してアプリの負荷を軽減してみる

  • 2019年4月26日
  • CSS

一つのファイルにCSSを大量に書くと、当然そのページは読み込みが遅くなり、UIとかも不安定な状態で表示されます。

自分の今修正しているアプリも、漏れなくその多量のCSSの影響を受けております。今更外部ファイルに書くわけにはいかないし

どうしましょうかと模索していた時にこのCSSMiniferを見つけました。

CSSMiniferって何ですかというと、CSSを圧縮して数行にまとめてくれる便利ツールです。CSSを圧縮することで、ページの読み込み

速度を改善させることができます。数百行にわたるCSSでも、このツールにかかれば5~6行で完結させることができます。

使い方はシンプルで、圧縮したいコードを左側のテキスト欄にコピペした後にminifyをするボタンを押すだけ。こんな感じに

仕上がります。(といっても詰め込みすぎて一見すると何書いてあるかわからない。)

 

後はこれをファイルにコピペするだけ。他にも色々なCSSコンプレッサーがありますが、CSSMinifyが一番ごちゃごちゃしていなくて

使いやすかったです。

というか他のツールだと微妙に記述が改変されていたりする(ダブルクォーテーションが消されていたりする)ので、最初からこいつ選んでおけばよかったんじゃないか・・・?と思いました。

webアプリの速度改善の場合大抵はJQueryやスクリプト読み込みの順番を修正するのが王道なのですが、CSSをたくさん書いた場合は

こっちに目を付けてみるのも正解ですね。正しく使えばアプリのリファクタリングに貢献してくれるのではと思います。

 

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG