Black background with a sleek gray graphic

BentoBox は、高品質な画像でページを 25% 高速化し、キャッシュ効率を 100% 向上させました。

顧客

BentoBox は、視覚的に魅力的でモバイルフレンドリーなレストラン向けウェブサイトを構築します。顧客の SEO ランキングを上げるために、BentoBox は imgix を選んで画像やその他のビジュアルメディアを最適化しました。その結果、ページの読み込み速度が 25% 速くなり、キャッシュヒット率が大幅に向上し、グラフィックの忠実度が高くなりました。

95%
画像ファイルサイズの削減
100%
画像配信成功
18m
毎月の画像リクエスト

レストランの成功はユーザーエクスペリエンスに大きく依存し、その道のりは多くの場合、ウェブサイトから始まります。 お弁当箱 世界中の8,000以上のレストランがウェブでの存在感を高め、ダイナーとのより良い関係を築くのを支援しています。デザインから分析、マーケティングツールまで、BentoBox のエンドツーエンドのプラットフォームを利用することで、レストランはウェブサイトのトラフィックを最大 70% 増加させ、コンバージョン率を 7 倍に高めることができます。

レストランは、Django ウェブフレームワークで構築された BentoBox CMS に独自の画像をアップロードできます。当然のことながら、高解像度のプロ仕様の写真から、携帯電話で撮影したDIY写真まで、画質は大きく異なります。BentoBox チームは、顧客ごとにデザインリソースは様々ですが、すべてのお客様にとって最高のウェブサイトを作成できるよう技術スタックを構築しています。

ザ・チャレンジ

BentoBoxは顧客のウェブプレゼンスに重点を置いているため、ユーザーがブランドを高め、収益を増やすにはSEOが不可欠です。また、ページの読み込み速度は SEO ランキングの主要な要因です。また、ワイドスクリーンでもモバイル端末でも、画像の品質を保ち、レスポンシブである必要がありました。

BentoBox の以前のソリューションでは、満足のいくビジュアル品質が得られました。しかし、画像ファイルのサイズは思ったほど小さくなく、キャッシュヒット率も低かったです。これらの要因によりページの読み込み速度が遅くなり、SEO ランキングやサイト全体の有効性が損なわれました。BentoBox CTO のピエール・ドレッシャー(Pierre Drescher)氏は次のように語っています。「レストランは競争が激化しており、そのために絶対に最高のパフォーマンスを発揮するサイトを設計する必要があります。

モバイルデバイスで画像を表示したときに、画像が最適なサイズになっていなかったり、トリミングされたりしていました。これは、金曜の夜のウェブトラフィックの 80% ~ 90% がスマートフォンからのものであったため、これが問題でした。さらに、BentoBox では、社内で画像の最適化を行うことによる運用上のオーバーヘッドを正当化できませんでした。このワークフローは、開発者にとって面倒で退屈で、繰り返しの多い作業でした。チームは、社内でソリューションを実行するという追加のストレスや費用をかけずに、画像の忠実性に重点を置いた、レスポンシブな画像のサイズ変更、切り抜き、圧縮、およびレスポンシブ画像の配信ができる画像処理ソリューションを求めていました。

website examples
「CDNはかなり汎用的ですが、画像の最適化は専門分野であり、Imgixはその専門分野です。Imgix のレンダリング API ははるかに豊富で、ソリューション全体の管理もずっと簡単になりました。」
ピエール・ドレッシャー
BentoBox CTO
morton's website screenshot

解決策

BentoBox の Django ベースのテンプレートエンジンで Imgix を実装するのに数分かかりました。デザイナーは特定のページに必要な画像サイズを選択し、メディアギャラリーを使用すれば、印刷広告などの他の用途向けに最適化された画像を簡単に取り出すことができます。

BentoBoxが設定しました Imgix レンダリング API 多数の Imgix 最適化にカスタム URL パラメーターを適用します。その中で最もよく使用されるのは以下のとおりです。

  • フィット 画像をターゲットサイズに合わせるためです。
  • オート デバイスごとの自動画像最適化を有効にします。
  • fm WebP や JPEG などの出力フォーマットを設定します。
  • パッド 顔などの画像特徴のセンタリングをカスタマイズできます。
  • q 高DPR 画像を配信するときの出力品質をデフォルトより低く設定できるようにします。

imgix を使用すると、開発者は幅広いパラメーターセットから選択してこれらの最適化を微調整できます。たとえば、 MoinsRtons.com<フィット=マックス> 画像をトリミングしたり歪ませたりすることなく、幅と高さのサイズに収まるように画像のサイズを変更します。

BentoBox がオンライン注文機能を公開したとき、imgix はレスポンシブ画像としてすぐに読み込まれるサムネイルをすばやく統合できるようにしました。

結果

ページの読み込み速度を上げることは、SEOランキングを上げる上で最も重要なテクニックの1つであり、そのためにあります Imgixが結果を出す お弁当箱をご利用のお客様向けです。

BentoBox では、画像のサイズ変更、圧縮、画像最適化を行い、Google PageSpeed Insights の統計情報が 25% 向上しました。 レイジーローディング

経由で画像を配信することにより Imgix CDN、BentoBoxのお客様はキャッシュヒット率を改善し、強制的なSRGB-RGB変換などの画像忠実度エラーを排除しました。CDN がホスティング環境から完全に外れるようになったことで、BentoBox はスケーリングの問題について心配する必要がなくなりました。

BentoBox の開発者は、このドキュメントが明確で役に立つと感じています。彼らは以下のものを使っています。 Imgix サンドボックス Imgixがどのように画像を変換して最適化し、協力して最高のデザイン結果を決定するかをデザイナーに紹介します。

ケーススタディホームに戻る