こんにちは。 一休.comの開発基盤を担当しています、akasakas です。
今回は、画像最適化配信サービスであるimgixを宿泊・ レストランサイトに導入して、 画像最適化・サイトスピード改善につなげたお話をしたいと思います。
ここでお話しする内容
- サイトスピードという観点での一休が抱えていた課題(の一部)
- imgixの特徴とそこでできる解決策
- imgix導入の効果
- imgix導入をする上で大変だったこと
- これから画像最適化を考える人たちへ
- まとめと感想
- おまけ(与太話)
諸注意
imgixを導入して、画像最適化という面でサイトスピード改善につながりましたが、 サイトスピードという観点で一休が抱えている課題はまだまだあります。 imgixを導入すれば、サイトスピードは万事解決！！！という話ではありませんので、悪しからず。
サイトスピードという観点での一休が抱えていた課題(の一部)
画像最適化ができてなかったため、サイトスピードが遅かった
画像の最適化ができてなかったことが大きな原因の一つでした。
一休というサイトの特性上、ホテル・旅館・レストランの画像を綺麗に見せたいというのが前提としてあります。 ホテル・旅館・レストランの高級感をユーザーに伝えたいため、画像サイズが大きい&高品質な画像を取り扱っています。
サイズ・転送量の大きい画像を扱っていることがサイトスピード低下の大きな原因となっていました。 無駄なリソースの削除をして、画像最適化・サイトスピード改善につなげたかったというのが背景としてあります。
今まで画像最適化ができてなかった結果、サイトスピードが遅くなり、ユーザーにご不便をかけていたのを改善して、より快適に使ってもらいたいという思いから画像最適化プロジェクトが始まりました。
imgix導入前のPageSpeed Insightsのスコア
imgix導入前のPageSpeed Insightsのスコアが以下になります。
宿泊
[補足] 宿泊のキャプチャについては2018/01/19時点のもので、厳密にいうと画像最適化だけでなく、他にもいろんなボトルネックがありましたが、スコアが低い大きな原因は画像最適化の部分でした。
レストラン
imgixの特徴とそこでできる解決策
上記の課題を解決するためにimgixを導入しました。 imgixは画像最適化に特化したCDNサービスというイメージです。 国内でimgixの導入企業として有名なのが、日本経済新聞社さんですね。
個人的に思うimgixの特徴としては以下が大きいと思います。
- 拡張子自動判別
- 自動圧縮設定
- ロスレス圧縮
- ストレージサービス連携(Amazon S3/Google Cloud Storage)
imgixのAPI Referenceなどに詳細が記載されていますが、こちらでも簡単に触れてみます。
拡張子自動判別
imgixの画像URLパラメータに auto=format でjpegの画像もブラウザによってwebpなどに変換してくれます
自動圧縮設定
imgixの画像URLパラメータに auto=compress で自動で圧縮してくれます
ロスレス圧縮
ロスレス圧縮が可能な画像に対して、 lossless=0 とすれば、ロスレス圧縮されます
lossless=1 ではないというのが地味に罠でした。
ストレージサービス連携(Amazon S3/Google Cloud Storage)
画像の移行をする上で、これが大変ありがたかったです。 imgixではストレージサービスを指定するだけで画像のの最適化・配信ができます。
一休ではAmazon S3に画像コンテンツを格納しているので、 S3バケットの指定と、Access Key ID/Secret Access Keyを設定すれば、 imgixから画像が参照できるというところまでできました。
既存資産(一休でいうS3)をそのまま使えたので画像移行がスムーズに行うことができました。
before:S3バケットをみるCDNサービスを
after:imgixに切り替えたというイメージです
URLの変更はありましたが、そこは気合いと根性でアプリケーション側を直しました。
ストレージサービス連携はS3だけでなく、Google Cloud Storageにも対応しています。
imgix導入の効果
PageSpeed Insightsのスコアは宿泊・レストラン共に大きく改善されたのがわかります。
宿泊
before(再掲)
after
beforeのキャプチャについては2018/01/19時点のもので、厳密にいうと画像最適化だけでなく、他にもいろんなボトルネックがありましたが、スコアが低い大きな原因は画像最適化の部分でした。imgixの導入で20〜30点ほどスコアが改善されました。
レストラン
before(再掲)
after
画像転送量
ある画面でimgix導入前後の画像転送量比較が以下になります。
before(imgix導入前)
after(imgix導入後)
10MB近く削減されています。 imgix導入前は全く最適化できてませんでした。 そもそも10MB越えの画面はどうなんだ？という疑問もありますが。
上記の例が最も画像転送量を削減できましたが、他の画面でも軒並み画像転送量を抑えることができたので、導入の効果は非常に高かったと感じます。
imgix導入をする上で大変だったこと
技術面
- 既存の資材(S3)を使えたので、切り替えが楽だった
- URLの変更はあったけど、そこは気合いと根性で直した
ので、正直なところ技術面で大変だったことはなかったです。
技術面以外
実はこっちの方が大変でした
英語でサポートと契約などのやり取り
imgixは日本の代理店がありません。 最初にサポートに確認したら「ない！！！」って言われて、そのメールをそっ閉じしたのは今思えば、懐かしいです。 英語が堪能な帰国子女さんのお力を借りて、なんとかVolume Pricingの交渉ができました。
料金見積もり
見積もりが難しかったです。 実際に１ヶ月フリーで使わせてくれて、そこで正確な見積もりをとりました。 imgixのサポートは丁寧で優しかったです。
導入の承認
CDN費用のコストカット＋技術的な改善ができることを説明して、導入の承認を得ることができました。
これから画像最適化を考える人たちへ
実際にimgixを導入しましたが、自分の進め方がよくなかったと思う部分が多々ありました。 反省/振り返りを含めて、どうやって導入を進めればよかったかというのを考えてみました。 あまりテッキーな話ではないです。仕事の進め方的な話がメインです。
ポイント
imgixに限らず、導入効果とコストカットの説明ができれば、導入できると思いました。
技術選定
候補としては以下の3つがあげられるのかなと思います
- imgix
- Cloudinary
- Fastly Image Optimizer
技術比較
一休の場合、画像最適化をポイントとしました。 imgix や Cloudinary の方が画像最適化を主眼に置いたサービスであるため使いやすい印象を覚えました。
移行難度
既存資産(S3や一休の画像配信構成)をそのまま使えるという点でimgixの方が移行をスムーズに進めることができるという印象がありました。 なので、この時点でほぼほぼimgixに決めてました
移行コスト
正直、imgixの見積もりしかとってなかったです。 理想は3つそれぞれ見積もりを出して、比較するべきだったというのが反省点です。
imgixの導入コストが既存より安いor同等であればOKかなと思ってました。 技術的改善が見込めれば、導入前後のコストが同等でも問題ないだろうという考えがあったからです。
その他細かい話
あと細かいところで 特定画面だけimgixを部分導入して、詳細なBefore/Afterの効果比較を実施し CDN費用のコストカット＋技術的な改善(画像最適化)ができることを説明して、導入の承認を得ることができました。
まとめと感想
imgixを導入して、画像最適化&サイトスピードを改善ができました。
モダンなインフラに乗っかると、割と簡単にベストプラクティスを実践できるのだなというのが正直な感想です。 既存の環境でチューニングをがんばっていた諸氏には感謝をしつつ、未来のためにはどんどん新システムに塗り替えていきたいですね。
これから画像最適化を考えているエンジニアの方々にとって、この記事が少しでも参考になれば幸いです。
諸注意をもう一度
imgixを導入して、画像最適化という面でサイトスピード改善につながりましたが、 サイトスピードという観点で一休が抱えている課題はまだまだあります。 imgixを導入すれば、サイトスピードは万事解決！！！という話ではありませんので、悪しからず。
おまけ
レストランの導入が想定よりも遥かに速かった
当初は宿泊のみ先行して対応するという話で進めてて、レストランの対応は冬ぐらいになる
はずでしたが、
やっぱりモダンな技術とその効果が気になって、飛びついたご様子です。
技術調査・契約・見積もりなどのめんどくさいことをやって、慎重に事を進めてきた自分としては おいしいところだけをかっさらったレストランのエンジニアをみて、イラッときたのは内緒です。
でも、レストランのサービスが改善できたのでOKです
最後に
imgix移行に協力して頂いた方々に感謝
- インフラ面で協力してくれたエンジニア
- 英語のやりとりが発生した中で、サポートして頂いた帰国子女の営業さん
- 画像の変更で作業ワークフロー上、大きな影響を受けたにも関わらず、ご理解とご協力を頂いたデザインさん
この場を借りて、御礼申し上げます。
