Cloudflare Edge Cache/ Cache reserve, or a Media CDN
Hey everyone, I've been trying to get my mind around the whole content delivery network thing. I am looking to optimize load times of my images in different regions.
My current setup is: A VPS located in Germany (hosting is hetzner), which hosts a nextjs app, and a directus cms, both proxied through cloudflare
The images are stored on my drive (that's how directus does it), and are served through a url, that is proxied through cloudflare. The images are transformed using the cms api.
What I wanted to do was have these images be served from different locations, to improve the speed.
I was thinking of either having the images on Amazon S3 instead, and serving them with cloudfront. Another idea I had, was to enable cache reserve on cloudflare, or potentially having the images on cloudflare r2 (cloudflare images aren't an option, no native way to integrate easily with my content management system).
So, my questions are:
- Will enabling cache reserve, and having the images on r2 result in a similar setup to amazon s3+cloudfront?
- Will enabling cache reserve, and NOT having the images (therefore keeping them on my server), make them served through the cdn (so, multiple locations).
- will cache reserve improve the performance of my website? (NextJS, primarily server-side rendered website).
- are there any other steps I could take to improve the performance of my website? (excluding optimizing on my frontend-code side, will do that anyway)
- Will Polish and Mirage help with anything?
2 Replies
Cache Reserve is just R2 magically wrapped into the cache system, so should be pretty similiar to using R2 directly.
Cache Reserve is also a "last effort" kind of thing, it can be slower then your origin espec if you have more then one location for it, more for "I need absolutely as little requests to hit my origin as possible"
Will enabling cache reserve, and having the images on r2 result in a similar setup to amazon s3+cloudfront?Big thing to keep in mind with R2 is that a bucket is in a single location, you can use cache though which can help a ton. And again Cache Reserve = R2 anyway
Will enabling cache reserve, and NOT having the images (therefore keeping them on my server), make them served through the cdn (so, multiple locations).Normal cache can help a lot with long cachable assets when you just have a single origin
will cache reserve improve the performance of my website? (NextJS, primarily server-side rendered website).If it's SSR can you cache it without losing dynamic features/functionality? Even if you can, refer to what I said about Cache Reserve above, as long as your ssr isn't super slow it may be faster to just do normal cache plus smart tiered cache and no cache reserve
are there any other steps I could take to improve the performance of my website? (excluding optimizing on my frontend-code side, will do that anyway)Identify what's actually slowing it down. I doubt images are your big bottleneck unless they're unoptimized/really large, and they are easily cachable anyway. I know you said "excluding frontend code" but the amount of javascript/critical resources needed to load (size/time to download) and ttfb of your html should matter a lot more. If you can cache those more/minimize size/do SSR on edge with cached endpoints (if it requires db calls it could be even slower trying to do it on edge, just depends on what you're aiming for)
Will Polish and Mirage help with anything?Sure, they absolutely can, making sure images are supported in the best format for the viewer (webp) and optimizing them. But that matters a lot less if you do that yourself/have something that does that for you, you mentioned a cms api already doing that?
Thanks for the reply, gave me a lot of into. Appreciate it!