LeaflyはImgixでストレージを90％削減し、ページ速度を9秒向上させます。
顧客
リーフライは、オンラインの大麻コミュニティおよび電子商取引プラットフォームであり、消費者、ブランド、小売業者を互いに結び付けます。教育関連の記事、商品リスト、ユーザーレビューから、毎月4億1,600万件の画像リクエストが寄せられています。以前の画像最適化ソリューションは拡張性が低く、インフラストラクチャに負担がかかっていました。Imgix を使用してパフォーマンスの高い srcset を作成することで、Leafly はストレージ消費量を 90% 削減し、Web サイトの速度を 60% 向上させ、SEO への取り組みを強化し、貴重なエンジニアリング時間を節約しました。
Leaflyは、1億2,500万人が合法的な大麻を見つけて購入できるよう支援し、大麻株について消費者を教育し、4,600の小売業者と7,800のブランドに専用の電子商取引ツールを提供しています。年間400万件以上の注文を処理し、130万件のユーザーレビューを掲載し、5,000種類の大麻株を掲載し、11,000件以上の教育記事を掲載しています。
このコンテンツ量の増加に伴い、画像最適化の需要が高まっています。Leaflyは2010年に設立され、現在251万枚のオリジン画像を保有しています。毎月、9.60 TB の帯域幅を使用して4億1,600万件のイメージリクエストが寄せられています。このトラフィックの 75% はスマートフォンからのもので、20% はPCからのものです。
ザ・チャレンジ
さまざまなデバイスでこのような大規模な画像を最適化することは、Leaflyにとって多くの課題をもたらしました。詳細な商品画像は、実店舗でのショッピング体験に最も近いものです。正確で高解像度の画像を提供することで、消費者は薬局に行く前に自分が何を購入しているのかを正確に把握できます。
Leafly のエンジニアリング担当副社長、レスリー・ザビスカが説明しました。「消費者は自分に合った大麻製品を研究して見つけます。そして、あらゆるデバイスやネットワークでの高速でシームレスなユーザーエクスペリエンスや SEO にとって、パフォーマンスは重要です。」Leafly の業界は、イメージ最適化のアプローチにおいて独自の役割を果たしました。
レスリーは続けます。「ビール、ワイン、スピリッツと同様に、種類、加工方法、製品形態は無数にあり、それらはすべて消費者にとっての特定のメリットと体験に影響を与えます。」詳細な製品画像は、消費者の信頼と信頼を築く上で重要です。
Leafly は、高速で高品質な製品およびマーケティング画像を配信できる画像処理ソリューションを必要としていましたが、自社のテクノロジースタックを使用して画像のサイズを変更すると、クラスターに持続不可能なリソース需要が生じていました。これは、顧客がニーズに合った適切な製品を見つけられるようにするために不可欠でした。当初のソリューションはカスタムビルドのツールでしたが、拡張性に欠けていました。Leafly は CDN をキャッシュするオープンソースのソリューションである Thumbor に移行しました。このテクノロジーと一緒に Cloudfront を使用しましたが、後者ではキャッシュの無効化が困難でした。Leafly のウェブテクノロジースタックには、NextJS/React アプリケーション、従来の MVC レールアプリケーション、WordPress が含まれていました。Thumbor のリソース消費量は、メトリクスベースの自動スケーリングを使用しても 1 日を通して変動していました。共有ノード上の他のサービスが影響を受けたため、Leafly はそのサービスを独自のノードグループに移動する必要がありました。Leafly にはビジュアルエクスペリエンスの問題もいくつかありました。パートナーは、大麻製品や店舗の画像を好きなようにアップロードできましたが、これらの画像は大きすぎるか、Web で表示できる比率でトリミングされていないことがよくありました。また、ファイル名に絵文字、ハッシュタグ、その他の特殊文字が含まれていると、システムの処理方法が原因で画像が壊れてしまうこともありました。
解決策
Leafly は、高速で高品質な画像を提供しながら、インフラストラクチャチームのストレスを軽減できる新しい画像最適化ソリューションを探していました。そこで、プラットフォームとの統合に主に S3 バケットを使用して、ウェブサイト上のすべての画像を Imgix で処理することにしました。「サイト内には、複数の画面サイズに対応するソリューションを必要とするエリアが多数ありました。私たちは Imgix が提供するツールのみに基づいてレスポンシブな画像コンポーネントを構築しました。これらのツールを使うと、画像の変換、サイズ変更、最適化をその場で行うことができます」と Leslie 氏は言います。消費者は使用するすべてのデバイスで正確で高品質な画像を確認できるため、情報に基づいて購入を決定できます。」適切な画像が揃っていれば、これらの製品を実際に目にするよりも、E コマースの体験が次善の策になります。
これらのImgix レンダリングパラメータ 付属:
- dpr デバイスのピクセル比を制御し、Leaflyがすべてのデバイスで最高の画像体験を得られるようにするパフォーマンスの高いsrcsetを構築できるようにしました。
- s Leafly が画像の URL を保護し、権限のない第三者がパラメータを変更できないようにする方法を提供しました。
- fm Leafly がリクエストに最も適した画像形式を選択できるようにしました。
- フィット サイズ変更後に出力画像をターゲットサイズに合わせる方法と、背景領域をどのように塗りつぶすかを制御しました。
- バッグ 画像の透明部分を選択した色で塗りつぶします。
葉っぱで包まれたImgix リアクト エンジニアが使いやすくするためのコンポーネント。彼らはまた使用しました スイフト そして ルビー・オン・レール imgix のインテグレーションプロセスをテックスタックでさらに簡素化するライブラリ。と srcset 属性、Leaflyは、レスポンシブなユーザーエクスペリエンスのために選択できる複数の解像度の画像をWebブラウザーに提供します。srcset と imgix の dpr パラメーターを組み合わせることで、DPR 画像を低DPR ディスプレイに送信する際に帯域幅を浪費することなく、サポートするデバイスに高 DPR 画像を提供できます。Leafly の画像に imgix を使用する方法も提供されています。 SEOのメリット。最適化された画像の読み込みが速くなり、改善される可能性があります コアウェブバイタル、優れた画質を維持しながら。その結果、ユーザーエクスペリエンスが向上しました。「Imgix の導入の一環として、Cloudfront CDN と Thumbor の組み合わせを非推奨にすることはできましたが、アーキテクチャを大幅に変更することはありませんでした。私たちのスタックはほとんどが JavaScript ベースです。Imgix は S3 バケットを通じて画像をリクエストするので、マイクロサービス内の懸案事項を簡単に分離できます。イメージの種類によってさまざまな S3 バケットがあります」と Leslie 氏は説明します。
Leafly の一般的な画像ライフサイクルは、店舗のロケーション画像を例にとると、次のようになります。
ストア管理者はLeaflyのツールを使用して画像をアップロードし、S3バケットに入れます。
LeaflyはImgix URLをデータベースに保存しています。このURLは、サイトにアクセスしたときに取得されます。
フロントエンドは、画像が Imgix ベースであることを検出し、その画像に最高のエクスペリエンスを提供するために追加のレンダリングパラメーターを追加します。
結果
Leafly の Web サイトのパフォーマンスが大幅に向上し始めるまで、そう長くはかかりませんでした。以前は、デスクトップでの当初の速度指数は約15秒でした。Imgix の実装後、平均で 6 秒に短縮され、60% 向上しました。
「Cloudflareとimgixの間では、コスト削減、ユーザーへの優れたエクスペリエンスの提供、SEOの改善に役立つように、リクエストは積極的にキャッシュされています。」
— レスリー・ザビスカ、エンジニアリング担当副社長
「私たちが最初にImgixを検討し始めたのは、インフラストラクチャチームが、独自のイメージサイズ変更を実行することでクラスターに費やされるリソースの数に不満を抱いていたからです。Imgix に移行したことで、クラスター内のイメージサイズ変更リソース消費量が約 90% 削減されました」と Leslie 氏は語ります。Leafly は、当初使用していたオープンソースのイメージサイズ設定スタックでパフォーマンスの低下をデバッグしたり診断したりする必要がなくなったため、貴重なエンジニアリング時間を節約できました。
「Imgixは、ウェブのコードを密接に扱っているフロントエンド開発者が、すばやく変更を加えることを容易にしました。これを使ってアスペクト比を強制したり、品質レベルを設定したり、モバイル体験を向上させるために画像のサイズを変更したりしました。」
— レスリー・ザビスカ、エンジニアリング担当副社長
