Blogger:圧縮ツールを使ってCSSとJavaScriptを圧縮する

前の関連記事:Blogger:Googleサイトの利用をやめて表示速度を改善する


少しでも表示速度の向上を図るためにCSSやJavaScriptを圧縮します。
(2016.7.26追記。CSSはClosure Stylesheets、JavaScriptはClosure Compilerで圧縮することにしました。linuxBean14.04(128)Closure StylesheetsでCSSを圧縮するlinuxBean14.04(126)Closure CompilerでJavaScriptを圧縮する、参照。)

圧縮ツールを使ってJavaScriptを圧縮する


Blogger:Googleサイトの利用をやめて表示速度を改善するでSyntaxHighlighterとfleXcrollにかかわるJavaScriptとCSSを一つにまとめました。

テキストファイルに書き出すとこれらは58,104 バイトあります。

これを圧縮して小さくします。

/packer/を使ってまずJavaScriptを圧縮します。

<script>~</script>でくくった部分を丸ごと圧縮します。

Base62 encodeとShrink variablesのオプションはともにチェックしておきます。

(2015.5.16追記。Shrink variablesにチェックをつけると動かない場合があり、またBase62 encodeをつけないほうが圧縮率が高いときもありましたので、逐一判断したほうがよいでしょう。)


上の空欄にコードをペーストして「Pack」ボタンをクリックします。

圧縮したコードがしたの欄に出てくるのと同時にその下に圧縮率がでてきます。

compression ratio: 44177/45839=0.964

たった96.4% ?

もともと圧縮されている部分もあるためか、そんなに効果はないようです。

問題は圧縮後のコードがちゃんとこれが動くかどうかです。

、、、動きません。

既に圧縮されている部分はそのまま使うことにして圧縮されていないSynataxHighlighterのブラシファイルの部分だけ圧縮することにしました。

、、、動きません。

SyntaxHighlighterのソースコードを含めてブラシファイルと一緒に圧縮してもだめです。

そもそもなぜかダウンロードしたSyntaxHighlighterのソースコードファイルは動かないので動かないのは当然の結果かもしれません。

もう断念しようかと思いましたがBase62 encodeのチェックをはずしてjsファイル別に圧縮するとうまくいきました。

58,104 バイトが54,397 バイトに減りました。

6.4%の圧縮率です。この程度ならあんまり速度向上効果はないかもしれません。

圧縮ツールを使ってCSSを圧縮する


今度は<style>~</style>でくくった部分を丸ごと圧縮します。

CSSの圧縮はClean CSSを使います。

(2015.5.16追記。いろいろ圧縮ツールが増えていました。CSSの圧縮はMinify and Compress CSSになっておりパラメータ設定が不要になりました。)


CompressionはHighestを選択します。


Optionsはよくわからないのでデフォルトのままです。

51,627 バイトになりました。最初に比べて11%の減少です。

ChromeとFirefox、iOS Safariは問題なく動作しましたが、IE8とIE10ではスクロールバーがでずにすべてが表示されてしまうようになってしまいました。

IE10のツール→F12開発者ツール、でflexcrollで検索してみるとflexcroll_heightクラスのoverflow: visibleが適用されているのがわかります。




Blogger:Googleサイトの利用をやめて表示速度を改善するでIEへのfleXcrollの適用は諦めたのでこのoverflow: visibleのCSSはfleXcrollが適用されたあとのdivのみに適用するようにします。
.flexcroll_height{
 overflow: visible !important;
}

.flexcroll {
 overflow: visible !important;
}
としました。

これでIEでも普通の横スクロールバーが表示されるようになりました。

H23.12.31追記。.flexcrollではなく.flexcrollactiveに変更しました。
  SyntaxHighlighterにfleXcroll(6)またIE8の表示がおかしい参照)

テンプレートのHTMLの<skin>~</skin>の中身も圧縮してしまう


テンプレートのHTMLの<skin>~</skin>の中身もClean CSSでごっそり圧縮してしまいます。

