CSSを1行にしてみた、速くなるのか？

スマートフォンサイトの制作では、パフォーマンスが非常に重要です。「mediaqueri.es」などをみていると、パフォーマンスを改善する為に幾つかHTMLとCSSが１行で書かれているサイトに遭遇します。そこでパフォーマンスが向上するか検証してみたく、実際に「SwapSkills」のCSSをツールを利用して圧縮しました。結果ですが、下記のようになりました。ツールは、「codebeautifier」を利用しました。

結果のスクリーンショット

結果
ファイルサイズは19.924KBから10.657KBに「-53.5%」でした。

体感

自分の体感としては、たしかに速くなりました。納得の出来るレベルです。SwapSkills のサイトは画像が重くて鈍い時があったのですが改善されました。

問題

• 
  メンテナンス性之欠如：
  下記のスクリーンショットをみていただくと分かるのですが、更新を頑張ろうとは思いません。
  
• 
  コードのミス：
  コードを最適化する際に、CSS3のアニメーションが何処かへいってしまいました。これは修正が必要です。また、ボタンの色も何処かへいってしまいました。これも修正が必要です。

ソースのスクリーンショット

まとめ

１行で記述すると、たしかにウェブサイトのパフォーマンスはよくなります。ただし、ツールを利用した場合などは、最適化後にブラウザで挙動などをチェックして最適化によって表示などが崩れていないかチェックが必要です。また、最適化後のメンテナンスのワークフローも考えないといけません。

今回は簡単なテストでしたが、次回はもうちょっとパフォーマンスの測定やData URIなどを検証することと、モバイル向けの高速化ができるか挑戦してみます。