LeaflyはImgixでストレージを90%削減し、ページ速度を9秒短縮しました
お客様について
Leaflyは、消費者、ブランド、小売店をつなぐ大麻のオンラインコミュニティ兼Eコマースプラットフォームです。教育記事、商品リスト、ユーザーレビューから、毎月4億1,600万件の画像リクエストが発生しています。以前の画像最適化ソリューションは拡張性が低く、インフラに負担をかけていました。Imgixでパフォーマンスの高いsrcsetを構築したことで、Leaflyはストレージ消費量を90%削減し、Webサイトの速度を60%向上させ、SEOの取り組みを強化するとともに、貴重なエンジニアリング時間を節約しました。
Leaflyは、1億2,500万人が合法的な大麻を見つけて購入できるよう支援し、大麻の品種について消費者に情報を届けるとともに、4,600の小売店と7,800のブランドに専用のEコマースツールを提供しています。年間400万件以上の注文を処理し、130万件のユーザーレビュー、5,000種類の大麻の品種、11,000本以上の教育記事を掲載しています。
これだけのコンテンツ量になると、画像最適化の負荷も大きくなります。2010年に創業したLeaflyは、現在251万枚のオリジン画像を保有しています。毎月4億1,600万件の画像リクエストがあり、使用する帯域は9.60 TBに上ります。このトラフィックの75%はスマートフォン、20%はPCからのものです。
課題
さまざまなデバイスに向けてこれほど大規模に画像を最適化することは、Leaflyにとって多くの課題を生んでいました。詳細な商品画像は、実店舗での買い物体験に最も近いものです。正確で高解像度の画像があれば、消費者は販売店（ディスペンサリー）に行く前に、何を購入するのかを正確に把握できます。
LeaflyのエンジニアリングVP、レスリー・ザビスカ氏は「消費者は自分に合った大麻製品を調べ、見つけています。あらゆるデバイスやネットワークで高速かつシームレスなユーザー体験を提供するうえでも、SEOのうえでも、パフォーマンスは重要です」と説明します。大麻という業界の特性も、Leaflyの画像最適化のアプローチに独自の影響を与えました。
ザビスカ氏は「ビールやワイン、スピリッツと同じように、大麻にも無数の品種や加工方法、製品形態があり、そのすべてが消費者にとっての具体的な効果や体験に影響します」と続けます。詳細な商品画像は、消費者の信頼と安心感を築くうえで重要な役割を果たします。
Leaflyは、高品質な商品画像やマーケティング画像を高速に配信できる画像処理ソリューションを必要としていました。しかし、自社のテクノロジースタックで画像をリサイズすると、クラスターに持続不可能なリソース負荷がかかっていました。顧客がニーズに合った商品を見つけられるようにするうえで、これは欠かせない課題でした。当初は独自開発のツールを使っていましたが、拡張性に欠けていました。その後Leaflyは、キャッシュ用CDNと組み合わせて使うオープンソースのソリューションThumborに移行し、Cloudfrontを併用していましたが、この構成ではキャッシュの無効化が困難でした。LeaflyのWebテクノロジースタックには、NextJS/Reactアプリケーション、従来型のMVC Railsアプリケーション、WordPressが含まれていました。Thumborのリソース消費量は、メトリクスベースの自動スケーリングを使っても1日を通して変動しました。共有ノード上の他のサービスにも影響が出たため、LeaflyはThumborを専用のノードグループに移す必要がありました。また、ビジュアル体験の面でもいくつかの問題を抱えていました。パートナーは大麻製品や店舗の画像を自由にアップロードできましたが、それらの画像はサイズが大きすぎたり、Web表示に適した比率でトリミングされていなかったりすることがよくありました。さらに、ファイル名に絵文字やハッシュタグなどの特殊文字が含まれていると、システムの処理方法が原因で画像が壊れることもありました。
解決策
Leaflyは、高速で高品質な画像を配信しつつ、インフラチームの負担を軽減できる新しい画像最適化ソリューションを探していました。そこで選んだのがImgixです。Webサイト上のすべての画像をImgixで処理し、主にS3バケットを使ってプラットフォームと連携させています。「サイト内には、複数の画面サイズに対応する必要がある箇所が数多くありました。私たちは、Imgixが提供するツールだけでレスポンシブ画像コンポーネントを構築しました。これらのツールによって、画像の変換、リサイズ、最適化をオンザフライで適切に行えます」とザビスカ氏は語ります。消費者はどのデバイスでも正確で高品質な画像を確認でき、納得したうえで購入を判断できます。適切な画像がそろっていれば、Eコマースでの体験は、実物を直接見ることに次ぐ最良の手段になります。
Leaflyが使用したImgixのレンダリングパラメータは次のとおりです。
- dpr は、デバイスピクセル比（Device Pixel Ratio）を制御し、Leaflyがあらゆるデバイスで最適な画像体験を実現する、パフォーマンスの高いsrcsetを構築できるようにしました。
- s は、Leaflyが画像URLを保護する手段となり、権限のない第三者がパラメータを改ざんできないようにしました。
- fm は、Leaflyがリクエストごとに最適な画像フォーマットを選べるようにしました。
- fit は、リサイズ後の出力画像を目標サイズにどう合わせるか、また背景領域をどう塗りつぶすかを制御しました。
- bg は、画像の透明部分を指定した色で塗りつぶしました。
LeaflyはImgixをReactコンポーネントでラップし、エンジニアが簡単に使えるようにしました。また、SwiftとRuby on Railsのライブラリを活用し、自社のテックスタックへのImgixの統合をさらにシンプルにしています。srcset属性を使うことで、Leaflyはレスポンシブなユーザー体験のために複数の解像度の画像をWebブラウザに提示しています。srcsetとImgixのdprパラメータを組み合わせれば、対応するデバイスには高DPRの画像を配信しつつ、低DPRのディスプレイにそうした画像を送って帯域を無駄にすることもありません。さらに、Leaflyの画像にImgixを使うことでSEO上のメリットも得られました。最適化された画像は読み込みが速く、優れた画質を保ちながらCore Web Vitalsの改善につながり、最終的にユーザー体験の向上をもたらしました。「Imgixの導入にあたってアーキテクチャを大きく変えることはありませんでしたが、Cloudfront CDNとThumborの組み合わせを廃止できました。当社のスタックは主にJavaScriptベースです。ImgixはS3バケットを通じて画像をリクエストするため、マイクロサービス間で関心事を分離しやすくなっています。画像の種類に応じて、さまざまなS3バケットを使い分けています」とザビスカ氏は説明します。
店舗のロケーション画像を例にとると、Leaflyの一般的な画像ライフサイクルは次のとおりです。
店舗の管理者がLeaflyのツールで画像をアップロードすると、その画像がS3バケットに格納されます。
LeaflyはImgixのURLをデータベースに保存し、サイトへのアクセス時にそのURLが読み込まれます。
フロントエンドは画像がImgixベースであることを検出し、その画像に最適な体験を提供するため、追加のレンダリングパラメータを付与します。
結果
ほどなくして、LeaflyのWebサイトのパフォーマンスは大きく向上しはじめました。導入前、デスクトップでのSpeed Indexは約15秒でしたが、Imgixの導入後は平均6秒まで短縮され、60%改善しました。
「CloudflareとImgixによってリクエストを積極的にキャッシュし、コストの改善、快適なユーザー体験、SEOの向上につなげています」
（レスリー・ザビスカ様、Leafly エンジニアリング担当VP）
「Imgixを検討しはじめたきっかけは、自社で画像のリサイズを行うことでクラスターにかかるリソース負荷に、インフラチームが不満を抱いていたことでした。Imgixに移行したことで、クラスター内の画像リサイズにかかるリソース消費量を約90%削減できました」とザビスカ氏は振り返ります。Leaflyは、当初使っていたオープンソースの画像リサイズスタックでパフォーマンス低下のデバッグや原因調査を行う必要がなくなり、貴重なエンジニアリング時間を節約できました。
「Imgixのおかげで、Webのコードに日々向き合うフロントエンド開発者が、すばやく変更を加えられるようになりました。アスペクト比の固定、画質レベルの設定、モバイル体験を高めるための画像リサイズなどに活用しています」
（レスリー・ザビスカ様、Leafly エンジニアリング担当VP）