/* Variable definitionsから/* Contentの上行までのコメントアウトの部分はBloggerのテンプレートのCSSの変数定義になりますのでいじらずに置いておきます。

圧縮するのは/* Contentから]]></b:skin>の上行までです。

この部分をテキストファイルに抜き出すと15,446 バイトあります。

上でやったのと同じように圧縮します。

圧縮後11,733 バイトに減りました。24%の減少です。

後になって気づきましたがBlogger:テキストリンクにアイコンをつけるで設定したCSSがちゃんと動いていないです。これは一番最後にまた考えます。

さらにまたIE8の背景がおかしくなっていることに気づきました。

テストブログにテンプレートを復元しても症状が再現しないのでなにか別の原因でしょう、、、

(2013.09.26追記。)

IE8の表示がおかしくなる問題は圧縮とは関係ありませんでした。詳しくはBlogger:IE8で背景の色が消える問題(4)また発生。今回は原因がはっきり判明。へ。

効果の程ははっきりせず。可読性は落ちてメインテナンスはしにくくなります。



GTmetrixで計測してみましたが改善度はよくわかりません。

可読性が悪くなってメインテナンスがしにくくなったことは確かです、、、

できるところは圧縮してみる


効果の程ははっきりしませんが、どうせするなら今後編集する予定のないところをすべきです。

ということで今度はテンプレートのHTMLの<b:template-skin>~</b:template-skin>の中を圧縮します。

<![CDATA[の下行から]]>の上行までをClean CSSで圧縮します。

、、、これはダメです。サイドバーの中身が左のかなたに飛んでいってしまっています。

今度はBlogger:ページビュー設定(8)jQueryで「自分のページビューを追跡しない」設定ページをスマートにで使ったjquery.cookie.jsを/packer/で圧縮してみます。

これはBase62 encodeとShrink variablesのオプションをともにチェックして圧縮しても大丈夫なようです。

2,242 バイトが1,400 バイトになりました。38%の圧縮です。

Clean CSSはCSS3に未対応のようだ


Blogger:テキストリンクにアイコンをつけるで設定したCSSがちゃんと動いていないです。
.entry-content a[href ^="http"] {
padding-right: 18px;
background: url(http://1.bp.blogspot.com/-rAAliblflUQ/Ue7m_lPt5LI/AAAAAAAAECM/xtQ6MGfutYE/s1600/csg-51eee64417067.png) no-repeat right 0;
}
.entry-content a[href ^="http://p--q.blogspot."] {
padding-right: 18px;
background: url(http://1.bp.blogspot.com/-rAAliblflUQ/Ue7m_lPt5LI/AAAAAAAAECM/xtQ6MGfutYE/s1600/csg-51eee64417067.png) no-repeat right -66px;
}
.entry-content a[href $=".jpg"] {
padding-right: 0px;
background: none;
}
.entry-content a[href $=".JPG"] {
padding-right: 0px;
background: none;
}
.entry-content a[href $=".png"] {
padding-right: 0px;
background: none;
}
もとはこうなっていた部分が以下のように圧縮されていました。
.entry-content a[href ^=http]{padding-right:18px;background:url(http://1.bp.blogspot.com/-rAAliblflUQ/Ue7m_lPt5LI/AAAAAAAAECM/xtQ6MGfutYE/s1600/csg-51eee64417067.png) no-repeat right 0;}
.entry-content a[href ^=http://p--q.blogspot.]{padding-right:18px;background:url(http://1.bp.blogspot.com/-rAAliblflUQ/Ue7m_lPt5LI/AAAAAAAAECM/xtQ6MGfutYE/s1600/csg-51eee64417067.png) no-repeat right -66px;}
.entry-content a[href $=.jpg],.entry-content a[href $=.JPG],.entry-content a[href $=.png]{padding-right:0;background:none;} 
1行目で設定したアイコンを2行目や3行目で上書きするはずなのですがその上書きができてていません。

「"」が省略されているのが怪しいと思ったので「"」だけ復活させてみるとちゃんと動きました。
.entry-content a[href ^="http"]{padding-right:18px;background:url(http://1.bp.blogspot.com/-rAAliblflUQ/Ue7m_lPt5LI/AAAAAAAAECM/xtQ6MGfutYE/s1600/csg-51eee64417067.png) no-repeat right 0;}
.entry-content a[href ^="http://p--q.blogspot."]{padding-right:18px;background:url(http://1.bp.blogspot.com/-rAAliblflUQ/Ue7m_lPt5LI/AAAAAAAAECM/xtQ6MGfutYE/s1600/csg-51eee64417067.png) no-repeat right -66px;}
.entry-content a[href $=".jpg"],.entry-content a[href $=".JPG"],.entry-content a[href $=".png"]{padding-right:0;background:none;}
これはバグなのかCSSの仕様の違いなのかわかりません。

意外と知らない!?CSSセレクタ20個のおさらい|Webparkをみるとこの特定の属性(値)を持つ要素に適用する、というのはCSS3からのセレクタ機能のようなので、Clean CSSはCSS3に未対応なのかもしれません。

可読性を落とす代償の割りに速度向上効果はなさそうですのでテンプレートのHTMLのskinの圧縮はやめようかなと思いましたが、この部分以外は問題なさそうなのでこの部分だけ修正して使うことにしました。

参考にしたサイト


JavaScriptやCSSの外部ファイルに手を加えサイトの表示速度を改善する3つの方法|Webpark
ここのお勧めのものを使いました。

/packer/
お勧めのJavaScript圧縮ツール。

Clean CSS - A Resource for Web Designers - Optmize and Format your CSS CSS Formatter and Optimiser/Optimizer (based on CSSTidy 1.3)
お勧めのCSS圧縮ツール。CSS3には未対応のようです。

GTmetrix | Website Speed and Performance Optimization
解析結果のTimelineにあるWaterfallでなにが足をひっぱっているのかがわかります。

意外と知らない!?CSSセレクタ20個のおさらい|Webpark
Clean CSSはこれの17,18,19は正しく圧縮できませんでした。

次の関連記事:Blogger:関連記事一覧を自動的に表示させるガジェットの画像のサイズを指定する

PR

7 件のコメント:

  1. p_qさん、
    はじめましてm(__)m

    御記事に以下の様に記載されていらっしゃいますが、


    ------------引用--------------------------
    /* Variable definitionsから/* Contentの上行までのコメントアウトの部分はBloggerのシステムに必要ですのでいじらずに置いておきます。
    ------------引用--------------------------

    どのようにBloggerのシステム上影響があるのでしょうか?

    私は、
    コメントアウトの部分を削除して外部CSS化していますが、
    テンプレートの崩れ等は今のところありません。

    ≫http://sekirarablog.blogspot.jp/2013/07/blogger-css.html

    ≫http://sekirarablog.blogspot.jp/2013/09/bloggercss.html


    Bloggerのテンプレートデザイナーを使うことはできなくなってしまいますが…。


    それとも、
    テンプレートによって、
    /* Variable definitionsから/* Contentの上行までの部分は

    重要性が変わるのでしょうか?



    よく分からずにカスタマイズしてうまく出来たので良しとしてしまっていますが、

    /* Variable definitionsから/* Contentの上行までの部分は、

    どの様にBloggerのシステムに必要なのか(関与している)教えて頂けますでしょうかm(__)m。


    Bloggerのテンプレートデザイナーが使えなくなってしまうということでのシステムに関係しているとうことでしょうか?


    何卒ご教授の程よろしくお願い申し上げます。

    返信削除
  2. ご指摘ありがとうございます。そういう意味でシステムと書いたのですが誤解を招く表現でしたね。修正しておきます。
    単にテンプレートの設定に使われているだけなのでBloggerのシステムがおかしくなるということはないと思います。
    ためしにテストブログで上記の場所を削除してみましたが動作に問題はありませんでした。
    テンプレートで使われている背景や枠などは全て消えて真っ白になります。
    IE8ではSyntaxHighlighterにfleXcroll(4)IEだけ$(window).loadのタイミングが違うらしいでは適用されていなかったfleXcrollが動作してしまってスクロールバーがでなくなっています。この場合ieというクラスが追加されるのでさらにoverflow: autoを上書きすれば解決できると思います。
    テンプレートデザイナーでは幅とレイアウト設定以外は設定できなくなりました。
    モバイルサイトを無効にするとこの/* Variable definitionsから/* Contentの上行までの部分がBloggerに書き換えられてしまってIE8で背景の一部が表示されなくなってしまいましたが、この部分が最初からなければ影響がないかもしません。(Blogger:IE8で背景の色が消える問題(2)遂に原因を解明
    いま確認したらIE8でまた同じ問題が起こっていますね、、、あらら。

    返信削除
  3. Bloggerブログ CSS外部化する方法。ページ表示速度を高速化 | せきらら白書~備忘録~
    を読ませていただきました。
    (先に読んでからコメントすべきだったのですがすみません。)
    /* Variable definitionsから/* Contentの上行までの部分を削除するのでなく、外部のCSSファイルには保持しているようですので特に問題ないと思います。
    この部分を普通のCSSで書き直したのかと早とちりしてしまいました。
    この部分はコメントアウトになっているのでClean CSSにかけると全て削除されてしまいます。

    返信削除
    返信
    1. p--q様
      ご返信ありがとうございます。

      >/* Variable definitionsから/* Contentの上行までの部分を削除するのでなく、
      >外部のCSSファイルには保持しているようですので特に問題ないと思います。


      とありますが、
      私のブログに於いては/* Variable definitionsから/* Contentの上行までの部分を削除を削除して外部ファイル化しています。
      外部のCSSファイルには保持されていないとおもうのですが…。

      外部ファイル化CSSのアドレスを参照してみてくださいm(__)m
      https://googledrive.com/host/0ByGfTGP3BREvcmloWTFXMlo2ekk/
      こちらになります。

      /* Variable definitionsから/* Contentの上行までの部分もないですよね?


      なので、
      Bloggerのテンプレートデザイナーを使用しないのであれば、
      保持していなくても問題ないのではないでしょうか…。

      間違った解釈でしたらご指摘お願い致します。
      度々のコメント失礼します。m(__)m

      削除
    2. たびたび失礼しました。
      そこまで確認していませんでした。
      テンプレートデザイナーを使わないというか、Bloggerのテンプレートを使わないのであればとくに問題はないのではないでしょうか。
      削除された部分の中身をざっとみた限りテンプレートの背景とか色とかフォントとかしか書いていない感じです。
      例えばこのブログではブログタイトルにRock Saltというフォントを使用していますが、GTmetrixのWaterfallで確認すると毎回フォントをthemes.googleusercontent.comからダウンロードしていることがわかります。
      そういうのをテンプレートを使わずどうするかは私はまだわかりませんのでテンプレートのお世話になることになります。

      削除
    3. Blogger:IE8で背景の色が消える問題(1)どのあたりが原因かはわかったでみたようにモバイルサイトを無効にするとVariable definitionsで定義されその下のCSSで$(名前)で参照されていた部分が値が代入された状態に変更されるのでその場合はテンプレートを使っていてもVariable definitionsの部分を削除してしまっても影響がないかもしれません。
      https://googledrive.com/host/0ByGfTGP3BREvcmloWTFXMlo2ekkをみさせていただくとVariable definitionsを参照している$(名前)の変数がみあたらないのでVariable definitionsを削除しても影響がなかったのだと思います。
      モバイルサイトを無効にするとBloggerのシステムが Variable definitionsの参照をやめる理由はよくわかりませんが、この部分はIE8での表示やモバイルサイトの表示に関係している可能性があります。
      Bloggerブログ CSS外部化する方法。ページ表示速度を高速化 | せきらら白書~備忘録~のモバイルサイトをiOS Safariからみさせていただくと文字が全部縦書き1行になっていますのでここにVariable definitionsを使わない影響がでている可能性があります。
      IE8では正常にみえました。

      削除
    4. p--q様
      度々のコメント返信ありがとうございます。

      >iOS Safariからみさせていただくと文字が全部縦書き1行になっています

      についてですが、
      モバイルにての確認は私もしていますが、
      /* Variable definitionsの部分があっても同様の表示でした。

      またモバイルでの見え方ですが、
      モバイルを通常の縦の状態で見ると1行づつですが、
      モバイルを横にすると(幅広の状態で閲覧)、
      普通に表示されます。
      (右サイドバーは表示されませんが)

      また今、
      /* Variable definitionsから/* Contentの部分を追加したCSSにて、
      モバイルでの表示を確認したのですが最初は同じく1行づつの表示ですが、
      モバイル自体を横にすると上記と同様にモバイル版として通常に表示されます。

      なので、
      >モバイルサイトを無効にすると…、

      というのも関係ないのではないでしょうか?
      (私は無効にはしていませんし…。)


      私も自分で行ったカスタマイズですが、
      影響があるとなると考えなおさなければならいと思いますので…。


      CSSも簡素化は以下方法で行いましたよ
      http://sekirarablog.blogspot.jp/2013/09/bloggercss.html

      何か参考になれば幸いなのと、
      /* Variable definitionsの部分の有無の違い(影響)についてお互いにわかればいいですね(^^♪


      度重なるコメント誠に恐れ入りますm(__)m

      削除