えー、
ブログやホームページを運用されている方であれば、一度は気にしたことのあるはずのファイル圧縮についてです。
英語ですと、「Minify」と言います。
中でもAMP対応する場合には、CSSのファイルサイズが50KBまでと決まっています。
多くの場合、なんのCSSコードだったのか分かるようにコメントアウトしたり後でカスタマイズして重複していたりすることもあると思われます。
スポンサーリンク
人気記事
車のキーナンバー確認方法。キーレス紛失や壊れた時
137.9k件のビュー
ECUをリセットする方法。アイドリング不安定だったのでしょうがなく
100.5k件のビュー
Windows10,Windows8.1プロダクトキー確認方法
75k件のビュー
Windows10でエラーコード0x800705b4の対処方法
67.2k件のビュー
スロットルポジションセンサー調整で不安定なアイドリング調整
38.7k件のビュー
車から異音の原因。カラカラ、カタカタ、コトコトなど…。
37.9k件のビュー
Office2010・2013でプラダクトキー紛失して確認・再発行してもった方法
37.1k件のビュー
ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法
35.3k件のビュー
ハンドルのセンターがズレている時の直し方タイロッドエンド調整による方法
34.6k件のビュー
カーメイトのエンジンスターターでエラー15表示と対処方法
29k件のビュー
ファイル圧縮と言ってもHTMLやJavaScriptやCSSと大きく3つのファイルがあると思います。
その各々においてファイル圧縮をするツールやサイト、プラグインなど、
いくつかあります。
しかし、！！
HTMLなど下手なサイトやツールなどでファイル圧縮（Minify）しても、表示が崩れたりしてしまいます。
サイト表示速度測定サイトのGTMatrixなどでもMinifyされたCSSなどの提案があります。
ですが、
GTMatrixでのファイル圧縮（minify）はあまりオススメしません。
なぜなら、これまでに何回か使用した際にデザインが崩れてしまったことがあるからです。
CSSのファイル圧縮を今回思い立ったのは何を隠そう（何も隠していませんがσ(^_^;)）、AMP対応しているとCSSが基準の50KB以上になってしまったりして超越することがあるからです。
（普通、超えることがあるからです。ですよね、日本語の表現として。）
さておき・・・・・・。
CSSは多くの場合かなりのファイル圧縮（minify）が可能です。
私の場合ですが、思うようにしようとした所AMP用のCSSが50.02KBとわずかに超えてしまいました。
そして、もちろんAMPバリゲーターでERRORとなりました。
なので、少しだけ妥協してCSSを削っていました。
でも、なんとなくユーザビリティに欠くなぁ。
と思い、しょうがない圧縮しよう。
という経緯です。
HTMLとJavaScriptのファイル圧縮方法（サイト）は後述するとして、まずはCSSのファイル圧縮サイトです。
上記したようにいくつかありますが、
以下のMinify your CSSというサイトが良いと思われます。
なぜか？
それは、私が使用してCSSのファイル圧縮後に適用してみてもデザインが崩れることもなく思い通りに表示されたからです。
こちらでCSSのファイル圧縮をしてみた所50.02KBだったものが、30.8KBにまでなりました。
計算上では、約39%も圧縮できました。
いかにコメントアウトや重複してしまっていたコードがあったのかが分かります。orz
同じように通常表示のサイトのCSSもファイル圧縮したら・・・・・・。
もっと圧縮率は高いと思われますがしません。
なぜかは秘密です。
（特に秘密にする必要はありませんがm(__)m）
これだけファイル圧縮できたので、他にもCSSを追加することも出来るようになりました。
が、追加しません。
なぜか？
そ
・
れ
・
は
追加する予定も追加するものもないからです。
ただ単にそれだけです。
最後にHTMLの圧縮サイトとJavaScriptの圧縮サイトを紹介したいと思います。
HTML圧縮サイトは以下になります。
comment