Swimplyは、画像ファイルサイズを38%削減、画像の応答時間を50%短縮し、貴重なエンジニアリング工数も節約しました。
お客様について
Swimplyは、レクリエーションスペースやスイミングプールのレンタルを仲介する、急成長中のマーケットプレイスです。リスティングとユーザー生成画像が増えるにつれ、Webサイトとモバイルアプリのページ速度を最適化しながら高品質な画像を配信することが難しくなっていました。Imgixの導入により、Swimplyは画像ファイルサイズを38%削減し、画像の応答時間を50%短縮するとともに、貴重なエンジニアリング工数を節約しました。
「プール版Airbnb」とも呼ばれるSwimplyは、スイミングプールやホットタブ、スポーツコートといったプライベートなレクリエーションスペースのオーナーと、近場で集まったり、泳いだり、気分転換したりしたい人々をつなぐオンラインマーケットプレイスです。25,000以上のプールが登録されており、プールを利用できないアメリカ人の96%に新たな選択肢を提供しています。Swimplyの予約の92%は、ホストから5マイル（約8km）以内に住む地元の人によるものです。また、予約の70%は母親によるもので、子どもや家族のために予約されています。ユーザーはSwimplyのWebサイト、iOSアプリ、Androidアプリでリスティングを閲覧して予約でき、メッセージのやり取り、アメニティの選択、支払いもすべてWebサイトまたはモバイルアプリ上で完結します。Swimplyは現在、米国、カナダ、オーストラリアでサービスを展開しています。多くのホスピタリティサイトと同様に、Swimplyは画像や動画に大きく依存しています。リスティング写真やユーザーのアバターといったユーザー生成画像から、ホームページのマーケティング画像まで、Swimplyが扱うオリジン画像は月間21万枚、ハイシーズンの画像リクエストは6億8,000万件にものぼります。トラフィックの約40%はモバイルアプリ、30%はモバイルWeb、残りはデスクトップからです。
課題
Swimplyのホストとゲストは、さまざまなデバイスやアプリケーションからサービスにアクセスします。Imgixの導入前は、デバイスやブラウザの環境に関係なく、各画像がそのままのサイズで配信されており、中には0.5MB近い画像もありました。また、画像はAVIFやWebPといった次世代フォーマットではなく、JPEGでしか配信されていませんでした。さらに、ユーザー生成画像はフォーマットがまちまちで、多くは非常に高解像度でした。つまり、特にモバイルでは画像が必要以上に大きかったのです。これがCore Web Vitals（CWV）に悪影響を与え、ひいてはSEOにも悪影響を及ぼしていました。Swimplyのエンジニアリングチームは、過去に他のソリューションを使った経験から、ImageMagickやThumborのように、セットアップと保守に多大なエンジニアリング工数がかかるバックエンド処理ツールは避けたいと考えていました。また、オープンソースのパッケージで画像パイプラインを構築する方法では、Swimplyのニーズに見合うスケーラビリティを確保できませんでした。コアアプリケーションの開発に集中するため、チームは画像をその場で処理できるソリューションを探すことにしました。
解決策
Swimplyは2021年にImgixを導入し、すべてのユーザー生成画像の最適化と処理を任せています。それ以来、次のような高度な機能を幅広く利用しています。
- react-imgixは、srcset属性を自動生成します。これにより、ブラウザのビューポート幅（fluid-width srcset）やデバイスのピクセル密度（fixed-width srcset）に応じて、異なるサイズの画像をレンダリングして配信できます。
- 可変qパラメーターは、fixed-width srcsetの生成時に、デバイスピクセル比に応じて圧縮品質を調整します。これにより、各画像を最適なファイルサイズと画質で配信できます。
- fit=minは、画像の元の幅と高さを超えない範囲で、指定した幅と高さのアスペクト比に合わせて画像をリサイズします。
- auto=format,compressは、ベストエフォートの圧縮と画像フォーマット変換を適用します。auto=formatを使うと、可能な限りAVIF形式で画像が配信されます。また、SwimplyはImgixに加えて遅延読み込み（lazy loading）も採用しています。画面外の画像は、訪問者がスクロールしてビューポートに入るまで読み込まれないため、ページのパフォーマンス向上につながっています。
結果
Imgixの導入により、Swimplyは平均画像ファイルサイズを38%削減し、平均画像応答時間を325ミリ秒から163ミリ秒へと50%短縮しました。こうしたパフォーマンスの向上により、チームは、リスティングと画像の急増にも対応できるようページの重さと読み込み速度が最適化されているという安心感を得ています。さらにチームは業務効率を高め、コアとなるプラットフォーム製品そのものの開発と改善により多くの力を注げるようになりました。画像処理と配信はSwimplyのビジネスに欠かせないものですが、今では安心して任せられるワークフローになっています。
