浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

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

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

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

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

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

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

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

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

 

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

使いやすかったです。

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

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

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

 

  • この記事いいね! (0)