Loading…

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

CSSファイル圧縮

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

本日の人気記事BEST10

所要時間目安:2


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

CSSファイル圧縮

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

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

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

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

スポンサーリンク

アドセンス336pxPC閲覧記事下表示1つ目コード

よく読まれている人気記事一覧

ファイル圧縮と言っても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==


アドセンス336pxPC閲覧記事下表示1つ目コード

おすすめの記事一部広告

    Multiplex 広告

カスタマイズ, ツール, 伝えたいこと, 備忘録, 時事ネタ」同じカテゴリーの記事一覧


関連記事

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

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

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

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

もっと読む

インフィード広告アドセンス

ブログカード

Stinger6 Stinger7 WordPress カスタマイズ 備忘録

プラグインなしでブログカードを新規タブで開く方法とコード

先日、 WordPressにおいてブログカード(内部リンク用)を作成するショートコードのphp関数コードを紹介しました。   WordPressブログカード作成方法 昨今、ShereHTML…

もっと読む

インフィード広告アドセンス

ステロイド軟膏アンテベート軟膏強さ

伝えたいこと 備忘録 治療

帯状疱疹かと思ったけれど蕁麻疹で治らない時にデルマクリン軟膏とアンテベート軟膏

以前に帯状疱疹かと思い皮膚科を受診しました。 そしたら、ちょっと診断まではつかないなぁ。ということでステロイド軟膏と神経障害性疼痛に処方されるリリカという薬が処方されました。 それから1ヶ月弱・・・・…

もっと読む

インフィード広告アドセンス

おすすめSSD

PC カスタマイズ 伝えたいこと

SSD換装におすすめSSDは1TBのCrucialのMX500

もう数年前にはSSDは結構な国内PCメーカーの上位機種パソコンには搭載され始めてきていました。私のパソコンはもう8年目なので、そこそこ古い部類かと思います。ですが、途中途中にメモリの増設(8GB×2枚…

もっと読む

目次に戻る

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

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



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

せきららの
最新情報をお届けします

言えないことはTwitterで!!



目次に戻る

目次に戻る


コメントを閉じる

comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください