ExpressVPNは、従来のインフラに代わり、ウェブパフォーマンスを向上させるための画像の最適化と配信のソリューションとしてimgixを選びました。imgixはビジュアルメディアのパフォーマンスを向上させるだけでなく、新しい技術スタックとシームレスに統合し、エンジニアリング時間を節約し、マーケティングコンテンツ管理ワークフローを強化します。
お客様について
ExpressVPNは、デスクトップ、モバイル、スマートテレビ、ゲーム機、スマートホームデバイスで利用できる世界最大級のVPN サービスプロバイダーで、世界中の個人ユーザーや企業アカウントにサービスを提供しています。
VPNの利用が爆発的に増加するにつれて、当然この市場では競争が激しくなっています。ウェブサイトは主要な顧客獲得チャネルであるため、同社は、デスクトップでもモバイルでも読み込みが速く、10言語で対応する自社サイトで、最高のユーザー体験を提供することが必須だと考えました。
導入前の課題
ExpressVPNは当初、画像と非画像のアセット両方のコンテンツ配信ネットワーク（CDN）としてAkamaiを使用していましたが、画像が重すぎて読み込みに時間がかかっていました。エンジニアリングチームがAkamaiの画像最適化ソリューションを調べたところ、いくつかの課題が見つかりました。
1. 基本的な圧縮以上の画像の最適化を行わない
2. 設定が難しい
3. 必要なサポートを受けられないことがあるなど連携が困難
同社はRuby on Rails も使用していましたが、徐々にスケーリングや最適化が難しくなりました。各ページをRuby on Railsフレームワーク内でハードコーディングし、デバイスごとにレスポンシブなユーザー体験を実現するには、同じ画像の複数のバージョンを作成する必要があったのです。
ソリューション
ExpressVPNがインフラの刷新を決定した際、重要な要件となったのが、画像の最適化と配信でした。
そこでimgixと複数の競合他社のソリューションを比較検討した結果、imgixが、使いやすいインターフェースを備えた、より堅牢なソリューションであると判断しました。さらに、競合他社が提供する価格プランは高額かつ複雑である一方、包括的ではなかったのに対し、imgixは帯域幅もプランに含むシンプルな価格設定を提供していました。
そして検討の結果、ExpressVPNはimgixを採用。srcsetの自動生成を最大限に活用してターゲットデバイスに基づいた画像サイズ調整、imgixのレンダリング APIを使って追加の変換を行っています。同社が活用している主なURLクエリパラメータには次のものがあります。
- dpr 圧縮の品質レベルを設定
- fit 画像をターゲット寸法にどのように収めるかを指定
- cs 色空間を設定
- fm 画像を目的の出力形式 (WebPなど)に変換
- q jpgなどの非可逆ファイル形式の出力画質を調整
また、imgixは新しい技術スタックにシームレスに統合できるので、以下などの主要コンポーネントを含むインフラが完成しました。
- CMSにContentful
- 静的サイトジェネレーターにHugo
- 画像を変換、最適化、配信するプラットフォームにimgix
さらにExpressVPNは、そのミッションの中核にあるセキュリティの確保のため、画像URLの保護にs パラメータを使うことでアセットソースが悪用されるのを防いでいます。
導入後の結果
インフラの変更とimgixの統合により、ExpressVPNは業務のさまざまな部分で有意義な成果が得られました。
「インフラを変更しimgixを統合したことで、業務のさまざまな部分で有意義な成果が得られました」
―エンジニアリング担当副社長、Ed Boscher氏
imgixを画像最適化および配信ソリューションとして使用することで、同社は帯域幅を30%節約しました。
imgixサポートチームの支援もあり、DPRパラメータを微調整するだけで、ページウェイトをさらに10%削減することもできました。これによりホームページだけでも、画像サイズは約340Kbから100Kbに、70%縮小しています。
しかし、imgixは、ファイルサイズの縮小以上の貢献もしていました。競合他社のソリューションは扱いが困難だったことに対して、S3バケットを設定してimgixを接続するだけで実装できるという簡易性です。ExpressVPNで画像を最適化できるサンドボックスの設定にかけた時間は、合計1時間だったといいます。
チーム曰く、imgixはHugoと「信じられないほどうまく連携する」とのこと。画像がどこに動くのかが簡単に分かるのです。150種類以上の画像変換処理と、豊富なSDKライブラリを備えたimgixは、さまざまなニーズに合わせてカスタマイズが可能。ExpressVPNの場合、ほとんどのページのほとんどの画像で、ほぼ同じ変換が行われましたが、さまざまなニーズに合わせて変換をカスタマイズする場合は、imgixの営業とカスタマーサポートの支援も得られます。
「imgixの営業チームのサポートには大変感謝しています」
―エンジニアリング担当副社長、Ed Boscher氏
imgixとのパートナーシップのもう1つのメリットは、アセットマネージャー機能を利用できることでした。これには、既存のストレージバケット内の画像を可視化、整理、タグ付けするための簡単で直感的なUIが用意されています。
ExpressVPNのマーケティングチームは、独自に画像を管理し、A/Bテストを実施できる環境なので、エンジニアリング部門との連携を保ちながら、マーケティング成果を継続的に向上させていくことができるのです。
「imgixのコストは帯域幅の節約だけで相殺できるので、最適化からのメリットはすべて得られます。imgixのようなサービスを使わない手はありません。エンジニアなら迷わず使うべきです」
―エンジニアリング担当副社長、Ed Boscher氏
