過大なネットワーク ペイロードの回避
弊社で運営する「持ち家計画」というサイトがあります。
最近リビルドが終わって新しいデザインに生まれ変わりました。
そこでPageSpeed Insightsなどでサイトパフォーマンスの評価も測定するようになったのですが、
なかなかどうして辛い結果になります。
そこで１項目ずつ要因を潰していくわけになるのですが、
まず、モザイクデザインの画像が重い、というのが目に付きました。
たとえはファーストビューのこの部分、
中央を透明にくり抜いたフレームタイプのpng画像、minify後で224KBありました。
マルチデバイス対応ということで、2480x1228もあるんで妥当なサイズではあるんですが。
他にも、同じ様に縦横サイズがでかい、ついでにファイル容量もでかい（最大500KB超のも）というのが数ファイルあったので、このモザイク画像をなんとかしようとなりました。
PNG形式からSVG形式に変更
諸般の事情で縦横サイズは現状のまま（2480x1228！）と決まりました。
ではパターンを簡略化するか？境界の色数節約する？解像度落とすか？とああだこうだ考えたのですが、ひたすら手間がかかります。正直、効果も疑問だし結果も見えないので気が進みません。
幸い、素材データはパスとパターンを組み合わせたaiデータで作ってありました。
「とりあえず画像形式変えてみるか」と横着の一心で、SVGで書き出し直しました。
そしたらなんと44KBに！
パターンとか外部ファイル化して読んでいるわけでもなく、ちゃっんと期待通りに画像でした。
SVGOMGでminifyをかけると25KBまで落ちました。
この時点で1/10までファイル容量が下がってます。
横着がベストソリューションを生んでくれました。
gzip圧縮で更に軽く！
持ち家計画ではgzipを利用しているので、XMLベースのベクター画像であるSVG画像は圧縮効果が期待できます。
実際にアップしてみたところ、なんと4.7KBに。
１〜２割くらい軽くなるといいねなんて話てたんですが、これは期待以上でした。
※ファイル名は前述と異なります。
結果：驚異的なサイズダウン
224KB（PNG）→ 44KB（SVG）→25KB（SVGminify）→4.7KB（gzip）
効果がでた理由（想像）
- 単調なカラーデザインだった
- 座標指定できるタイプのシンプルなパターンが使われてた
- PNGは縦横サイズが大きいと容量も爆上がりするから比較しやすかった
画像によって適した形式があるのは承知の通り。
ただ今までPNGで作ってた画像をSVGで作る事も考えていいかもしれません。
普及のネックだったIE問題も解決できるので、使いみちが多そうです。
作成上詰まったところ
実は画面サイズによってはパスの隙間が目立つことがあありました。座標をあわせてもズレたので、小数点の丸め方とかなのかな？
今回は背景に薄い黄色の全塗りレイヤー置いて、隙間があっても目立たなくすることで解決しました。
PSI評価は？
1点くらいあがったかなあ？
引き続き地道にがんばります。