Loading…

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

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

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

CSSファイル圧縮

所要時間目安:2

This session is using  IPv4  is established in

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

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

  • 本日
  • 週間
  • 月間
  1. パナソニックカオスバッテリーS-115

    エクストレイルT32おすすめバッテリーPanasonicカオスバッテリー 3PV

    すべての車でバッテリーが搭載されています。特にアイドリングストップ車以降現在主流になりつつある電気自動車などではバッテリーの性能がとても重要になってきます。今回は日産エクストレイルT32においておすす…

    もっと読む

  2. キーシリンダー

    TOYOTAキーレスリモコンの設定方法とキーナンバー(キー番号) 2PV

    この度は(今回は?)、プラスチックの経年劣化により車のキーレスリモコンキーの送信機側(トランスミッター)のみをなくしてしまった場合です。(まだスマートキーやインテリジェンスキーと言われる前のキーレスリ…

    もっと読む

  3. ヘッドライトクリーニングにダイソーアルカリ電解水で黄ばみクスミが綺麗に 1PV

    ヘッドライトは経年劣化で黄ばんできてしまいます。特にここ10年くらいの車のヘッドライトはプラスチック製のヘッドライトカバーになってきています。昔のようにガラスではありませんので、より経年劣化が目立って…

    もっと読む

  1. パナソニックカオスバッテリーS-115

    エクストレイルT32おすすめバッテリーPanasonicカオスバッテリー 3PV

    すべての車でバッテリーが搭載されています。特にアイドリングストップ車以降現在主流になりつつある電気自動車などではバッテリーの性能がとても重要になってきます。今回は日産エクストレイルT32においておすす…

    もっと読む

  2. キーシリンダー

    TOYOTAキーレスリモコンの設定方法とキーナンバー(キー番号) 2PV

    この度は(今回は?)、プラスチックの経年劣化により車のキーレスリモコンキーの送信機側(トランスミッター)のみをなくしてしまった場合です。(まだスマートキーやインテリジェンスキーと言われる前のキーレスリ…

    もっと読む

  3. ヘッドライトクリーニングにダイソーアルカリ電解水で黄ばみクスミが綺麗に 1PV

    ヘッドライトは経年劣化で黄ばんできてしまいます。特にここ10年くらいの車のヘッドライトはプラスチック製のヘッドライトカバーになってきています。昔のようにガラスではありませんので、より経年劣化が目立って…

    もっと読む

  1. パナソニックカオスバッテリーS-115

    エクストレイルT32おすすめバッテリーPanasonicカオスバッテリー 3PV

    すべての車でバッテリーが搭載されています。特にアイドリングストップ車以降現在主流になりつつある電気自動車などではバッテリーの性能がとても重要になってきます。今回は日産エクストレイルT32においておすす…

    もっと読む

  2. キーシリンダー

    TOYOTAキーレスリモコンの設定方法とキーナンバー(キー番号) 2PV

    この度は(今回は?)、プラスチックの経年劣化により車のキーレスリモコンキーの送信機側(トランスミッター)のみをなくしてしまった場合です。(まだスマートキーやインテリジェンスキーと言われる前のキーレスリ…

    もっと読む

  3. ヘッドライトクリーニングにダイソーアルカリ電解水で黄ばみクスミが綺麗に 1PV

    ヘッドライトは経年劣化で黄ばんできてしまいます。特にここ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==

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

Windows10スタートアップフォルダ

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

Windows10でスタートアップ登録してアプリ自動起動する方法すべてのユーザと自分のみがユーザの場合

かれこれWindows10がリリースされてあと約2ヶ月で早いもので2年になってしまいます。昨年の夏にはAnniversaryUpdateのメジャーアップデートがあり、その前にはリリースされた2015年…

もっと読む

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

エアコンが冷えないエバポレーター仕組み

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

エアコン冷えない原因はエバポレーターガス漏れ

今年の夏になっての出来事です。今年の冬までは正常に動いていた(動作していた)エアコンが、クーラーがきかないのです。一切冷えない…。エアコンで冷房ではなく逆に暖房を入れてみようとこの暑い夏に暖房にスイッ…

もっと読む

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

Pixlr(ピクセラ)

PC ツール ブラウザChrome 伝えたいこと 備忘録

無料おすすめな画像編集オンラインソフトPixlr(ピクセラ)がすごいっ

画像編集ソフトと言えばフォトショップ(Photoshop)が超メジャーなアプリケーションかと思われます。他にもオススメとしてはGIMPや名前は今回紹介するタイトルと同じですが、ちょっと違うたしかピクセ…

もっと読む

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

東京オリンピックパラリンピック

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

リオ五輪金メダル銀メダル銅メダル毎動画集(NHK)

リオオリンピック(リオ五輪)も閉会式を終えて、 次期開催都市である東京の都知事小池百合子さんにセレモニーが行われました。また、安倍晋三内閣総理大臣もマリオにふんしてトンネルから現れるというサプライズ?…

もっと読む

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

パソコン

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

パソコンの異音原因はCPUファンかHDDが2大原因で解決方法

パソコンも長く使っていると、人間と同じように経年劣化してきます。去年の年末くらいからパソコンからカラカラというのでしょうかブーンというのでしょうか…。そんな異音が聞こてきていました。

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

トップページのアイキャッチ画像を丸くする方法

WordPress テーマ 伝えたいこと 備忘録

トップページの記事のイメージキャプチャ画像を丸くする方法

えーっと…。 カスタマイズというものは、 やってもやってもどこか抜け目があってしまうというものなのか…。(´~`ヾ) ポリポリ・・・ 関連記事のイメージ画像を丸くする方法 zenbackのイメージ画像…

もっと読む

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

おすすめの記事一部広告

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

Multiplex 広告

おすすめ!!

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

おすすめ2

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

Total293


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

目次に戻る

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

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

目次に戻る

目次に戻る


コメントを閉じる

comment

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

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