ExpressVPNはImgixの導入で、画像ファイルサイズを70%、帯域使用量を30%、ページウェイトを10%削減しました
お客様について
ExpressVPNは、レガシーインフラを刷新してWebパフォーマンスを高めるため、画像最適化・配信ソリューションとしてImgixを選びました。Imgixはビジュアルメディアのパフォーマンスを向上させるだけでなく、新しい技術スタックにシームレスに統合でき、エンジニアリングの工数を削減し、マーケティングチームのコンテンツ管理ワークフローも強化しています。
ExpressVPNは世界最大級のVPNサービスプロバイダーで、デスクトップ、モバイル、スマートテレビ、ゲーム機、スマートホームデバイスで利用できます。複数の国で、個人ユーザーと法人アカウントにサービスを提供しています。
VPNの利用が爆発的に伸びるなか、市場の競争は当然ながら非常に激しくなっています。Webサイトは主要な顧客獲得チャネルであるため、ExpressVPNにとって、世界10言語のサイトをデスクトップでもモバイルでも高速に読み込み、最高のユーザー体験を提供することが欠かせませんでした。
課題
当初、ExpressVPNは画像とそれ以外のアセットの両方の配信に、コンテンツ配信ネットワーク（CDN）としてAkamaiを使用していました。しかし画像が重く、読み込みに時間がかかっていました。エンジニアリングチームはAkamaiの画像最適化ソリューションを検討しましたが、いくつかの課題が見つかりました。
1. 基本的な圧縮以上の画像最適化ができませんでした。
2. セットアップが難しいものでした。
3. 必要なサポートが受けられず、Akamai上での作業に苦労することがありました。
また、チームはRuby on Railsを使用していましたが、時間が経つにつれてスケーリングや最適化が難しくなっていました。各ページをRuby on Railsフレームワーク内でハードコーディングする必要があり、デバイスに応じたユーザー体験を実現するには、同じ画像を何バージョンも作成しなければなりませんでした。
解決策
インフラの刷新を決めた際、ExpressVPNのチームは、画像の最適化と配信が今後の重要な要件になると認識していました。
チームはImgixと競合製品の両方を評価し、Imgixのほうが堅牢で、インターフェースも使いやすいソリューションだと判断しました。さらに、競合他社の料金プランは高額かつ複雑で、内容も十分ではありませんでした。一方、Imgixはシンプルでわかりやすい料金体系を提供していました。
最終的にExpressVPNはImgixを選びました。チームはsrcsetの自動生成機能を最大限に活用してターゲットデバイスに応じて画像サイズを調整し、さらなる変換にはImgix Rendering APIを使用しています。主に使用しているURLクエリパラメータは次のとおりです。
- dpr：出力画像のピクセル密度（デバイスピクセル比）を制御します
- fit：画像をターゲットのサイズにどのように収めるかを指定します
- cs：カラースペースを指定します
- fm：画像をWebPなどの目的の出力フォーマットに変換します
- q：jpgなどの非可逆圧縮形式の出力品質を調整します
Imgix Rendering APIを含め、Imgixは新しい技術スタックにシームレスに組み込まれています。
最後に、セキュリティをミッションの中核に据えるExpressVPNは、s パラメータを使って画像URLを保護し、アセットの悪用を防いでいます。
結果
インフラの刷新とImgixの導入により、ExpressVPNは業務のさまざまな面に影響を与える大きな成果を上げました。
画像最適化・配信ソリューションとしてImgixを使用することで、ExpressVPNは帯域使用量を30%削減しました。
Imgixサポートチームの支援を受け、DPR パラメータを微調整するだけで「ページウェイトをさらに10%削減」できました。ExpressVPNのホームページだけでも、画像サイズは約340KBから約100KBへと70%削減されています。
しかし、Imgixのメリットはファイルサイズの削減だけにとどまりませんでした。競合ソリューションは扱いにくいものでしたが、Imgixは導入が簡単で、チームはS3バケットをセットアップしてImgixに接続するだけで済みました。画像を最適化できるサンドボックスは、わずか1時間でセットアップできたそうです。
チームによると、ImgixはHugoとの相性が「驚くほど良い」とのことです。画像が世界のどこに配信されているかも把握できます。150種類以上の画像変換操作と充実したSDKライブラリを備えたImgixは、さまざまなニーズに合わせて柔軟にカスタマイズできます。ExpressVPNでは、ほとんどのページで大半の画像にほぼ同じ変換を適用していました。Imgixの営業チームとカスタマーサポートの支援により、用途に応じてよりカスタマイズした変換も実装できます。
Imgixと提携したもう1つのメリットは、Asset Manager機能を利用できることでした。Asset Managerは、既存のストレージバケット内の画像を可視化、整理、タグ付けできる、シンプルで直感的なUIを提供します。
ExpressVPNのマーケティングチームは、自分たちで画像を管理し、A/Bテストを実施できます。これにより、マーケティングとエンジニアリングの足並みをそろえながら、マーケティングの成果を継続的に高めています。
