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

投稿日:


本日の人気記事BEST10

所要時間目安: 約 2

CSSファイル圧縮

カスタマイズ ツール 伝えたいこと 備忘録 時事ネタ

えー、
ブログやホームページを運用されている方であれば、一度は気にしたことのあるはずのファイル圧縮についてです。

英語ですと、「Minify」と言います。

中でもAMP対応する場合には、CSSのファイルサイズが50KBまでと決まっています。

多くの場合、なんのCSSコードだったのか分かるようにコメントアウトしたり後でカスタマイズして重複していたりすることもあると思われます。



スポンサーリンク

目次に戻る

ファイル圧縮と言っても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というサイトが良いと思われます。

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

 

なぜか?

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

 

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

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

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

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

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

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

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

が、追加しません。

 

なぜか?

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

スポンサーリンク

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

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

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

 

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

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

-カスタマイズ, ツール, 伝えたいこと, 備忘録, 時事ネタ

関連記事一部広告

スポンサーリンク

+ クリックで展開します

おすすめ!!

加圧シェイプで24時間無意識運動状態が可能!! 引き締め効果で魅力的なシルエットをサポート!! 運動している時だけでなく、仕事やプライベート就寝中にも!! 通気性がよく、体の動かしやすい伸縮性のある素材です!! 常に体が引き締まって、着心地いい!! 毎日着たい方用にセットも充実!!

女性必見のバストアップにおすすめ!!

マンガでの商品説明を販売ページに採用しています。 商品のメリットや良さが伝わりやすいです。 ★知名度と信頼度!ニュースアプリや芸能人ブログでも話題! (インスタグラム SmartNews yahoo アメーバ crooz 楽天) ●知名度が高く購入率の高い商品です。 ●ニュースサイトの紹介でも話題となり、有名タレント、モデル等にも使用して頂きブログなどでも紹介されている信頼度の高い商品です。 ●まとめ買いが多いのが特徴です。

関連記事

市川海老蔵妻小林麻央さんの病状について

伝えたいこと 備忘録 時事ネタ 治療

小林麻央さんの病状も気になるが北斗晶さんの病状も気になる…。

私の従兄弟のお嫁さんが数年前に片方の乳房、そして今年両方の乳房を全摘手術…。再従兄弟も2年前に乳がんが発覚し片方の乳房を全摘手術したこともあり・・・・・・。 先日、夫の市川海老蔵さんが会見を開いて、 ・・・続きを読む

参院選池上彰と今井絵理子対談池上無双

伝えたいこと 備忘録 時事ネタ

池上彰氏参院選に続いて都知事選で池上無双炸裂か!!

池上彰さんと言えば、もう知らない人はいないと言っても過言ではないと思います。 私がはじめて池上彰さんを知ったのは、NHKでの「こどもニュース」をされていらっしゃった時からです。 その頃から大人にも分り・・・続きを読む

テレビリモコンHUIS REMOTE CONTROLLERリモコンカスタマイズ

ツール 伝えたいこと 備忘録 時事ネタ

テレビリモコンが壊れたり無くしたり見つからない場合HUISで対処方法

テレビリモコンって、意外とというか結構な確率で見つからないことってありますよね。そんなことで何度か夫婦ゲンカになったり、家族ゲンカになったり、兄弟ゲンカになったりと責任のなすりつけ合いになってしまうこ・・・続きを読む

コメント欄を開閉式にする方法

STINGER PLUS+ Stinger6 Stinger7 WordPress カスタマイズ 伝えたいこと 備忘録

Stinger6,Stinger5,StingerPLUS+コメント欄を開閉式スライドにする方法

前々から気にかけてどうにか出来たらいいなぁ…。なんて思っていたコメント欄です。 コメント欄を非表示にしてしまうというのもありかなぁ。と思ったこともありましたが、 いくつかのブログにてコメント欄が開閉式・・・続きを読む

目次に戻る

よろしかったらシェアよろしくお願いします。



この記事が良かったら
いいね!お願いします(#^.^#)

WordPressデビュー津々浦々の
最新情報をお届けします

言えないことはTwitterで!!



  • この記事を書いた人
  • 最新記事

izumi

プロフィールページ詳細

はじめまして、izumiの旦那です。医療ミスにより長胸神経麻痺になってしまい若干の障害がありブログをさせていただいています。共同運営(しばらくは単独になると思います。)になりつつありますがよろしくお願いいたします。

Follow Me !

Copyright© WordPressデビュー津々浦々 , 2019 All Rights Reserved Powered by AFFINGER5.