サイト表示速度を高速化とAMPの為にCSSファイルをMinify圧縮する方法

CSSのファイル圧縮を今回思い立ったのは何を隠そう（何も隠していませんがσ(^_^;)）、AMP対応しているとCSSが基準の50KB以上になってしまったりして超越することがあるからです。

（普通、超えることがあるからです。ですよね、日本語の表現として。）

さておき・・・・・・。

CSSは多くの場合かなりのファイル圧縮（minify）が可能です。

私の場合ですが、思うようにしようとした所AMP用のCSSが50.02KBとわずかに超えてしまいました。

そして、もちろんAMPバリゲーターでERRORとなりました。

なので、少しだけ妥協してCSSを削っていました。

でも、なんとなくユーザビリティに欠くなぁ。

と思い、しょうがない圧縮しよう。

という経緯です。

HTMLとJavaScriptのファイル圧縮方法（サイト）は後述するとして、まずはCSSのファイル圧縮サイトです。

上記したようにいくつかありますが、

以下のMinify your CSSというサイトが良いと思われます。

Minify your CSS

Online CSS Minifier/Compressor. Free! Works with Media Queries. Provides an API. Simple Quick and Fast!

Minify your CSS

なぜか？

それは、私が使用してCSSのファイル圧縮後に適用してみてもデザインが崩れることもなく思い通りに表示されたからです。

こちらでCSSのファイル圧縮をしてみた所50.02KBだったものが、30.8KBにまでなりました。

計算上では、約39%も圧縮できました。

いかにコメントアウトや重複してしまっていたコードがあったのかが分かります。orz

同じように通常表示のサイトのCSSもファイル圧縮したら・・・・・・。

もっと圧縮率は高いと思われますがしません。

なぜかは秘密です。
（特に秘密にする必要はありませんがm(__)m）

これだけファイル圧縮できたので、他にもCSSを追加することも出来るようになりました。

が、追加しません。

なぜか？

そ

・

れ

・

は

追加する予定も追加するものもないからです。
ただ単にそれだけです。

最後にHTMLの圧縮サイトとJavaScriptの圧縮サイトを紹介したいと思います。

HTML圧縮サイトは以下になります。

Compress HTML Source Code

Online Compress HTML tool can process an html document and compress the HTML source code by removing unwanted white spaces, tabs, comments. By applying Compress HTML tool to your HTML code will improve page load time and faster email delivery

Compress HTML Source Code

 

JavaScript圧縮サイトは以下になります。

Closure Compiler Service

// ==ClosureCompiler==// @compilation_level SIMPLE_OPTIMIZATIONS// @output_file_name default.js// ==/ClosureCompiler==

Closure Compiler Service