こんにちは。エンジニアの渡邉です。普段はLIFULL HOME'Sの売買領域のエンジニアチームにて開発を担当しています。好きなGCPのサービスはCloudRunです。
今回は、LIFULL HOME'Sの物件画像を次世代画像フォーマット「WebP」形式に動的変換して配信できるようにした取り組みについて紹介します。
WebPとは
WebP(ウェッピー)はGoogleがWebサイトの表示速度短縮を目的として開発した静止画像フォーマット画像形式のことを指します。
画質の劣化を最小限に抑え、画像サイズを軽くできます。表示速度改善によりエンドユーザーに好影響を与えるため、現在JPEGやPNGに変わる画像形式として注目されています。
WebP自体は2010年に仕様が公表され、多くのブラウザでサポートされています。
WebP導入の背景
サイト上で配信する画像をWebP形式に変換するしくみを導入する主な目的は、コストカットや表示速度改善、ユーザー体験向上のためです。
LIFULL HOME'SにおけるWebPの導入を長らく検討してきましたが、
- 画像変換サーバの基盤刷新
- 主要なブラウザのWebPサポート
という2点において環境が変化したため、導入を進めることができました。
画像変換サーバの基盤刷新
LIFULL HOME'Sでは、物件画像のサイズやクオリティ、フォーマットなどを利用するアプリケーションに合わせて動的に調整する内製の「画像変換サーバ」を用いて画像を配信しています。
もともと私は画像の最適化に興味があり、LIFULL HOME'Sの画像を最適化し、最高の画像をユーザーに届けることを目標にしていました。 そのための地盤として、開発しやすいように画像変換サーバを新基盤に移行していました。
以前紹介した画像変換サーバの基盤刷新についてはこちらをご覧ください。
主要なブラウザのWebPサポート
WebP化を導入しようと考えていたときに抱えていた課題として、主要ブラウザの一部がWebPをサポートしていないことがありました。 当初WebP化を検討していた際にはInternet ExplorerとSafariにてWebP形式をサポートしていませんでした。 LIFULL HOME'Sを利用しているブラウザのうち、Internet ExplorerとSafariの利用率は無視できず、WebPを導入しても中途半端な成果になってしまうことが懸念だったのです。
しかしながら、現在Internet Explorerはサポートを終了し、SafariはWebPをサポートするようになり懸念点が解消しました。
そのため、WebP化の恩恵を強く受けられる算段が立ったので、導入に踏み切ることができるようになりました。
実現方法の検討
今回WebP配信化させるにあたって以下の二択の方法を考えていました。
- すでに存在する画像ファイルを事前にWebP形式にしてそれを配信する方法
- 現在利用しているngx_small_lightを使用した画像変換サーバにて動的に変換させる方法
両者を比較したところ、今回は後者のngx_small_light側で動的に変換することを選択しました。
その理由としては次のような理由がありました。
- ストレージに保存する画像のコストを下げたい
- 多様な環境からのリクエストに対応するため、配信する形式を動的に選択できるようにしたい
工夫した点
今回WebP化することを決めた上で、苦労したことがいくつかありましたので紹介します。
WebP対象外のブラウザからリクエストが来た場合に対する対応
LIFULL HOME'Sを利用されるユーザーは多種多様なため、Internet ExplorerなどのWebPが表示できないブラウザを利用されている可能性があります。
その場合、画像がまったく表示されないサイトになってしまうので、それを回避するためのしくみが必要でした。
今回どのように対応したかというと、Acceptヘッダの中身を見て変換するかを決定するプロセスを設けました。
ChromeなどのWebPを表示可能なブラウザの場合、以下のようなimage/webpをAcceptヘッダに持っています。
image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8
このimage/webpの有無によって元の画像をそのまま返すか、動的に変換したWebPを返すのかを選択しています。
Acceptヘッダに対応した画像フォーマットであればブラウザ側は問題なく表示できます。したがって、利用するアプリケーションはWebPが来る場合とそれ以外の画像形式が来る場合をそれぞれハンドリングする必要なく利用できます。
CloudFrontのキャッシュ条件を変更
LIFULL HOME'Sでは多くの画像を表示するため、負荷を軽減するためにCloudFrontによるCDNキャッシュを採用しています。
今までは画像を取得するURIに対して1:1になる形でCloudFrontにキャッシュできていました。しかしながら、今回の変更により、同一のURIであっても変換されたWebP形式か元の画像形式かの二択になってしまうことが予想されました。
もしWebP形式でキャッシュされていた場合に、Internet Explorerで表示しようとすると画像が表示されないといったことにつながります。それを回避すべくCloudFront側もAcceptヘッダの中身を確認したうえでキャッシュする機構に変更しています。
成果
苦労したこともありつつ、なんとかWebP対応を完了させたことで、いくつか大きく成果を出すことにつながりましたので紹介させていただきます。
パフォーマンスの改善
当初の目的にあった通り、画像の軽量化を行うことができました。
画像は平均して約20％ほどの軽量化に成功し、画像の表示スピードにも好影響を及ぼすことに成功しています。
運用コストの軽減
こちらのコストカットが今回だとかなり大きな成果としてつながりました。 もともと多くの画像を保有し表示することになるLIFULL HOME'Sでは大量の画像をCloudFrontにキャッシュしています。
多くの画像をキャッシュしているために高いコストを毎月かけて運用していましたが、WebP形式にしたことで画像サイズが20％軽減し、実績としてコストカットをすることにつながりました。
また、自社でWebP化を内製できたことで、もともと外部のサービスを利用する等の検討もありましたが、その必要がなくなったことも大きかったです。
全アプリケーションへの一括WebP対応
今回改修を加えた画像変換サーバは弊社の運営している多くのサービスが利用しているアプリケーションとして運用しています。
そのため、汎用的にWebPを返すしくみを作ることができたことによって、すべてのアプリケーションに対してWebPフォーマットでの画像を配信することに成功しました。
各アプリケーションで対応することなく、さまざまなメリットのあるWebPを一斉に適用できたことは、LIFULL HOME'S全体のパフォーマンス向上につながる成果となりました。
終わりに
今回はLIFULL HOME'Sにて画像最適化の文脈で多くのメリットがあるWebPフォーマットでの配信を実施でき、期待通りの成果を上げることができました。
もともと画像の最適化に興味があり、いつかLIFULL HOME'Sの画像をすべてWebPにするぞ！と意気込んでいた私としては感無量でした。
画像最適化はまだまだ多くの手法がありますので、これからも実践していければなと考えています。
弊社ではWebPを配信するにあたり画像変換サーバに対して手を加えるのが一番効果的であると判断しました。しかしながら、アプリケーションの特性によっては事前に変換しておく運用であったり、外部サービスを用いるといった手法も効果的であると思います。
WebP化することでの恩恵は大きいと思いますので、ぜひご検討してみてはいかがでしょうか。
最後に、LIFULL ではともに成長していける仲間を募集しています。よろしければこちらのページもご覧ください。
