Storyblok traffic limit reached? How to cut your CDN usage

Fix it, biggest wins first

1. 1

   Never serve the original image

   Every asset URL can go through the Image Service: add /m/ and a size, and you get a resized copy instead of the 6MB original someone exported straight from Figma. Smaller files mean less traffic, simple as that.

   <!-- before -->
   https://a.storyblok.com/f/123/4000x2500/abc/hero.jpg
   
   <!-- after: 1200px wide, AVIF, quality 75 -->
   https://a.storyblok.com/f/123/4000x2500/abc/hero.jpg/m/1200x0/filters:format(avif):quality(75)

   Use a srcset with a few widths (say 640, 1200 and 2000) so phones don’t download the desktop version. Every size counts as traffic too, so don’t go overboard with variations.

2. 2

   Move video to Bunny, keep a URL in Storyblok

   Storyblok’s own docs say to host large files like video yourself. A single background video can easily be more traffic than the rest of the site together.

   What we do on client sites at Undefined: the video goes on Bunny, and the component gets a URL field instead of an asset field.

   • Short muted loops (hero backgrounds, product clips): upload the mp4 to a Bunny storage zone with a pull zone in front. About $0.01/GB in Europe and North America.
   • Longer videos with sound: Bunny Stream, which encodes a few qualities so phones don’t get the 1080p version.
   • In Storyblok: a Text field for the Bunny URL, plus an Asset field for the poster image, so the still frame still goes through the Image Service.

   // video component schema
   "video_url": { "type": "text", "description": "Bunny URL, ends in .mp4" },
   "poster": { "type": "asset", "filetypes": ["images"] }
   
   // rendering it
   <video
     src={blok.video_url}
     poster={`${blok.poster.filename}/m/1600x0`}
     autoPlay muted loop playsInline
   />

   Editors paste a link instead of uploading, and the video never touches your Storyblok traffic. Same trick for big PDFs.

3. 3

   Make your API calls hit the cache

   Storyblok’s CDN caches published content, keyed on the cv (cache version) parameter. A few things break that:

   • Fetching version=draft in production. Drafts are for the Visual Editor only.
   • Passing cv=Date.now() to get fresh content. Every request becomes a cache miss. Store the latest cv instead and update it from a publish webhook.
   • Fetching fields you never render. Use excluding_fields to drop big ones, and filter queries instead of fetching everything and filtering in the front-end.

   If you build statically, fetch stories in pages of 100 instead of one request per story.

4. 4

   Put your own CDN in front of your assets

   Storyblok has official guides for a custom assets domain on CloudFront, Azure and Google Cloud, where your CDN pulls from a.storyblok.com. We like Bunny for this: a pull zone costs about $0.01/GB in Europe and North America, and setting one up takes ten minutes.

   • Create a pull zone with https://a.storyblok.com as origin (or your region, like a-us.storyblok.com)
   • Add a hostname like assets.yoursite.com and turn on the free SSL
   • Turn on Origin Shield, so a cache miss is one request to Storyblok instead of one per location
   • Swap the host in your image URLs. The resize part is in the path, so it caches as is.

   Each image still comes from Storyblok once per cache miss, but every repeat after that comes from Bunny. If you use plain /m/ (WebP when the browser supports it), either add an explicit format() filter or turn on Vary cache → WebP in Bunny, otherwise everyone gets whichever version was cached first.

Checklist

Questions you asked