ExpressVPNはImgixを使用して画像ファイルサイズを70％、帯域幅消費量を30％、ページウェイトを10％削減します。
顧客
ExpressVPNは、従来のインフラストラクチャを置き換えてウェブパフォーマンスを向上させるために、画像最適化および配信ソリューションとしてImgixを選択しました。Imgixはビジュアルメディアのパフォーマンスを向上させるだけでなく、新しい技術スタックとシームレスに統合され、エンジニアリング時間を節約し、マーケティングチームのコンテンツ管理ワークフローを強化します。
エクスプレスVPN は世界最大の VPN サービスプロバイダーの 1 つで、デスクトップ、モバイル、スマートテレビ、ゲーム機、スマートホームデバイスで利用できます。複数の国の個人ユーザーや企業アカウントにサービスを提供しています。
VPNの使用が爆発的に増加するにつれて、もちろん市場は非常に競争が激しくなっています。ウェブサイトは主要な顧客獲得チャネルであるため、ExpressVPNは、サイトの読み込みが速く、デスクトップでもモバイルでも、世界中の10言語で最高のユーザーエクスペリエンスを提供することが重要であることに気付きました。
ザ・チャレンジ
ExpressVPNは早い段階で、画像資産と非画像資産の両方のコンテンツ配信ネットワーク（CDN）としてアカマイを使用していました。画像は重すぎて読み込みに時間がかかりました。エンジニアリングチームは Akamai の画像最適化ソリューションを調査しましたが、いくつかの課題が見つかりました。
1。基本的な圧縮以外は画像を最適化しません。
2。設定が難しかったです。
3。チームが必要なサポートを受けられなかったため、アカマイ内での作業は困難な場合がありました。
チームでは Ruby on Rails も使用していましたが、時間が経つにつれてスケーリングや最適化が難しくなりました。各ページは Ruby on Rails フレームワーク内でハードコーディングする必要がありました。デバイスに応じたユーザーエクスペリエンスを実現するには、同じ画像の複数のバージョンを作成する必要がありました。
解決策
ExpressVPNがインフラストラクチャの刷新を決定したとき、チームは画像の最適化と配信が今後の重要な要件になることを認識しました。
チームはImgixと競合他社の両方を評価しました。その結果、Imgix はよりユーザーフレンドリーなインターフェースを備えた、より堅牢なソリューションであることがわかりました。さらに、競合他社が提供する価格プランは高価で複雑で、包括的ではありませんでした。特に imgix は、プランに帯域幅を含めて合理化された価格設定を提供していました。
最終的にエクスプレスVPNはImgixを選びました。チームは、以下の利点を最大限に活用しています。 自動アークセット生成 ターゲットデバイスとターゲットデバイスに基づいて画像サイズを調整する機能 その他の変換用の Imgix レンダリング API。 使用される主要な URL クエリパラメータには次のものがあります。
- dpr 圧縮の品質レベルを設定します
- フィット 画像がターゲットのサイズにどのように収まるかを指示します
- cs カラースペース設定を指定します
- fm 画像を目的の出力形式 (WebP など) に変換します
- q jpg などの損失の多いファイル形式の出力品質を調整します
ターゲットデバイスと その他の変換用の Imgix レンダリング API。 使用される主なURLクエリパラメータは次のとおりです。Imgixは新しい技術スタックにシームレスに適合します。
最後に、セキュリティをミッションの中核に据えて、ExpressVPNチームは s パラメーター 画像URLを保護して、アセットソースが悪用されるのを防ぎます。
結果
インフラストラクチャの変更とImgixの統合により、ExpressVPNは業務のさまざまな部分に影響を与える有意義な結果を実現しました。
画像の最適化と配信のソリューションとしてImgixを使用することにより、ExpressVPNは帯域幅を30％節約しました。
Imgixサポートチームの支援を受けて、チームは微調整するだけで「ページの重量をさらに10％削減」しました DPR パラメーター。ExpressVPNのホームページだけでも、画像サイズは約340Kbから約100Kbに縮小され、70% 削減されました。
しかし、Imgixの提供するサービスには、ファイルサイズの縮小以外にも多くのことがありました。競合するソリューションは扱いにくいものでした。しかし、Imgix では実装が簡単で、チームは S3 バケットをセットアップして Imgix を接続するだけで済みました。全体として、画像を最適化できるサンドボックスのセットアップには 1 時間かかったそうです。
チームによると、ImgixはHugoと「信じられないほどうまくいく」とのことです。彼らは自分のイメージが世界のどこに向かっているのか見ることができます。Imgix は 150 種類以上の画像変換操作から選択でき、豊富な SDK ライブラリを備えているため、さまざまなニーズに合わせてカスタマイズできます。ExpressVPNの場合、ほとんどのページのほとんどの画像でほとんど同じ変換が行われました。Imgixの営業とカスタマーサポートのおかげで、ExpressVPNはさまざまなニーズに合わせてよりカスタマイズされたトランスフォーメーションを実装できます。
Imgix との提携によるもう 1 つの利点は、アセットマネージャー機能にアクセスできることでした。 アセットマネージャー には、既存のストレージバケット内の画像を視覚化、整理、タグ付けするための簡単で直感的なUIが用意されています。
ExpressVPNのマーケティングチームは独立して画像を管理し、A/Bテストを実施できます。これにより、ExpressVPNはマーケティングとエンジニアリングの連携を保ちながら、マーケティング結果を継続的に改善することができます。
