Prismic bandwidth limit reached? How to cut your CDN usage

Fix it, biggest wins first

1. 1

   Move video to Bunny, keep a URL in Prismic

   Prismic’s own docs say video can use up your bandwidth quickly. A single background video can easily be more than the rest of the site together.

   What we do on client sites at Undefined: the video goes on Bunny, and the slice gets a URL field instead of a media link.

   • 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 Prismic: a Key Text field for the Bunny URL, plus an Image field for the poster, so the still frame still goes through imgix.

   // slice model
   "video_url": { "type": "Text", "config": { "label": "Video URL (Bunny)" } },
   "poster": { "type": "Image", "config": { "label": "Poster" } }
   
   // rendering it
   <video
     src={slice.primary.video_url ?? undefined}
     poster={asImageSrc(slice.primary.poster, { w: 1600 }) ?? undefined}
     autoPlay muted loop playsInline
   />

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

   One gotcha: deleting a file from the media library doesn’t kill its URL, so old links keep working (and keep using bandwidth). Send support the URLs if you want them purged.

2. 2

   Ask for the size you need

   Images come from imgix with auto=compress,format already on, so you get AVIF or WebP for free. Keep that. What it doesn’t do is resize, so if you render image.url as is, every visitor downloads the full upload.

   With @prismicio/next, PrismicNextImage builds a srcset for you. Give it a proper sizes, so phones pick a small one:

   <PrismicNextImage
     field={slice.primary.image}
     sizes="(min-width: 1024px) 50vw, 100vw"
   />

   Not on Next? PrismicImage from @prismicio/react does the same with widths, or add w to the URL yourself. Prismic counts the version that actually gets sent, so a resized image really is less bandwidth.

3. 3

   Stop fetching on every visit

   Fetching content in the browser means an API call every time someone opens a page. Prismic staff wrote a good guide on this, the short version:

   • Build pages statically (or with ISR) and rebuild on a publish webhook
   • One query per page where you can, with pageSize up to 100 for lists
   • Use fetchLinks or GraphQuery so you only get the fields you render

   This helps both your API calls and the JSON part of your bandwidth.

4. 4

   A CDN in front? Think twice

   You can put something like Bunny in front of images.prismic.io, but Prismic staff call it not their default recommendation, and it can break the format and size magic if you get the cache settings wrong. If you do try it, the size is in the query string (?w=800), so turn on Vary cache → URL query string, and vary on the Accept header or set fm=webp yourself.

   Honestly, for most Prismic sites the Bunny win is video and PDFs (step 1), not images.

Checklist

Questions you asked