現在の接続環境は
です

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

Windows10サポート終了まで
¥1,650 (2024/11/30 16:49時点 | Amazon調べ)

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

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

CSSファイル圧縮

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

所要時間目安:2

This session is using  IPv4  is established in

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

2025年2月10日 (月曜日)↓における週間月間人気記事トップ3は?↓

  • 本日
  • 週間
  • 月間
  1. キッチンシンクからドブ臭い異臭原因解決方法

    キッチンシンク下がドブ臭い下水臭い原因と解決方法 2PV

    意外と知られていないのが、キッチンシンクからいつもと違う臭いや異臭や下水臭い強烈な匂いが出てくることがあります。いくらシンク内をカビキラーやキッチンハイターなどの塩素系漂白剤などできれいにしても・・・…

    もっと読む

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

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

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

    もっと読む

  3. おすすめCANONプリンター複合機

    おすすめプリンター複合機CANON・EPSONでもなくBROTHERかHP(ヒューレット・パッカード) 1PV

    現在、多くの家電量販店や価格ドットコムなどで人気機種ランキングや売上数ランキングなどでじょういを占めているCANONとEPSONのインクジェットプリンター。しかし、よくランニングコストを考えると、長期…

    もっと読む

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

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

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

    もっと読む

  2. カーナビテレビが見れなくなったICカードが正常に動作しませんでした

    ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 35PV

    本日ではなく昨日になってしまいますが、それまでカーナビで地デジ対応のナビで突然エンジンをかけなおしたら・・・・・・。 「ICカードが正常に動作しませんでした。販売店にお問い合わせください。」 なんてい…

    もっと読む

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

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

    もっと読む

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

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

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

    もっと読む

  2. カーナビテレビが見れなくなったICカードが正常に動作しませんでした

    ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 35PV

    本日ではなく昨日になってしまいますが、それまでカーナビで地デジ対応のナビで突然エンジンをかけなおしたら・・・・・・。 「ICカードが正常に動作しませんでした。販売店にお問い合わせください。」 なんてい…

    もっと読む

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

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

    もっと読む

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

目次に行く・戻る

メルカリ招待コード:

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

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

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

バレンタインまであと…VALENTINEはどんなPresent(プレゼント)でどのように過ごされますか?

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

おすすめ!!

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

おすすめ2

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

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

0

カウントダウンタイマー

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

🎉 Counting Up! 🎉
Loading...
SNS終わりの始まり

SNS 伝えたいこと 備忘録

SNS終わりの始まり…。それは何なのか。ソーシャルとは何なのか。

SNS(ソーシャル・ネットワーキング・サービス)・・・。 個人情報保護法・・・。 個人情報保護法ができたはずなのに、SNSというソーシャル・ネットワーキング・サービスと横文字を連ねたことにより比較的抵…

もっと読む

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

ショーン・マクアードル川上HPスクショ

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

ショーン・マクアードル川上さんなぜ経歴詐称なんてしたのかなぁ

昨年(2015年4月)から報道ステーションの木曜日のコメンテーターとして、 毎週出演されていました。(2016年1月からは水曜日のコメンテーター)ちょっと、 ハーフチックな顔立ちと経営コンサルタントら…

もっと読む

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

https化

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

HTTPS化(SSL)しなければならないのかなぁ。自動でなって…。

つい本日GoogleのブログサービスBloggerのダッシュボードを見たところ、 全員が対象で4月末にはhttpsに変更になるようです。 去年から有名な海外SEO情報ブログの記事では拝見していましたが…

もっと読む

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

セキュリティ 伝えたいこと 備忘録 時事ネタ

マイナ保険証は必要なのか。マイナンバーカードへの運転免許証1本化も必要なのか。

■マイナ保険証は民間ならばとうに潰れる欠陥カード マイナンバーカードとマイナ保険証は利便性もセキュリティもまったくないために、普及しない。実際、マイナ保険証は総点検後もトラブルが絶えず、2024年6月…

もっと読む

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

弔事

伝えたいこと 備忘録

弔辞 感動した。感動する。

これは、私の姪っ子が読んだ弔事です。訂正です)甥っ子です。ちょっと感動したので名前を伏せて掲載させて頂きます。

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

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

LINE インターネット セキュリティ 伝えたいこと 備忘録 時事ネタ

クリス松村さん迷惑メールで個人情報流出疑惑抱く「1社登録したらその企業の釣りメール」

言わずもがなしれた方のクリス松村さんですが、一社にメールアドレスを登録した後にフィッシングメールが送信されてくるようになったとのこと。記事の内容には「釣りメール」とありますが、調べてみるとフィッシング…

もっと読む

あなたが訪問してから

0 秒経過 🎉

あなたが訪問してから

0 秒

おすすめの記事一部広告

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

Multiplex 広告

Total445


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

目次に戻る

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

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

目次に戻る

目次に戻る


コメントを閉じる

comment

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


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