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%　?

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

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJvle7ISI61CSsbqLeKsaL3oUEsFCOQe0be7Sy-IRfvQJKt60W4QoMfobl-sD21smba52yCCQPE_zR9ZbTHaqBhi-9MdHWlzb4E-euBWqCpc7cEOg8I6bFs9ID0Sd2afvX1QqhEREqvT4I/s1600/csg-51eee64417067.png) no-repeat right 0;
}
.entry-content a[href ^="http://p--q.blogspot."] {
padding-right: 18px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJvle7ISI61CSsbqLeKsaL3oUEsFCOQe0be7Sy-IRfvQJKt60W4QoMfobl-sD21smba52yCCQPE_zR9ZbTHaqBhi-9MdHWlzb4E-euBWqCpc7cEOg8I6bFs9ID0Sd2afvX1QqhEREqvT4I/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJvle7ISI61CSsbqLeKsaL3oUEsFCOQe0be7Sy-IRfvQJKt60W4QoMfobl-sD21smba52yCCQPE_zR9ZbTHaqBhi-9MdHWlzb4E-euBWqCpc7cEOg8I6bFs9ID0Sd2afvX1QqhEREqvT4I/s1600/csg-51eee64417067.png) no-repeat right 0;}
.entry-content a[href ^=http://p--q.blogspot.]{padding-right:18px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJvle7ISI61CSsbqLeKsaL3oUEsFCOQe0be7Sy-IRfvQJKt60W4QoMfobl-sD21smba52yCCQPE_zR9ZbTHaqBhi-9MdHWlzb4E-euBWqCpc7cEOg8I6bFs9ID0Sd2afvX1QqhEREqvT4I/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJvle7ISI61CSsbqLeKsaL3oUEsFCOQe0be7Sy-IRfvQJKt60W4QoMfobl-sD21smba52yCCQPE_zR9ZbTHaqBhi-9MdHWlzb4E-euBWqCpc7cEOg8I6bFs9ID0Sd2afvX1QqhEREqvT4I/s1600/csg-51eee64417067.png) no-repeat right 0;}
.entry-content a[href ^="http://p--q.blogspot."]{padding-right:18px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJvle7ISI61CSsbqLeKsaL3oUEsFCOQe0be7Sy-IRfvQJKt60W4QoMfobl-sD21smba52yCCQPE_zR9ZbTHaqBhi-9MdHWlzb4E-euBWqCpc7cEOg8I6bFs9ID0Sd2afvX1QqhEREqvT4I/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:関連記事一覧を自動的に表示させるガジェットの画像のサイズを指定する