Swimplyは画像ファイルサイズを 38% 削減し、画像の応答時間を 50% 短縮し、貴重なエンジニアリング時間を節約しました。
顧客
Swimplyは、レクリエーションスペースやスイミングプールのレンタルを促進する急成長中のマーケットプレイスです。リスティングやユーザー生成画像が増えるにつれ、プラットフォームではウェブサイトやモバイルアプリのページ速度を最適化しながら高品質の画像を提供することが難しくなりました。Imgix により、Swimply は画像ファイルのサイズを 38% 縮小し、画像の応答時間を 50% 短縮し、貴重なエンジニアリング時間を節約しました。
プール向けのAirbnbと呼ばれ、 スイムプライ は、スイミングプール、ホットタブ、スポーツコートなどのプライベートレクリエーションスペースの所有者と、地元に集まり、泳ぎ、脱出したい人々をつなぐオンラインマーケットプレイスです。Swimplyのプラットフォームには25,000以上のプールがあり、プールを利用できないアメリカ人の 96% に選択肢を提供しています。Swimplyの予約の 92% は、ホストから5マイル離れた地元の人が行っています。 予約の70％はママが行います お子様やご家族向け。Swimplyのウェブサイト、iOSアプリ、Androidアプリを使用して、ユーザーはリスティングを表示して予約を行うことができ、すべての通信、アメニティの選択、支払いはSwimplyのWebサイトまたはモバイルアプリを通じて処理されます。Swimplyは現在、米国、カナダ、オーストラリアで運営されています。ほとんどのホスピタリティサイトと同様に、Swimplyは画像や動画に大きく依存しています。リスティング写真やユーザーアバターなどのユーザー生成画像からホームページ上のマーケティング画像まで、Swimplyは毎月21万枚のオリジン画像、ハイシーズンには驚異的な6億8000万件の画像リクエストを処理しています。トラフィックの約 40% はモバイルアプリ、30% はモバイルウェブ、残りはデスクトップからのものです。
ザ・チャレンジ
Swimplyのホストとゲストは、さまざまなデバイスやアプリケーションからアクセスします。Imgix を使用する前は、デバイスやブラウザー環境に関係なく、各画像 (半MB 程度) がそのまま提供されていました。さらに、Swimply は画像を AVIF や WebP のような次世代の画像フォーマットではなく、JPEG としてのみ提供していました。最後に、ユーザーが生成した画像は多種多様な形式で提供されていましたが、多くの場合非常に高い解像度でした。つまり、特にモバイルでは、画像が必要以上に大きかったということです。これはコア・ウェブ・バイタル（CWV）に悪影響を及ぼし、ひいてはSEOにも悪影響を及ぼしました。Swimplyのエンジニアリング・チームは、以前に他のソリューションを使ったことがあったため、セットアップと保守に多大なエンジニアリング時間と労力がかかる可能性のあるImageMagickやThumborのようなバックエンド処理ツールを避けたいと考えていました。さらに、オープンソースのパッケージを使用してイメージパイプラインを構築することは、Swimply のニーズに合わせてスケーラブルではなかったのです。コアアプリケーションの構築に集中するために、チームは画像をその場で処理できるソリューションを探すことにしました。
解決策
Swimplyは2021年にImgixを導入し、ユーザーが生成したすべての画像を最適化して処理しました。それ以来、次のような高度な機能をフル活用してきました。
- react-imgix srcset 属性を自動的に生成するので、ブラウザーのビューポートの幅 (fluid-width srcset) またはデバイスのピクセル密度 (固定幅 srcset) に基づいて、さまざまなサイズの画像をレンダリングして提供できます。
- 変数 q パラメーター 固定幅の srcset が生成されるときに、デバイスのピクセル比率に基づいて圧縮品質を調整するので、各画像は最適なファイルサイズと画質で提供されます。
- フィット=最小 画像の元の幅と高さの範囲内にとどまりながら、要求された幅と高さのアスペクト比に一致するように画像のサイズを変更します。
- 自動=フォーマット、圧縮 ベストエフォート圧縮と画像形式変換を適用します。auto=format を使用すると、画像は可能な限り AVIF 形式で提供されます。Imgix に加えて、訪問者がスクロールして画像がビューポートに入るまで、オフスクリーン画像の読み込みを遅らせるため、ページのパフォーマンスを向上させるために遅延読み込みも使用しています。
結果
Imgixにより、Swimplyは平均画像ファイルサイズを38％、平均画像応答時間を325ミリ秒から163ミリ秒に50％削減しました。このようなパフォーマンスの向上により、チームはページウェイトや読み込み速度がリスティングや画像の急激な増加に対応できるように最適化されているという安心感を得ています。さらに、チームは効率を向上させ、コアプラットフォーム製品自体の開発と改善にさらに注力できるようになりました。画像処理と配信は彼らのビジネスにとって不可欠ですが、チームが安心してオフロードできるワークフローでもあります。
