loglog

『おもしろい!』が発見できる個人ブログを。

【WEBツール紹介】CSS軽量化でブログの読み込み速度が早くなる

広告

こんばんは。オガサワラです。

この前ですね。

Googleでモバイルの読み込み速度を調べてみたのですよ。

こちらでテストできます。↓↓

testmysite.withgoogle.com

すると6秒から7秒ほど掛かりさらに読み込み時間の長さによる離脱率が30%以上あると表示されまして…、これはいかんとCSSを軽量化しました。

そうすると…。

f:id:studio_one:20170716222853p:plain

まあ許容範囲だろうというところまでは持っていけました。

CSS軽量化するために便利なツール

このブログ何気に2年以上やってます。

たまーに思い出したようにカスタマイズしては放置を繰り返しコピペからのコピペで、気付いた時にはまるで違法建築のようなコードの山が築かれていました。

まさにCSSの九龍城です。

何の規則もなくなんとなーくコードを積み上げてきていたのでいつか整理しないといけないな~と思っていたわけですが…、本当にめんどう…。

でも、こんな有難いツールがありました。

cssminifier

cssminifier.com

こちらでCSSコードを軽量化しました。

ワンクリックで軽量化できます。

f:id:studio_one:20170716221911p:plain

ただしコピペで積み上げたコードなので整合性がしっかりとれていないためか圧縮すると上手く機能しないコードもあったので、そういうコードに関しては↓↓のツールを使用して軽量化しても機能するように変更を加えました。

liveweave

liveweave.com


f:id:studio_one:20170716221941p:plain


確認しながら編集できるのでとても便利です。


あと最近では画像も圧縮して使うようにしています。(昔の記事は…)

optimizilla

こちらのツールが物凄く便利です。

optimizilla.com

f:id:studio_one:20170716222139p:plain

20個までなら一度にアップロードして一度にダウンロードできるし何よりお手軽。

まとめ

今回紹介したツールはすべてWEBツールなので、気軽に使用できます。

最近、読み込み遅いな~と感じている人はぜひぜひ試してみてください。

最後まで読んで頂きありがとうございました。