Ubie Discoveryでプロダクト開発をしている@jimboです。
今回は症状検索エンジン「ユビー」のCSSファイルを改善した話を紹介します。
きっかけ
ある日、社内のSlackにこんなメッセージが流れてきました。
自分の中ではある程度レイアウト関連やテキスト関連にグループ化して書くようにはしていたのですが、こういう類のものは、個人個人が気をつけるのではなく、自動的に並び替わるほうがいいに決まっています。
いうことで、Stylelintとstylelint-config-recess-orderを導入することにしました。Pull Requestでは、400を超えるCSSファイルに変更が入り、そのほとんどがCSSプロパティの並びが変わっただけという内容でした。
ビルドした結果を変更前と比べてみると…
と、ここで、この変更によって、ビルドファイルのサイズが全体的に減ってることに気づきました。
もともとの目的は「CSSプロパティがきれいに並ぶようにしたい」ということだったので、今回の内容でこれだけ減るのはちょっと予想外でした。
削減できたサイズは、1ファイルあたり1〜2%程度とわずかなので、ページの読み込み時間を著しく改善させるものではありません。ですが、Stylelintを導入して自動修正しただけなので、とても手軽にファイルサイズを減らすことができました。
なぜ減った？
CSSプロパティを並び替えただけなので、ファイルサイズ自体は変わらないはずです。しかし、gzip圧縮をすることでその差が生まれます。
gzip圧縮は、ファイル内に同じデータパターンが繰り返し存在していると、それらをより短い表現に置き換えることでデータを圧縮します。今回のケースでは、CSSプロパティを特定の条件で並び替えることで、同じテキストのパターンがより多く現れるようになり、その結果、1〜2%のファイルサイズ削減につながったと考えられます。
このことを確認するために、簡単な実験をしてみました。
今回のプルリクエストで変更されたCSSファイルの1つを選び、gzip-size-cliを使って変更前のものと比較してみます。
| ファイルサイズ | gzip圧縮後のファイルサイズ | |
|---|---|---|
| 並び替える前 | 17.6 kB | 3.96 kB |
| 並び替えた後 | 17.6 kB | 3.87 kB |
すると、やはりgzip圧縮後は2%程度ファイルサイズが減っていることが確認できました。
まとめ
CSSプロパティを特定の順序に並び替えることで、gzip圧縮のファイルサイズをわずかですが小さくできることがわかりました。これだけではページ読み込みの速度を大きく改善するような効果はないかもしれませんが、どんな小さな最適化もやったほうがいいですし、パフォーマンス最適化は小さな改善の積み重ねが大切です。
Stylelintを導入するだけで手軽に実装できるので、ぜひ試してみてください。
Discussion