現在の接続環境は
です

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

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

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

CSSファイル圧縮

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

所要時間目安：約2分

This session is using　 IPv4 　is established in

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

目次に行く･戻る

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

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

  • 本日
  • 週間
  • 月間
  1. 間違いメールと迷惑メールとフィッシング詐欺メール判断方法

    コンタクトフォーム 1PV

    お問い合わせは以下よりお願いします。 お問い合わせメールフォーム お問い合わせメールフォーム お問い合わせ IPアドレスは上記ページ訪問にて記録されます。 もしくは以下よりお願いします。 お問い合わせ…

    もっと読む

  2. 2025年4月1日から「車庫証明ステッカー」廃止、交付手続きは従来通り 1PV

    これまで1991年に導入された車庫証明の車の貼り付ける車庫証明ステッカーシールは廃止されます。車のナンバーから車庫証明の有無が確認できるようになったためのようです。ただし、新車購入時や中古車購入時など…

    もっと読む

  3. プラリシート補修前ステアリングエクストレイルV字部分全体

    車の内装インパネ破損修理にプラリペアとプラリシートがおすすめ 1PV

    車の内装インパネやあバンパーなどFRP樹脂やABS樹脂などのプラスチック製品の破損時に簡単に接着剤よりも強力にくっつく補修剤があることを知りませんでした。よく内装のインパネなどを剥がして配線処理などを…

    もっと読む

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

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

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

    もっと読む

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

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

    もっと読む

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

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

    もっと読む

  1. 間違いメールと迷惑メールとフィッシング詐欺メール判断方法

    コンタクトフォーム 1PV

    お問い合わせは以下よりお願いします。 お問い合わせメールフォーム お問い合わせメールフォーム お問い合わせ IPアドレスは上記ページ訪問にて記録されます。 もしくは以下よりお願いします。 お問い合わせ…

    もっと読む

  2. 2025年4月1日から「車庫証明ステッカー」廃止、交付手続きは従来通り 1PV

    これまで1991年に導入された車庫証明の車の貼り付ける車庫証明ステッカーシールは廃止されます。車のナンバーから車庫証明の有無が確認できるようになったためのようです。ただし、新車購入時や中古車購入時など…

    もっと読む

  3. プラリシート補修前ステアリングエクストレイルV字部分全体

    車の内装インパネ破損修理にプラリペアとプラリシートがおすすめ 1PV

    車の内装インパネやあバンパーなどFRP樹脂やABS樹脂などのプラスチック製品の破損時に簡単に接着剤よりも強力にくっつく補修剤があることを知りませんでした。よく内装のインパネなどを剥がして配線処理などを…

    もっと読む

カーメンテナンスWAKO'S

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

メルカリ招待コード：

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

英語ですと、「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

【AmazonスマイルSALE】！


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

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

Windows10サポート終了まで

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

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

パーマリンクURLを自動一括リダイレクト方法htaccessにて

サイトやホームページのURLはパーマリンクURLといい唯一無二のアドレスになります。そのサイトURLのパーマリンク設定URLをサイト移転などをした際に、記事数やホームページのURL数が多いとリダイレク…

もっと読む

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

草取りを楽にする防草シート

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

草取りのコツと防草シート効果で草が生えてこないようにする

これから、夏にかけて雑草や草が生えてきます。 （しかも1周間でかなりの成長をします。）そんな時は草取りがとっても大変になってしまいます。 草取りのコツとしては、 草取り鎌を使用すると結構簡単に根っこか…

もっと読む

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

伝えたいこと 備忘録 治療

肩こりにオススメ電気マッサージ器2種類と保坂尚希プロデュース製品など

現代人だけではなく昔から肩こりや体中のコリには皆さん悩まされるところではないでしょうか。 これまでに使用していたTHIRIVE社製の電気マッサージ器が頭部分の接着が取れてしまいうまく電動の振動が伝わら…

もっと読む

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

高梨沙羅選手イモトアヤコ似でなく相武紗季似になってきた

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

高梨沙羅さん綺麗になって相武紗季さん似になった気がする。

もう言わずと知れた女子スキージャンプ（ラージヒルジャンプ）で超有名人である高梨沙羅選手です。 最近テレビを見て、あれっ、ものすごくキレイになったなぁと思いました。そして、2014年に行われた冬季オリン…

もっと読む

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

YouTube

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

YouTube動画が重い時や遅い時に遅くならない簡単解決方法(続)

以前の記事にYouTubeの動画が重い時や遅い時に、ページの表示速度やサイト自体が重くなってしまわないようにする方法を記載しました。ですが、WordPressにおいてのショートコード化で動画IDのクイ…

もっと読む

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

最善策

AFFINGER4Pro WordPress テーマ 伝えたいこと 備忘録 時事ネタ

テーマ選びは何が最善策なのか？迷う時はどうした良いのか！？

人生において迷うことは多々あると思います。絶対にあります！！と言い切れますよね。 生まれてから義務教育を終えて高校受験からどの高校に行こうかなどの時が人生においての初めての最善策を選択するのに迷うこと…

もっと読む

あなたが訪問してから

⏰ 0 秒経過 🎉

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

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

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

おすすめ！！

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

詳細ページへ

No.1シェアAmazon

おすすめ2

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

詳細ページへ

楽天市場

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


カウントダウンタイマー

おすすめの記事一部広告


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

Multiplex 広告

Total506


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

目次に戻る

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

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

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

目次に戻る

目次に戻る

コメントを閉じる

comment

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


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