Originally published on Medium by Tarun Agrawal
Modern Single-Page Web Apps deliver rich, interactive user experiences—but often at the cost of heavier payloads, more API calls, and increased latency. When serving a global audience, optimizing infrastructure and delivery becomes just as critical as writing efficient frontend code.
Recently, my SRE team and I were tasked with improving the performance of our app from both sides. While we used AWS CloudFront, the principles here apply to any CDN.
1. 🚀 Fronting APIs with a CDN
Even in multi-region setups, latency can sneak in via third-party API calls—especially via redundant OPTIONS (CORS preflight) requests. Every preflight adds a round-trip, and if the API is hosted far from your users, the delay can be noticeable.
How to optimize:
- Identify API routes with predictable, cacheable responses and front them via the CDN.
- Create a dedicated CloudFront behavior for these routes—letting you define custom header and cache policies.
- If the response doesn’t vary per user, configure the origin to send a
Cache-Controlheader (e.g.,max-age=60sto start conservatively). - Attach a cache policy for better control over cache behavior.
Note: CloudFront won’t cache responses containing an
Authorizationheader.
2. 📦 Boosting Cache Efficiency
Maximizing your cache hit ratio is essential. The higher your hit ratio, the fewer requests reach your origin—this slashes latency and reduces origin load. As rule of thumb is a app is doing 95-97%+ for high global usage it is considered a healthy cache hit percentage. Though due to certain implementation restrictions this number may not be achievable.
3. Compression & Protocol Upgrades
- Enable gzip and Brotli (br) compression for static assets.
- Leverage HTTP/3 where possible for faster transport—CloudFront falls back to HTTP/2 if the client doesn’t support HTTP/3.
See performance article AWS HTTP/3 Announcement
4. Smart Client-Side Caching
Use these headers to make caching smarter:
-
max-age— how long browsers store content -
s-maxage— how long intermediate caches (like CloudFront) store content -
stale-while-revalidate— serve stale content while fetching fresh in the background -
stale-if-error— serve stale content during origin failures (5XX)
5. 🛠️ Build-Time Asset Optimization
Implement content hashing (e.g., main.[contenthash].js) during your build process. This:
- Ensures only changed files get new names
- Enables long-term caching (6–12 months) without serving stale assets
- Extends to other assets like images and fonts
For reference, see the Webpack caching guide.
Final Thoughts
By combining CDN tuning, cache strategies, and smart build processes, we significantly cut latency, lightened origin load, and improved user experience—especially for our global user base.
Attribution: A major shout-out to stellar SRE team, it was truly a group effort.
📌 Call to Action
Let me know your favorite tricks for speeding up Single-Page Web Apps— especially around CDNs or build tooling! Would love to hear your strategies.
Top comments (0)