How to manage content delivery networks (CDNs) for media distribution in Bubble.

Bubble stores all uploaded files (images, videos, documents) on Amazon S3 and serves them through AWS CloudFront CDN automatically. When a user uploads a file via the File Uploader element, Bubble generates a URL like https://dd7tel2830j4w.cloudfront.net/... This CDN delivers files from edge servers closest to the user, providing reasonable performance for most apps. You do not need to configure anything — this works out of the box. However, Bubble does not offer granular control over cache headers, image transformations, or CDN rules.

Even with Bubble's CDN, large images slow down page loads. Before uploading, resize images to the maximum display size they will be shown at in your app. For hero images, 1920px wide is sufficient. For thumbnails, 400px wide works well. Use a free tool like TinyPNG, Squoosh, or ImageOptim to compress images before uploading. In Bubble, set Image elements to use the 'imgix' dynamic image resizing by appending width and quality parameters to image URLs using the :append operator (though this requires the image URL to support it).

If your app serves large media files (videos, downloads, or high-resolution images), Cloudflare's free plan adds an extra caching layer. Go to cloudflare.com and add your custom domain. Cloudflare will provide you with nameservers — update your domain registrar to use Cloudflare's nameservers. In Cloudflare's DNS settings, add a CNAME record pointing your domain to your Bubble app. Set the proxy status to DNS only (grey cloud) for the main domain to avoid SSL conflicts with Bubble. For a dedicated media subdomain (like media.yourdomain.com), you can enable Cloudflare's proxy (orange cloud) to cache files at the edge.

Storing videos directly in Bubble is inefficient — they consume storage space and do not benefit from video-specific optimizations like adaptive bitrate streaming. Instead, upload videos to a dedicated video platform like YouTube (free), Vimeo (paid, cleaner embeds), or Mux (developer-focused). Then embed the video in your Bubble app using an HTML element with an iframe tag, or a Video element if the platform provides direct video URLs. Store the embed URL or video ID in your database rather than the video file itself.

For pages with many images (like galleries or product catalogs), enable lazy loading so images only load when the user scrolls to them. Bubble does not have a native lazy loading toggle, but you can achieve this by using a Repeating Group with a limited page size (10-20 items) and pagination or infinite scroll. The Repeating Group only renders visible cells, so images in later pages do not load until the user scrolls or clicks to the next page. For individual images outside Repeating Groups, use conditional visibility — set the Image to only be visible when a custom state indicates the section is in view.

Open your Bubble app in the browser and use the Developer Tools (right-click → Inspect → Network tab) to monitor how media files load. Filter by 'Img' to see all image requests. Check the Size column (smaller is better) and the Time column (under 200ms per image is ideal). Look for images that are larger than necessary or take too long to load. In your Bubble app, check the Logs tab to see workload unit consumption from file operations. Use Google PageSpeed Insights (pagespeed.web.dev) to get a score and specific recommendations for your app's media loading performance.