convex r2 retrieve images are showing very slowly af
#convex r2 slow image problem
sonic estuary
fickle tigerBOT
Hi @sonic estuary. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
If you're experiencing slow image retrieval when using Convex with the Cloudflare R2 component, you're not alone—this is a known concern, especially when compared to solutions that use a CDN in front of storage (like Supabase or Azure CDN). Here are the key points from the knowledge sources:
-
No Built-in CDN Caching (Yet):
Currently, files stored in R2 and served via Convex do not benefit from a global CDN cache by default. This means every image request is served directly from R2, which can be significantly slower for users far from the R2 region or compared to CDN-backed solutions. Convex is aware of this limitation and has plans to improve it in the future, possibly by integrating CDN-like caching for storage fetches, but this is not available yet. For now, images come straight from storage every time, which can be slower than desired, especially for global users or image-heavy applications Image/file caching? Is there any caching for files on a CDN?. -
Browser Caching:
There are some browser cache headers set, so a user shouldn't have to download the same image twice. However, this doesn't help with first-load performance or users in different locations Image/file caching? Is there any caching for files on a CDN?.
-
Comparison with Other Solutions:
Community benchmarks show that serving images directly from Convex (or R2) is much slower than from a CDN-backed storage like Supabase or Azure CDN, especially for users outside the US or far from the storage region. For example, in Turkey, Convex storage took 830ms, while Azure CDN was 77ms and Supabase was 86ms for the same image Image/file caching? Is there any caching for files on a CDN?. -
Workarounds:
- You can use an external CDN in front of your R2 bucket to improve performance. This requires some manual setup but can significantly speed up image delivery.
- Consider storing and serving lower-resolution images to reduce payload size.
- If you need custom logic or authorization, you can write an HTTP action in Convex to serve files, but this won't solve the underlying network latency issue.
-
Future Improvements:
Convex has plans to make it easier to build abstraction layers for image serving, including automatic CDN integration and possibly image resizing, but these features are not available yet Image/file caching? Is there any caching for files on a CDN?.
Summary:
Slow image retrieval with Convex R2 is a known limitation due to the lack of built-in CDN caching. For now, consider using an external CDN or optimizing image sizes. Convex is working on improvements, but there is no immediate built-in solution for global, fast image delivery at this time.
If you need guidance on setting up a CDN in front of R2 or want to discuss best practices for image optimization, let me know!
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
sonic estuary
@fickle tiger i m building social media mobile application, those images slow is impacting the UX so badly
fickle tigerBOT
Let me check the knowledge base for you again. One moment! :books:
You're right—slow image loading from Convex R2 can significantly impact the user experience in a social media mobile app. This is a known limitation with the current Convex + R2 setup: images are served directly from storage without a CDN in front, so users far from the storage region (currently US-East) will experience higher latency. Community benchmarks have shown that image loads from Convex storage can be much slower than from CDN-backed solutions like Supabase or Azure CDN, especially for global audiences Image/file caching? Is there any caching for files on a CDN?.
Key points:
- Convex does not yet provide built-in CDN caching for R2-stored files, so every image request is served directly from the storage region.
- This results in noticeably slower image loads for users outside the storage region, which is especially problematic for image-heavy apps like social media platforms.
- Convex is aware of this issue and has plans to improve it in the future, but there is no immediate built-in solution for global, fast image delivery Image/file caching? Is there any caching for files on a CDN?.
What can you do right now?
- Use an external CDN in front of your R2 bucket to cache and serve images closer to your users. This is the most effective workaround for improving image load times globally.
- Optimize image sizes before uploading to reduce payload and speed up delivery.
- If you need custom logic or authorization, you can serve images via Convex HTTP actions, but this won't solve the underlying latency issue.
Summary:
For a social media app where image speed is critical, you will likely need to set up a CDN in front of your R2 bucket until Convex offers built-in CDN or edge caching. This is a common approach for production apps facing similar challenges.
If you need guidance on how to set up a CDN with R2, let me know!
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
sonic estuary
@fickle tiger using external cdn??? that is also kinda non-sense ... because we are retrieving images url from db and give it to the feed
fickle tigerBOT
Let me check the knowledge base for you again. One moment! :books:
You're correct that using an external CDN with Convex R2 is not a seamless solution, especially if your app retrieves image URLs from the database and serves them directly to the feed. The current Convex + R2 setup does not automatically integrate with a CDN, and the URLs you generate (e.g., with r2.getUrl(key)) point directly to the R2 storage endpoint, not a CDN edge location. This means that unless you specifically architect your app to route image requests through a CDN (for example, by rewriting URLs or using a proxy), you won't get the performance benefits of a CDN.
Key limitations from the knowledge sources:
- No built-in CDN integration: Convex does not currently provide automatic CDN caching for files stored in R2. All file URLs generated by Convex point directly to storage, so every user request goes to the storage region, not a nearby CDN edge Image/file caching? Is there any caching for files on a CDN?.
- Serving images via URLs: The recommended way to serve images is to generate URLs in your queries or mutations and send them to the client, which then loads the images directly from storage Serving Files.
- External CDN setup is manual: If you want to use a CDN, you would need to set up a pull zone or similar mechanism yourself, and ensure that the URLs you provide to your app point to the CDN, not directly to R2. This can be complex and is not natively supported by Convex at this time How can i use built-in Convex HTTP router, with pull zone from a CDN?.
Summary:
Your concern is valid: with the current Convex R2 integration, simply retrieving image URLs from the database and serving them to the feed will not benefit from CDN acceleration. Setting up an external CDN requires additional work and changes to how you generate and serve URLs. Convex is aware of this limitation and has plans to improve it, but there is no built-in, automatic CDN solution available right now.
If you need more details on possible workarounds or want to discuss alternative architectures, let me know!
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
sonic estuary
@fickle tiger i want more details on possible workarounds
fickle tigerBOT
Let me check the knowledge base for you again. One moment! :books:
Certainly! Here are the possible workarounds for improving image delivery speed in your Convex + R2 setup, based strictly on the knowledge sources:
1. Use an External CDN in Front of R2
- How it works:
You can set up a CDN (like Cloudflare, BunnyCDN, etc.) as a "pull zone" in front of your R2 bucket. The CDN will cache images at edge locations, reducing latency for global users. - Caveats:
- You must ensure that the URLs you provide to your app point to the CDN, not directly to R2. This may require rewriting URLs or using a proxy endpoint.
- The process is manual and not natively integrated with Convex. You may need to use a custom HTTP action or a third-party service to handle the URL rewriting and caching logic.
- Community experience:
Some users have successfully set up a CDN in front of storage, but it requires extra work and is not as seamless as built-in CDN support How can i use built-in Convex HTTP router, with pull zone from a CDN?.
2. Optimize Image Sizes Before Upload
- How it works:
Downsample or compress images before uploading them to R2. This reduces the amount of data transferred, which can help with perceived speed, especially on slow networks. - Caveats:
This does not solve the latency issue for users far from the storage region, but it can help reduce load times Image/file caching? Is there any caching for files on a CDN?.
3. Preload Images in the Client
- How it works:
For use cases like carousels or feeds, you can preload images in the background using JavaScript, so they are ready when the user scrolls to them. - Caveats:
This is a client-side optimization and does not address the root network latency, but it can improve perceived performance in some scenarios Image/file caching? Is there any caching for files on a CDN?.
4. Serve Images via Custom HTTP Actions
- How it works:
You can write a Convex HTTP action that fetches the image from storage and serves it with custom cache headers or logic. This allows you to control how images are served and potentially integrate with a CDN or proxy. - Caveats:
This does not inherently solve the latency issue, but gives you more flexibility for future integration with a CDN or custom caching logic Image/file caching? Is there any caching for files on a CDN?.
5. Wait for Convex’s Planned CDN/Edge Caching Features
- How it works:
Convex has stated that they plan to add CDN and edge caching features in the future, which will make this process seamless and automatic. - Caveats:
These features are not available yet, and there is no specific timeline for release Image/file caching? Is there any caching for files on a CDN?.
Summary:
Currently, the most effective workaround is to manually set up a CDN in front of your R2 bucket and ensure your app uses CDN URLs. This requires extra setup and possibly some custom code, but it is the only way to achieve global, fast image delivery with Convex + R2 right now. Other optimizations (like image resizing and preloading) can help, but do not address the core latency issue.