Qiita Case Study

Leveraging the imgix CDN & SDKs, Qiita transformed their user experience by delivering faster-loading, higher-quality graphics

Qiita is one of Japan's biggest developer knowledge exchanges. Qiita delivers up to 1.4M images a month — from blog images to profile avatars. Qiita's previous CDN was unable to process such large volumes of files, which caused significant delays. With the imgix CDN and the imgix-rb Ruby SDK, Qiita transformed their user experience by delivering faster-loading, higher-quality images.

Load Time

Using imgix, Qiita's average image load time improved by 91% (from 40.7s to 3.5s)

Response Times

CDN response times is 5 times faster - (from 1000ms to 200ms) than their previous CDN.

The Customer

Qiita is a web portal that empowers software engineers with user-generated knowledge bases, blogs, and forums. Founded in 2011 by Hiroshige Umino, it includes Qiita Jobs, a recruiting service, and Qiita Team, an internal information sharing service. The portal serves one of the largest engineer communities in Japan.

Japanese software engineers go to the Qiita web portal to share their collective knowledge and render up to 1.4M images a month — from graphics for blogs to profile avatars and OGP content. This can amount to an average of 14TB of bandwidth for over 130M CDN requests.

According to Product Development Manager Toshifumi Kiyono, “As a primary source of best practices for the developer community, it is vital that Qiita is at the cutting edge of web performance with the fastest possible page downloads and the best user experience.”

qiita website

The Challenge

Qiita uses Ruby on Rails as its web-app framework and React scripts to configure its frontend. For its image content, they had implemented AWS CloudFront with Lambda@Edge as their CDN and Camo as their SSL image proxy for HTTPS conversion. URL query parameters enabled dynamic image resizing and compression.

Qiita wasn’t getting the performance they needed for a number of reasons. Lambda@Edge wouldn’t handle images greater than 1MB, and their uploads regularly included files 10 – 20 times larger. It took too much time for Lambda@Edge to discern browser types and file formats (WebP or not) and to add lossless compression. To avoid 1+ second load times for any image that lacked a cache, Qiita had to configure CloudFront to generate one.

“Our users were not seeing optimized images at all,” says Kiyono. The images that did appear weren’t sized or cropped well and took too long to download. The poor graphic quality and slow page loads resulted in poor website performance overall: low cache hit rates, low SEO rankings, and low conversion rates.

Our developers were spending so much time trying to make image transformation work, we really needed a reliable, easy-to-implement service for this.

— Toshifumi Kiyono, Product Development Manager

The team at Qiita considered first optimizing all the images used in an article and then saving them to S3, but if later they needed to reduce the image size, they’d need to re-optimize all of them as well as update their URLs. Recognizing that generating and maintaining a solution in-house would require too much operational overhead, they looked for a third-party SaaS answer.

qiita blog

The Solution

To improve the customer experience by reducing page weights, speeding page loads, and optimizing image quality, Qiita migrated to the imgix integrated processing and delivery CDN that combines worldwide reach and advanced image optimization and processing via a URL API. They quickly integrated the solution in their native Ruby environment using imgix-rb, a client library for generating image URLs.

imgix documentation and SDKs are very intuitive, we had things online very quickly, and the imgix Rendering API is much more robust than what other CDNs offer.

— Toshifumi Kiyono, Product Development Manager

Qiita stores its source images in Amazon S3 and simply passes the bucket name and the identity and access management (IAM) key for access. These graphics include blog post images and user avatars, and the imgix-rb Ruby library works seamlessly with Open Graphics Protocol (OGP) content as well.

According to Kyonno, “Our first step with imgix-rb was to enable using the srcset attribute for all our images instead of serving images statically from our server.” Implementing this best practice for responsive images was just the beginning, and the Qiita team quickly learned about and took advantage of other imgix functions including the most-used functions listed below:

  • s adds a layer of security to Qiita images by blocking unauthorized altering of URLs.
  • gif imgix supports animated and static gifs, and Qiita uses these across the website.
  • fm sets a number of lossy, lossless, and transparent output formats such as WebP, png32, and JPEG.
  • q enable setting output quality lower than the default when serving high-DPR images.
  • fit resizes an image to fit the target size.

Kiyono says, “Moving forward, I’m sure we will start using the <picture> element and we may experiment with lazy loading using the imgix.js lazysizes scripts.”

The Results

With the imgix CDN and its image transformation capabilities, Qiita is able to distribute large (>1MB), high-quality image files with much faster page loads. In a recent test run, a 23MB image was "Fully Loaded" in 3.51s after a nearly 23-1 reduction in data. Before imgix, the load took 40.67s. This automated compression is especially important for presenting Qiita’s progressive web apps (PWA) with virtually no time lag.

Qiita can now return WebP-formatted graphics in 200ms – 300ms to supported browsers and doesn’t slow down sending progressive .jpgs to browsers that don’t. It also adds lossless compression without missing a beat, and responds five times faster (from 1000ms to 200ms) than their previous CDN when there’s no cache.

Other image transformation products can do some of the same basic optimizations, but the imgix API includes many more very important capabilities.

— Toshifumi Kiyono, Product Development Manager

Qiita was able to add multiline text and overlays, among other things. Kiyono also cited imgix’s extensive documentation, illustrative example images, and well-written sample code. What’s more, Qiita developers aren’t spending time working on backend functionality that can be done better and more economically by specialized imgix SaaS.

Additional Resources

imgix is a real-time image processing service and CDN. Thousands of companies around the world use imgix to deliver the best images at the perfect sizes to their customers. If you would like to learn more about how to improve your website's performance using imgix, here are some helpful links:

qiita logo

imgix is a real-time image processing service and CDN. Thousands of companies around the world use imgix to deliver the best images at the perfect sizes to their customers.

imgix uses cookies to maintain user sessions and track marketing efforts. By continuing to use our website, you agree to our use of cookies for these purposes. Read our Privacy Policy.