Qiitaは、Imgix CDNとSDKを活用して、読み込みが速く、高品質のグラフィックを提供することで、ユーザーエクスペリエンスを変革しました。
顧客
Qiita 日本最大級のデベロッパー知識交換所です。Qiita は、ブログ画像からプロフィールアバターまで、1 か月あたり最大 140 万枚の画像を配信しています。Qiita の以前の CDN では、このような大量のファイルを処理できなかったため、大幅な遅延が発生していました。Imgix CDN と Imgix-RB Ruby SDK により、Qiita はより高速で高品質な画像を提供することで、ユーザーエクスペリエンスを一変させました。
Qiitaは、ユーザーが作成したナレッジベース、ブログ、フォーラムをソフトウェアエンジニアに提供するWebポータルです。2011年に海野広重によって設立され、人材紹介サービスのQiita Jobsと社内の情報共有サービスであるQiita Teamが含まれています。このポータルは、日本最大級のエンジニアコミュニティにサービスを提供しています。
日本のソフトウェアエンジニアは、Qiitaウェブポータルにアクセスして知識を共有し、ブログのグラフィックからプロフィールアバターやOGPコンテンツまで、月に最大250万枚の画像をレンダリングしています。これは、3億件を超えるCDNリクエストで平均14TBの帯域幅に相当します。
ザ・チャレンジ
QiitaはウェブアプリフレームワークとしてRuby on Railsを使用し、フロントエンドの設定にはReactスクリプトを使用しています。同社のイメージコンテンツについては、Lambda @Edge を CDN として、Camo を HTTPS 変換用の SSL イメージプロキシとして Camo を使用して AWS CloudFront を実装していました。URL クエリパラメータにより、画像の動的なサイズ変更と圧縮が可能になりました。
Qiitaが求めていたパフォーマンスを得られなかったのには、いくつかの理由があります。Lambda @Edge は 1 MB を超える画像は処理できず、アップロードには通常 10 ～ 20 倍の大きさのファイルが含まれていました。Lambda @Edge がブラウザの種類とファイル形式 (WebP の有無にかかわらず) を識別し、可逆圧縮を追加するのに時間がかかりすぎました。キャッシュのないイメージを 1 秒以上ロードするのを避けるため、Qiita は CloudFront でキャッシュを生成するように設定する必要がありました。
「ユーザーには最適化された画像がまったく見えませんでした」とKiyono氏は言います。実際に表示された画像は、サイズが合わなかったり、トリミングがうまくいかなかったりして、ダウンロードに時間がかかりすぎました。グラフィックの品質が低く、ページの読み込みが遅いため、キャッシュヒット率が低く、SEOランキングが低く、コンバージョン率が低いなど、ウェブサイト全体のパフォーマンスが低下しました。
「私たちの開発者は、画像変換を機能させるために多くの時間を費やしていました。そのためには、信頼性が高く、実装が容易なサービスが本当に必要でした。」-製品開発マネージャー清野敏文
Qiitaのチームは、まず記事で使われているすべての画像を最適化してからS3に保存することを検討しましたが、後で画像サイズを小さくする必要がある場合は、すべての画像を再最適化し、URLを更新する必要があります。ソリューションを社内で生成して維持するには運用上のオーバーヘッドが大きすぎることを認識し、サードパーティーの SaaS ソリューションを探しました。
解決策
「Imgix のドキュメントと SDK は非常に直感的で、すぐにオンライン化できました。Imgix Rendering API は、他の CDN が提供するものよりもはるかに堅牢です。」-製品開発マネージャー清野敏文氏
QiitaはソースイメージをAmazon S3に保存し、バケット名とアクセス用のIDおよびアクセス管理（IAM）キーを渡すだけです。これらのグラフィックにはブログ投稿の画像やユーザーアバターが含まれており、Imgix-RB Ruby ライブラリはオープングラフィックスプロトコル (OGP) コンテンツともシームレスに連携します。
Kyonno氏によれば、「Imgix-RBを使った最初のステップは、Imgix-RBを使用できるようにすることでした。 srcset サーバーから静的に画像を提供する代わりに、すべての画像に属性を割り当てます。」このベスト・プラクティスをレスポンシブ・イメージに実装することは始まりに過ぎず、Qiita チームはすぐさま他の Imgix 関数について知り、活用しました。その中には、以下に示す最もよく使われる関数も含まれています。
ページの重量を減らし、ページの読み込みを高速化し、画質を最適化することで顧客体験を向上させるために、QiitaはImgix統合処理および配信CDNに移行しました。このCDNは、世界中のリーチとURL APIを介した高度な画像最適化および処理を組み合わせたものです。彼らは、画像 URL を生成するためのクライアントライブラリである Imgix-RB を使用して、このソリューションをネイティブの Ruby 環境にすばやく統合しました。
結果
と Imgix CDN Qiitaは、その画像変換機能により、大容量（1MB以上）の高品質な画像ファイルをはるかに高速なページ読み込みで配信できます。最近のテストでは、23MB の画像がデータを 23-1 近く削減した後、3.5 秒で「フルロード」されました。Imgix が登場する前は、ロードには 40.67 秒かかっていました。この自動圧縮は、Qiita のプログレッシブウェブアプリ (PWA) をほとんどタイムラグなしで表示するために特に重要です。
Qiitaは、WebP形式のグラフィックをサポートされているブラウザに200ミリ秒から300ミリ秒で返すようになり、そうでないブラウザへのプログレッシブ.jpgの送信が遅くなることはありません。また、ビートを逃さずにロスレス圧縮を追加し、キャッシュがない場合は以前のCDNの5倍の速さ（1000ミリ秒から200ミリ秒）で応答します。
Qiitaは複数行のテキストやオーバーレイなどを追加できました。清野氏はまた、Imgix の豊富なドキュメンテーション、実例となるサンプル画像、よく書かれたサンプルコードを引用しました。さらに、Qiita の開発者は、専用の Imgix SaaS によってより良く、より経済的に実行できるバックエンド機能の開発に時間を費やしていません。
