現在の接続環境は
です

記事内にプロモーションが含まれています。

プロモーションを含みます

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

CSSファイル圧縮

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

所要時間目安：約2分

This session is using　 IPv4 　is established in

この記事は2017年1月17日のものです。現在は状況が異なる可能性がありますのでご注意ください。

目次に行く･戻る

2025年4月2日 (水曜日)本日の人気記事トップ１０

2025年4月2日 (水曜日)↓における週間月間人気記事トップ３は？↓

  • 本日
  • 週間
  • 月間

  1. エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 4PV

    車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…

    もっと読む

  2. アイドリングストップシステム異常警告灯表示対処方法 4PV

    2010年前後以降の車に搭載されていることの多いアイドリングストップシステム。各自動車メーカーによって呼び名は異なりますが、機能としては信号待ちが長い時や停止時間が長い時などに勝手に（自動的に）アイド…

    もっと読む

  3. 純正シートベルトバックル

    シートベルトがきついのでシートベルト延長（バックル延長） 4PV

    すべての車に付いているシートベルト…。 ですが、体型や車種によってシートベルトのバックルが短いとシートベルトを締めた際にきつくて運転自体がしにくくなってしまいます。 それでは、せっかくの安全装置である…

    もっと読む

  1. エンジンスターターリモコン

    カーメイトのエンジンスターターでエラー15表示と対処方法 34PV

    夏冬に特に重宝するのが、エンジンスターターです。 メーカーはCARMATEやCOMTECユピテルなど各社ありますが、一番のオススメはリモコンから多くの情報を得ることができるカーメイト製品です。 なぜか…

    もっと読む

  2. エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 24PV

    車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…

    もっと読む

  3. アイドリングストップシステム異常警告灯表示対処方法 23PV

    2010年前後以降の車に搭載されていることの多いアイドリングストップシステム。各自動車メーカーによって呼び名は異なりますが、機能としては信号待ちが長い時や停止時間が長い時などに勝手に（自動的に）アイド…

    もっと読む

  1. エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 4PV

    車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…

    もっと読む

  2. アイドリングストップシステム異常警告灯表示対処方法 4PV

    2010年前後以降の車に搭載されていることの多いアイドリングストップシステム。各自動車メーカーによって呼び名は異なりますが、機能としては信号待ちが長い時や停止時間が長い時などに勝手に（自動的に）アイド…

    もっと読む

  3. 純正シートベルトバックル

    シートベルトがきついのでシートベルト延長（バックル延長） 4PV

    すべての車に付いているシートベルト…。 ですが、体型や車種によってシートベルトのバックルが短いとシートベルトを締めた際にきつくて運転自体がしにくくなってしまいます。 それでは、せっかくの安全装置である…

    もっと読む

カーメンテナンスWAKO'S

今日は2025年4月2日です。

メルカリ招待コード：

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

英語ですと、「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というサイトが良いと思われます。

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

Windows10サポート終了まで

【AmazonスマイルSALE】！


3/28(金)9時から4月1日（火）23時59分まで、「AmazonスマイルSALE」開催予定

3月28日(金曜日) ～ 2025年4月1日(火曜日) 23:59まで

あなたにおすすめな関連記事

2匹のネコ

AdSense インターネット 伝えたいこと 備忘録 時事ネタ

広告単価はWordPressとBloggerどっちが高い？とHTTPS化(SSL化）について…。

もう昨今では知る人ぞ知るGoogle AdSenseという広告配信による収益化？でお小遣い稼ぎや本業とも言えるほどの金額を稼いでいる人も多いようです。（いると言われています。）かく言う私もアドセンス（…

もっと読む

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

AMP化プラグインを使用しないで成功

WordPress カスタマイズ 伝えたいこと 備忘録

プラグイン使わないAMP化対応方法完全版

先日公開させていただいた記事（：AMP化する方法プラグインなしで対応してみる）でWordPressにおいてプラグインを使用しないでなんとかAMP対応できないかなぁ。と思い試行錯誤中です。 先日の状態で…

もっと読む

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

記事上に人気記事表示

WordPress 備忘録

ブログを続ける意味と大切さ

約10年位前にブログ（ウェブログ：webのログ→通称ブログ）が流行り出しました。その頃から私は無料サービスのブログサイトでいくつかブログの運営をしてみました。 でも、 続いても1年もいかなかったように…

もっと読む

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

パンくずリスト

WordPress カスタマイズ カスタマイズ 伝えたいこと 備忘録

パンくずリストで表示したいカテゴリを選択して表示する方法

WordPressでブログを始めてからずっとなんとかならないかなぁ。 と思っていたことがあります。 それは、 パンくずリストが複数のカテゴリを選択して投稿した際には、 英数字（A～Z）から優先されて日…

もっと読む

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

AMP非対応化

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

AMP化対応方法を辞めてみるアクセス解析が不明瞭なので

昨年11月から徐々にAMP対応にしていき12月にはページのみAMP完全対応にしました。 ですが、 Google Analyticsでのアクセス解析の仕方・方法がいまいちわからないというのと、通常ページ…

もっと読む

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

大統領令発令ウェブサイト

インターネット 伝えたいこと 備忘録 時事ネタ

トランプ大統領が大統領令を発令出来る!?アメリカンジョークなWebサービスIs Now Illegal

アメリカのトランプ大統領が就任して間もなく、移民政策やメキシコとの国境に壁を作るなどの大統領令を発令しました。前大統領の元オバマ大統領も就任直後に大統領令にサインをしたのを覚えています。そこで、アメリ…

もっと読む

あなたが訪問してから

⏰ 0 秒経過 🎉

「カスタマイズ, ツール, 伝えたいこと, 備忘録, 時事ネタ」の人気記事

入学入社まであと…入学入社祝いはどんなPresent（プレゼント）でどのように過ごされますか？

ホワイトデープレゼントは以下などの豊富なキャンペーン商品から選ぶと良いと思います。

おすすめ！！

世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう！！ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ！！

詳細ページへ

No.1シェアAmazon

おすすめ2

楽天による季節特集です。それぞれの季節ごとにお得なお買い物商品やお得な旅行商品、その他にもAmazon同様に国内最大の買い物ポータルサイトです。楽天をメインにお買い物されている方はポイントやSPUも貯まりさらにお得に！！楽天カードや宇佐美系列のガソリンスタンドでも楽天ポイントが今では貯まります。それらのポイントを貯めてお得にお買い物や旅行商品その他にもパソコンサプライや車カスタマイズ商品など楽天も充実しています。

詳細ページへ

楽天市場

ブログサービスが始まってから:


カウントダウンタイマー

おすすめの記事一部広告


お小遣い稼ぎにアンケート。

Multiplex 広告

Total507


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

目次に戻る

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

この記事タイトルとURLをコピー

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

目次に戻る

目次に戻る

コメントを閉じる

comment

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


This site uses Akismet to reduce spam. Learn how your comment data is processed.