See what's launched

The next gen Gatsby is here Performance, developer velocity, and scaling to meet Enterprise needs - See what’s launched

Sign Up for Free

Image CDN: Lightning Fast Image Processing for Gatsby Cloud

Jack Sellwood
March 2nd, 2022

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!

 

Share on TwitterShare on LinkedInShare on FacebookShare on PinterestShare via Email

A curious technologist stumbling into design and minimalism. Vegetables might be my best friends.

Follow Jack Sellwood on Twitter

Tagged with Gatsby Cloud, GatsbyConf, Website PerformanceView all Tags

Talk to our team of Gatsby Experts to supercharge your website performance.

Contact Gatsby Now
© 2022 Gatsby, Inc.