【WordPress初心者必見】3動作でCSSを簡単圧縮してサイトの表示スピードを格段に上げる方法!

Sponsored Links
Sponsored Links

こりぁ~びっくらこいた

プログラミングの知識がぜんぜんない僕にとっては、サイトを軽くしたりするのは、WordPressのプラグイン任せというものだったが、つい先日ferretさんのメルマガを読んでいたら、CSSの圧縮の記事が!

それでもって、「CSS & JavaScript Compressor」というサイトにCSSの記述をそのままコピーし圧縮ボタンをクリックした所、一気にサイトの表示速度がアップ!

嬉しすぎて涙目っす笑

ということで簡単にCSSを圧縮してサイトの表示スピードを早くしてくれる方法をご紹介!

CSS & JavaScript Compressor

まずはこちらの「CSS & JavaScript Compressor」にアクセス!

css1-min

そしたらこんな画面が出てきますね!

次に、右上のスペースにCSSを丸ごと貼り付けましょう!
css2-min

貼り付けたら、左下の「Compressor」ボタンをクリックして圧縮!

すると、その下のスペースに圧縮後のCSSをが表示されます!圧縮と言ってってもスペースやコメントの文字を削除するような感じらしいです!

css3-min

そしたら、圧縮後のCSSをそのままコピペして自分のCSSに反映しましょう!

とっても簡単です!!!

どのくらい圧縮されたのか・・・

先程の画像をもう一度見てみましょう!

css3-min

左上のInputが圧縮前のサイズです。

75424 Bytesと記載がありますね!

そして、圧縮後のサイズがその右下のOutputです!

60803 Bytesと記載があります!

そして、右側の、圧縮前と圧縮後のCSSの間に

14621 Bytes saved 80.61%

と記載があります!

つまり、

75424 – 60803 = 14621

14621バイト圧縮できたということです!

80.61%というのは、圧縮前が100%としたら、19.39%が圧縮されたということです!

約20%も圧縮できたなんて嬉しすぎます!!!

しかも自分のCSSコピペ→圧縮ボタンクリック→圧縮後のCSSコピペという3回しか動作をしていません!

これだけで明らかにサイトの表示スピードが早くなりました!!

ぜひこれを見たあなたもやってみてほしいです!

Sponsored Links
Sponsored Links