一休はGoogle PageSpeedのスコアを15ポイント向上させ、平均応答時間をわずか16ミリ秒に短縮しました。
顧客
日本の大手旅行サイトである一休.comは、毎月60億件を超える画像リクエストを処理しています。チームはレスポンシブに画像をレンダリングする必要性を認識し、AWS Lambda と ImageMagick を imgix に置き換えることにしました。その結果、チームは各ブラウザに合わせて画像を最適化し、各ページに最適なサイズで高品質の画像を提供し、画像処理に関連する運用上のオーバーヘッドを削減できるようになりました。
日本が国内外の旅行業界を再開するにつれ、多くの予約サイトが市場シェアを争い、激しい競争につながっています。多くの要因の中でも、画像は顧客の選択において重要な役割を果たします。
ザ・チャレンジ
一休のチームは、さまざまなブラウザ向けに画像を最適化すること、各ページに最適なサイズで高品質の画像を配信すること、および画像処理に関連する運用上のオーバーヘッドを減らすことがいかに重要であるかを早くから認識していました。
2017 年以前は、ikyu.com はイメージ最適化に AWS Lambda と ImageMagick を利用していました。チームは、ページ、デバイス、または帯域幅環境に合わせて正確なサイズ調整を行うことができませんでした。
「ImageMagick と Lambda はイメージを 4 つのサイズにしか変換しません。私たちはウェブへの適応力を犠牲にしなければなりませんでした。さらに、WebP のようなパフォーマンスの高い画像フォーマットにはアクセスできませんでした。」
-山口-一休のさん
解決策
2017年、一休はImgixに切り替えることを決定しました。それ以来、チームは 画像レンダリング API 以下を含む複数のプロパティにわたって 一休.com、 レストラン. 一休.com、その他。PHPで構築された彼らのサイトは、Imgixのサイトを使用しています PHP SDK。
IkyuがImgixを使用するクリエイティブな方法の1つは、レストランの画像コラージュを作成することです。一休では、レストランのインテリアの画像と料理のクローズアップ写真を並べることで、予約ページで魅力的で一貫性のある視覚体験を提供しています。これを実現するために、一休は以下を活用しています。 ブレンドモード = ノーマル そして 透かし パラメーター。この手法をどのように再現したかは、以下で確認できます。 ここにリンクされているサンドボックスの例。
- オート=フォーマット 画像をよりパフォーマンスの高い形式に自動的に変換します。AVIF に対応したブラウザーでは、画像は AVIF 形式で提供されるため、画像の重量を軽減できます。 JPEG ファイルと比較して 60% 多くの場合、すべて視覚体験を変えずに済みます。
- 自動=圧縮 ベストエフォート圧縮を適用して画像のサイズを小さくします。画像が異なれば、最良の結果が得られるように処理アルゴリズムが異なる場合があります。
- ロスレス=0 非可逆圧縮を適用すると、可逆圧縮よりも画像サイズが大幅に縮小されるため、Web ページの応答性が向上します。
結果
Imgixを実装して以来、Ikyuは平均応答時間をわずか16ミリ秒に短縮し、1か月あたり60億件を超える画像リクエストを処理しました。さらに、チームでは 15 ポイントの改善が見られました。 Google のページスピードインサイト。
「Imgixは非常に効果的な画像最適化および配信ソリューションです。シンプルなクエリ設定で、適切な形式の画像を高いパフォーマンスで配信できます。日本語で流暢にコミュニケーションできるアカウントマネージャーとセールスエンジニアがいることは大きなメリットです。Imgix のおかげで、運用上のオーバーヘッドを抑えながら、最適な画像をユーザーに提供できるようになりました。」
-山口-一休のさん
