Today I’m thrilled to announce a new service—now available in public beta form for Contentful and WordPress users—that will hit general availability soon for Gatsby Cloud: Image CDN. As an extension of our edge network, we’re turbo-boosting page performance with edge network image optimization. Image CDN makes it even easier to build and host content-rich sites like Ritual and ServiceTitan on Gatsby Cloud.
Leading the way with image processing
Gatsby has always been the best front-end for your CMS. A piece of this success is Gatsby’s relentless focus on delivering content to users as quickly and seamlessly as possible.
Images are usually the largest files on a site and delay page load significantly while they are pulled over the network. This results in poor visitor experience – increasing bounce rates, decreasing conversion rates, and with Google’s Core Web Vitals update, even hurting your SEO. To combat this, we launched gatsby-image with Gatsby 1.0, and introduced next-gen image processing in Gatsby 3.0 with gatsby-plugin-image.
The results are clear: compared to alternative frameworks, Gatsby sites load faster. Today, 40% of Gatsby sites pass Google’s Core Web Vitals thresholds on mobile, compared to only 23% of Next.js sites and 18% of Nuxt.js sites. Why? In large part due to optimizations in Gatsby’s image plugin.
What’s next for image processing
There’s only one problem. Shifting image processing to the build step makes builds take more time, which can slow down developers and content editors. We’ve built Gatsby Cloud to offer the fastest builds for Gatsby sites, and we’ve already shipped features like parallel image processing to speed up this step, but we noticed that image processing still accounted for 40% to 50% of build time. Today with Image CDN, this trade-off is no more. Users get the benefit of speedy page loads from optimized Gatsby images while developers and content editors can work faster by eliminating image processing from builds.
Image CDN Results
We enabled Image CDN on gatsbyjs.com and the results are impressive. gatsbyjs.com is a 10,000-page site with over 5,000 images. Cold builds for this site typically took 40 minutes. With Image CDN, builds take only 11 minutes. A savings of over 70%! Beyond the build step, sites with Image CDN will load ~300ms faster than before. Most Gatsby sites already load in about 1000ms, so cutting 300ms from page load is a huge 30% improvement to page performance. This boost to page performance lifts core web vitals and improves SEO.
Enabling Image CDN
Image CDN is available today in beta. While in beta, Image CDN is available for free to paid Gatsby Cloud sites. We’ll share more information about pricing and platform limits before general availability later this spring.
Enabling Image CDN requires upgrading some packages and GraphQL queries, which you can learn more about in our guide to enabling Image CDN on Gatsby Cloud.
Have any questions about the Gatsby Cloud Image CDN beta? Reach out to me on Twitter (@jackonawalk) with your comments!