CROOZ TECH BLOG

~読んだらわかるSHOPLISTの裏側~

CROOZ TECH BLOGとはクルーズ株式会社の開発チームが技術について共有するブログです
開発の中での発見や知識を広めてオモシロカッコイイ〇〇をツクリます。

FastlyCDNのImage Optimizerを使ってSHOPLIST.comをWebP対応させた話

こんにちは。クルーズ株式会社CTOの鈴木です。

今回はFastlyCDNのImage Optimizerを使ってSHOPLIST.comをWebP対応させた話をしたいと思います。

www.fastly.com

背景

背景としては主に二つで、一つ目は画像フォーマットをWebPに対応させることにより通信のトラフィック量を減らすこと、二つ目はEC2インスタンス上にNginxとsmall_lightで構築されているサムネイル生成処理をImage Optimizerに代行させることで、EC2インスタンス上の変換処理プログラムやミドルウェアの保守をなくすことです。

前者については、実は1年前から気にはなっていた技術要素だったのですが、当時はまだiOS版のサファリが未対応であったため、まだ導入先でいいよねという判断をしていたのですが、2020年の9月にiOS版サファリもWebP対応することが発表され、いよいよ導入時期に達したということで今回導入に踏み切りました。当時、「Can I Use?」 で調べたところ、Usage としては85%ほどでした。

 

後者については副次的なものではあるものの、中身がブラックボックス化してきているうえ、コアコンピタンスの思想でいえば積極的にアウトソースするものだと考えその両方が実現できる仕組みとしてFastlyCDNのImage Optimizerに着目し導入に至りました。

基本的な仕組み

本来FastlyCDNのImage Optimizerの仕組みではHTTP HeaderのAccept-Encodingでリクエスト元ブラウザがWebPに対応しているかどうかで画像を自動変更して返す仕組みがあり、設定をされたCDNを経由するだけでプログラム側では何もせずにWebP変換されたコンテンツを使うことが可能ですが、今回は以下の理由からImage Optimizerの機能ではなく、WebP対応とそうではないオリジナルの画像URLを出しわけるようにしています。

CSS内のパーツの一部として画像を読んでいる箇所が多く、すべてを自動変換できない。

②WebPの圧縮率を一律にすると商品画像が目に見て分かるレベルで劣化するケースがある。

とくに後者は悩まされました。特に見る人×ディスプレイの性能×商品素材の材質によって商品画像が汚く感じる画像があり複数商品カテゴリの商品画像を様々な世代の端末、社内の様々な年齢の人に見てもらい、アンケートを取った結果として、現実的に圧縮率一元は不可という結論になりました。

結論、ブラウザと商品画像の特性に応じ、オリジナル画像、WebPロスレス画像、WebP圧縮画像をサーバ側で出しわけてHTMLを生成する形を取り、その後リリースまでの間に同じように複数商品画像を社内の複数のユーザにいろいろな端末で確認して違和感のない状態になっていることを確認して、その後リリースとなりました。

まとめ

まずトラフィック量についてはざっくりですが3割ほどの削減となりました。ただ、これは月変動があるのでもう少し期間を見て改めてどこかで共有できればと思います。

またブラウザや端末シェアの変更により今後は対応ブラウザが増えるためトラフィック量については何もしなくてもある程度は下がっていくことが見込まれそれも含めまたどこかで共有できればと思っています。

※ネイティブアプリについては両OSとも対応済です。

副次的な目的だったEC2インスタンス上で行っている独自のサムネイル作成処理については停止できたものの、それ以外の画像関連の処理がまだ動いており、完全停止には至っていないいないため完全に停止まではいかなかったですが、処理の大部分をFastry上に持って行けたことによってサーバリソースが大幅に落とせたためインスタンス台数やサイズを落とせてコスト上は抑えることはできました。残りの処理の書き換えについてはリファクタリングとして実施していきたいと考えています。