こんにちは。インフラエンジニアの永井(@shnagai)です。
今回は、imgixという画像変換に対応したCDNを導入して、コンテンツダウンロードの削減を実現した話について書こうと思います。
imgixとは
はじめに、imgixって何と思われる方も多いかと思いますので簡単に特徴を紹介します。
- クエリパラメータで、画像のリサイズや圧縮が出来るCDNサービス
- S3をバックエンドに指定出来るので、画像のコピー等が不要でそのまま使える
- バックエンドはFastlyが使われているので高速配信
- 国内だと、日経や一休で採用実績あり
- コストは、標準プランだとCDN Bandwidth: 8¢/GB + Master images accessed $3/1000
imgix • Real-time image processing and image CDN
導入した背景
ママリが運営しているメディアサイトや記事関連のwebviewにおいて、PCサイズの大きめ画像をどのデバイスにおいても配信していたため、コンテンツダウンロード量が大きくなりモバイル回線で見た時のユーザ体験を損ねていました。
速いは正義ということで、速度改善の第一弾としてimgixの導入を決めました。 Lighthouseのスコアでも画像系の指摘が多くスコアが伸び悩んでいたのでこれを一つのKPIとして導入作業を進めました。
- Properly size images 20s…
- Serve images in next-gen formats 15s…
今回の移行で行ったこと
CloudFrontから配信していたサイズの大きな画像をimgixからの配信に切り替え、コンテンツダウンロード量を削減するために、移行と同時にクエリパラメータによる画像圧縮とリサイズ、フォーマット変更を行いました。
基本的なパラメータを下記にまとめたのでご参考までに。
| 内容 | パラメータ | 備考 |
|---|---|---|
| サイズ圧縮 | q=値 or auto=compress | 動的に圧縮率を変更可能, autoの場合はデフォルトで75%の圧縮率 |
| リサイズ | w=値,h=値 | 動的にリサイズ可能 ※fitパラメータで、縦横比維持、トリミング、また顔のズーム等にも対応しています。 |
| 画像フォーマット変更 | auto=format | 対応ブラウザ配信時にwebp対応 |
気になる方は、公式ドキュメント に細かく書かれているのでこちらをご覧ください。
下記のように、パラメータを付与するだけで一枚のオリジン画像から簡単にリサイズすることが出来ます。 ほぼ劣化なしにリサイズや圧縮出来る点がimgixの強みだなと個人的には感じています。
元画像 209KB
リサイズ画像(auto=format,compress&q=90&w=400) 32KB
導入後の成果
画像の最適化だけではスコアが劇的に上がるということはないのですが、下記を見ていただくとわかる通り画像系の課題が多かった関係で、一定のスコア向上を実現できました。
特に、今回の狙いだったコンテンツダウンロードサイズの削減が実現出来たことで、モバイル回線でママリを使ってくれるユーザのユーザ体験向上に寄与できた点が一番大きかったです。
コストに関しては細かくは書けないのですが、画像圧縮の結果配信量が減ったのでその分コストカットも実現出来ました。
Lighthouseの結果
そもそものスコアが低いという話はありますが、導入結果としてわかりやすいので参考として貼っておきます。
スコアという意味では、まだまだ改善の余地があるのでフロントエンドエンジニアと協力してより速さとその先にある快適なユーザ体験を追求していきたいと思っているのでまだ途上です。
- 記事タブのwebview
| 項目 | CloudFront | imgix | 差分 |
|---|---|---|---|
| モバイル トータルコンテンツダウンロードサイズ | 5551KB | 807KB | 85%減 |
| パフォマンススコア | 63 | 74 | +11 |
| コンテンツの初回ペイント | 1.0s | 0.9s | -0.1s |
| 意味のあるコンテンツの初回ペイント | 3.4s | 1.0s | -2.4s |
| 速度インデックス | 4.7s | 4.1s | -0.6s |
| CPUの初回アイドル | 6.7s | 6.0s | -0.7s |
| インタラクティブになるまでの時間 | 8.1s | 6.7s | -1.4s |
| 入力の推定待ち時間 | 460ms | 190ms | -270ms |
- 記事ページ
| 項目 | CloudFront | imgix | 差分 |
|---|---|---|---|
| モバイル トータルコンテンツダウンロードサイズ | 3682KB | 1739KB | 50%減 |
| パフォマンススコア | 29 | 44 | +15 |
| コンテンツの初回ペイント | 1.7S | 1.4s | -0.3s |
| 意味のあるコンテンツの初回ペイント | 1.7s | 1.4s | -0.3s |
| 速度インデックス | 10.7s | 6.0s | -4.7s |
| CPUの初回アイドル | 15.3s | 11.0s | -4.3s |
| インタラクティブになるまでの時間 | 21.9s | 13.3s | -8.6s |
| 入力の推定待ち時間 | 160ms | 140ms | -20ms |
導入メリット
導入メリットとして、下記が上げられます。
- エンドユーザには、コンテンツダウンロードサイズの削減によるユーザ体験の向上を提供
- アプリケーション的には、よく画像アップロードトリガで走らせたりする画像リサイズ処理をCDN側にオフロード出来る
- コスト面でも、契約にはよりますがリサイズ等による配信量軽減によるコストダウン
- 画像のリサイズを人力で行っているようなケースの場合は、その作業もすべてクエリパラメータベースに置き換えることが出来ます
注意点
最後に、imgix導入を検討する上で注意しておいた方がよい点についてもまとめておきます。
料金体系
Imgixは、Master Image数+帯域での課金になります。 Master Imageとはオリジナルのイメージ数のことで、これが無限に増えていくようなユーザアップロード用途で使うと思わぬコスト増を招く可能性があるので事前に検証してコスト計算しておくのがおすすめです。
TLS1.2未対応ブラウザへの対応
TLS1.1以前のSSL通信はサポート外なので、Androidのwebview標準ブラウザだと画像が表示されません。セキュリティ観点から世の中的には少なくなってきていますが、動作確認時にチェックするのがベターです。
サポートや営業とのやりとりは英語が必須
日本の代理店はないので、ボリュームディスカウントの交渉やテクニカルサポートはすべて英語です。ただ、とても親切に対応してくれるのであまりネックにはなりませんでした。
最後に
既に導入していた @akasakas に色々と情報をもらいスムーズに移行を進められたので、この場を借りてお礼を言いたいと思います。ありがとうございました。
コネヒトでは変化を恐れずに良いものを取り入れながらサービスの信頼性向上をミッションに一緒に働く仲間を探しています。 少しでも興味もたれた方は、是非気軽にオフィスに遊びにきていただけるとうれしいです。
