Qiitaは、ユーザーが作成したナレッジベース、ブログ、フォーラムをソフトウェアエンジニアに提供するウェブポータルです。2011年に海野弘成氏によって設立されたQiitaは、人材紹介サービスの「Qiita Jobs」と、社内向け情報共有サービスである「Qiita Team」などを展開中。このポータルは、日本最大級のエンジニア・コミュニティに向けてサービスを提供しています。

日本のソフトウェア・エンジニアは、Qiitaウェブポータルで知識を共有し、ブログ用のグラフィックからプロフィールアバター、OGPコンテンツまで、月に最大250万件の画像をレンダリングしています。これは、3億件を超えるCDNリクエストに対して、平均14TBの帯域幅に相当します。

「開発者コミュニティのベストプラクティスの主要な情報源として、可能な限り最速のページダウンロードと最高のユーザー体験を提供し、ウェブパフォーマンスにおいて最先端を行くことが極めて重要なんです」

― プロダクトマネージャー、清野隼史氏

QiitaはウェブアプリのフレームワークとしてRuby on Railsを使用し、フロントエンドの設定にはReactスクリプトを使用しています。画像コンテンツについては、Lambda@EdgeをCDN、CamoをHTTPS変換用のSSL画像プロキシとして、AWS CloudFrontを実装していました。また、URLクエリパラメータで、画像の動的なサイズ変更と圧縮を行っていました。

しかし、同社は求めていたパフォーマンスを得られず、それにはいくつかの理由がありました。Lambda@Edgeは1MBを超える画像は処理できず、アップロードには10～20倍のサイズのファイルが頻繁に含まれていましたが、Lambda@Edgeがブラウザの種類とファイル形式 (WebPかどうかに関わらず)を識別して可逆圧縮を適用するには時間がかかりすぎたのです。キャッシュされていない画像の読み込みに1秒以上かかるのを避けるため、QiitaはCloudFrontを設定してキャッシュを生成する必要がありました。

「最適化した画像をユーザーに提供できていなかったんです」と清野氏は言います。表示されていた画像は、サイズ調整やトリミングが適切ではなく、ダウンロードに時間がかかりすぎました。グラフィックの画質も悪く、ページの読み込みが遅いため、キャッシュヒット率が低い、SEOランキングが低い、コンバージョン率が低いなど、ウェブサイト全体のパフォーマンスが低下していました。

「画像変換を機能させるのに開発者が多くの時間を費やしていたため、信頼性が高く、実装が簡単なサービスの導入が必須でした」

― プロダクトマネージャー、清野隼史氏

Qiitaは、はじめに記事で使われているすべての画像を最適化してからS3に保存することを検討しましたが、後で画像サイズを小さくする必要がある場合は、画像をすべて再最適化し、URLも更新する必要がありました。ソリューションを社内で構築して維持するには、運用コストが高すぎることも分かっていたので、サードパーティーのSaaSソリューションを探すことにしました。

‍

Qiitaはページの重量を軽減し、読み込み速度を向上させ、画像の品質を最適化することで顧客体験を改善するために、imgixの統合処理および配信CDNに移行しました。このCDNは、世界中に高速で画像を配信し、URL APIを使って高度な画像最適化を行います。Qiitaは、imgixの画像URLを生成するためのクライアントライブラリであるimgix-rbを使用し、ネイティブのRuby環境に迅速にこのソリューションを統合しました。

「imgixのドキュメントやSDKはとても直感的なので、すぐに導入できました。imgixのレンダリング APIも他社のCDNが提供するものよりもはるかに堅牢です」

― プロダクトマネージャー、清野隼史氏

imgixはソース画像をAmazon S3に保存し、バケット名とIAMキーを渡すだけでアクセスできます。 Qiitaのグラフィックスに含まれるのは、ブログ投稿用の画像やユーザーアバターで、imgix-rb Rubyライブラリなら、オープングラフプロトコル (OGP) のコンテンツもシームレスに作成できます。

「imgix-rbを使った最初のステップは、サーバーから静的に画像を提供する代わりに、すべての画像にsrcset属性を使えるようにすることでした」と清野氏は説明します。このベストプラクティスを導入してレスポンシブな画像を提供することはほんの始まりにすぎず、同社はすぐに他のimgixのパラメータについても学び、活用しました。その中で最もよく使われているものを以下にご紹介します。

• s URLの不正な改ざんをブロックすることで、画像のセキュリティを強化
• gif アニメーションGIFと静止GIFの両方をウェブサイト全体で使用
• fm WebP、png32、JPEGなど多くの非可逆、可逆、透過の出力形式を設定
• q 高DPR画像を配信する際の出力画質をデフォルトのものより低く設定
• fit ターゲットサイズに合うように画像のサイズを変更

清野氏は「次は<picture> 要素とimgix.jsも使い始めると思います。また、imgix.js lazysizesスクリプトを使って遅延読み込みを試すことも検討しています」と話します。

QittaはimgixのCDNと画像変換機能により、大容量（1MB以上）の高画質な画像ファイルを高速なページ読み込みで配信できます。最近のテストでは、23MBの画像が、23:1まで削減され、3.5秒で「フルロード」されました。imgixを導入前は40.67秒かかっていた処理です。このプログレッシブ・ウェブ・アプリ (PWA) を実質的にタイムラグなしで表示するには、この自動圧縮が特に重要です。

同社は、WebP形式のグラフィックを、サポートするブラウザに200～300ミリ秒で返すことができるようになりました。サポートしていないブラウザへのプログレッシブ.jpgの送信が遅くなることはありません。また、可逆圧縮を必ず適用し、キャッシュがない場合は以前のCDNの5倍の速さ (1000～200ミリ秒) で応答します。

「他の画像変換ソリューションでも同じような基本的な最適化はできますが、imgix APIにはさらに多くの非常に重要な機能が含まれています」

― プロダクトマネージャー、清野隼史氏

Qiitaはimgixを利用して複数行テキストやオーバーレイなども追加することができました。清野氏はまた、imgixの豊富なドキュメント、具体例の画像、うまく書かれたサンプルコードについても、imgixの優れた点として挙げています。そしてさらに、imgixを使うことでよりうまく、より低コストでバックエンド機能の開発ができ、開発チームが時間を費やさずに済むことも評価しています。