A few days ago, I noticed something frustrating: while my Hugo frontend (hosted on Netlify’s Edge) was lightning fast, the images and videos were lagging. Every time I opened a post, there was a noticeable “pop-in” delay for media.
The culprit? My storage backend. I recently migrated my assets to a MinIO instance running on a BuyVM storage slab in Switzerland 🇨🇭. While I love the privacy and the 80GB SSD space, the physical distance between Switzerland and, well, the rest of the world, created a massive latency bottleneck.
Here is how I fixed it using Cloudflare as a “Swiss Army Knife” for performance.
The Optimization Layer: Cloudflare Cache Reserve
The first thing I did was enable Cloudflare Cache Reserve.
Usually, a CDN only caches files that are frequently requested. If a file isn’t popular, the CDN purges it to make room, forcing the next visitor to “trip” all the way back to Switzerland. Cache Reserve changes this by acting as a persistent storage layer within Cloudflare’s network.
By using it, I ensured that once a file hits Cloudflare, it stays there. The results speak for themselves:
This means 9 out of 10 requests are served directly from Cloudflare’s global edge, never even touching my Swiss VPS😎.
The Final Polish: Fixing “Efficient Cache Lifetimes”
Even with a 90% hit ratio, I noticed Lighthouse was still flagging my site for “efficient cache lifetimes.” I realized I had a gap in my logic. There are actually two types of “caching” happening here:
- Edge Cache (Cloudflare to Origin): Cloudflare has the file ready. This was working perfectly.
- Browser Cache (User to Cloudflare): The user’s browser didn’t know it was allowed to keep the file.
If the Browser Cache TTL is too short, the browser still has to “ask” Cloudflare if the file has changed every single time the page loads. That “ask” takes time (RTT).
The Fix:
I went into the Cloudflare Caching -> Configuration settings and adjusted the Browser Cache TTL to 7 day.
By doing this, I’m telling the visitor’s browser: “Hey, this video isn’t going to change for at least a week. Don’t even bother asking me for it again; just load it from your local disk.”
Visual Diagrams
Before:
After:
The Results
The combination is lethal for latency:
- First Visit: Cloudflare pulls from Switzerland (once), then stores it in Cache Reserve.
- Repeat Visit (Same User): Instant load from local browser cache (0ms latency).
- New Visitor: Instant load from Cloudflare Edge (minimal latency).
Moving my data to Switzerland felt like a performance trade-off at first, but with these two tweaks, the blog feels faster than ever.