Online YUI Compressor に勝利しました!

ついに、SnowballがOnline YUI Compressor に勝利しました!

どんなかんじ?

今回は、CSSを用意して、それをそれぞれで圧縮するという形にしました。そもそもなぜこんなことになったのかは、CSSファイルの圧縮でサイトの表示速度はどれだけ変わるのか実験ここをみて、もし勝ったら「さらに圧縮できますよ」とアピールできるのではとおもったからです。

勝負はどうしたの?

では、勝負の結果です。まず圧縮したコードです。圧縮したのはこのコードです。

.white-space{
    white-space: nowrap;
    background :#FFF!important;
    color : #FFFFFF !important ;
     margin:3px 3px 5px 3px;
}
@media screen and (max-device-width:480px){
    .black , .button {
        color:black;/*OK*/
        margin: 0px;
        opacity:0.9;
        padding:3px 3px 3px 3px;
    }
}

それぞれの結果はこんな感じです。まずOnline YUI Compressorです。

.white-space{white-space:nowrap;background:#FFF!important;color:#fff!important;margin:3px 3px 5px 3px}@media screen and (max-device-width:480px){.black,.button{color:black;margin:0;opacity:.9;padding:3px 3px 3px 3px}}

続いてSnowballです。

.white-space{white-space:nowrap;background:#fff!important;color:#fff !important ;margin:3px 3px 5px}@media screen and (max-device-width:480px){.black,.button{color:#000;margin:0;opacity:.9;padding:3px}}

どこが違うのかですが、まずpaddingとmarginが最適化されていません。次にカラーネームも最適化されていません。また、サイズは結果的にOnline YUI Compressor が217B、Snowballが200Bになりました。

終わりに

今回の対決では、Online YUI Compressorの方が優れている点も見つけました。今後、それを行っても問題がないことを確認次第アップデートして追加したいと思います。