Deconstruct With Swati

Deconstructing What Makes Great Software Feel Effortless.

Welcome to Swati's Blog. Subscribe and get my latest blog post in your inbox.

Smart Caching & CDN Strategies

image

In today’s product landscape, fast-loading apps and websites directly translate to better user engagement and retention. Studies show even a 2-second delay in page load time can lead to a 32% increase in bounce rates. Similarly, 40% of users abandon a website that takes more than 3 seconds to load. As we already know, Caching and Content Delivery Networks (CDNs) are powerful tools to meet this demand. Join me in further deconstructing and dissecting their use cases in efficient system design and enhanced user experience.

Published 6 months ago

Key Definitions

  • Cache: Temporary storage of data that can be retrieved faster than re-fetching or re-computing it. Web caches can store HTML pages, API responses, images, and more.


  • CDN (Content Delivery Network): A globally distributed network of servers (edge nodes) that cache content near users. CDNs like Cloudflare, Fastly, and AWS CloudFront reduce latency and offload traffic from origin servers. 


  • Time-to-Live (TTL): The duration that cached content remains valid. After TTL expires, the cache must be refreshed from the origin.


  • Cache Invalidation: Mechanism to remove or update cached content. Can be manual, time-based, or event-driven. 


  • Cache Hit Ratio: The percentage of requests served from the cache instead of the origin. Higher hit ratios imply better performance and cost savings.



            

Case Study 1 - Slack:

Slack is used by teams all over the world, and people rely on it daily for communication, which makes speed a non-negotiable attribute. When we open the Slack web app, we don’t want to wait for it to load, it needs to feel instant. To achieve that level of responsiveness, Slack uses a global CDN (Content Delivery Network), specifically AWS CloudFront. What this means in simple terms is that Slack stores its web assets, like images, stylesheets, and scripts, in servers that are physically closer to the user. Instead of making a long round trip to Slack’s core servers, our browser fetches these files from a nearby location, dramatically improving loading times.


Not only this, but Slack takes this a step further. They don’t rely on just one CDN endpoint, they’ve built in redundancy by using two separate domains: a.slack-edge.com  and  b.slack-edge.com. If one is slow or goes down (which can happen with any global service), Slack’s app automatically switches to the backup domain without the user noticing. This failover logic is a clever safety net that ensures reliability even in the face of CDN outages or regional slowdowns. It adds technical complexity, but the payoff is huge: users get a seamless experience. Designing systems with resilience in mind, even something as simple as a backup URL, can help us avoid downtime and protect user experience.

Case Study 2 - Instagram:

When we scroll through Instagram, one of the reasons it feels so fluid is because the app is doing a lot of work behind the scenes. Instagram doesn’t wait until we swipe to fetch the next image, it preloads the content as we scroll. This is a form of local caching, where the app stores data on our device temporarily.


At the infrastructure level, Instagram also relies on its own CDN to deliver images and videos from edge servers close to the user. This minimises delay, especially for users in regions with slower internet connections or on mobile networks. However, there’s a trade-off. Because content is cached for speed, we might sometimes see old information; for example, a new comment or like might not appear right away. Instagram deals with this by refreshing key pieces of data (like the latest feed) when we open the app again or switch back to it from another screen. Perceived speed can be just as important as real-time data. Most users are happier with a fast experience that’s “almost current” than a perfectly up-to-date one that lags.

Case Study 3 - Shopify:

E-commerce platforms like Shopify face a unique challenge: they must perform reliably under massive spikes in traffic, especially during high-stakes events like Black Friday. To keep pages loading fast and avoid overwhelming servers, Shopify uses a CDN to cache as much of the page as possible. This includes static parts of the site such as the layout, branding, and product images. These elements don’t change frequently and can safely be reused across many user sessions.

However, not everything on a shopping page can be cached. Prices, inventory levels, and discount offers can change rapidly and must be kept up to date. Shopify handles this by separating dynamic content from the static parts. For example, while the checkout page’s structure is cached for speed, the price and availability are loaded separately through real-time API calls. If there’s a change to the product, say, a flash sale or an item selling out, Shopify’s backend triggers a process that automatically purges the old cached version and replaces it with a fresh one. Tools like automated cache purging and short time-to-live (TTL) settings for dynamic data can help strike that balance.

Final Words


Dynamic Web Apps and Cache Layering: Modern SPAs (Single Page Applications) like marketplaces and social platforms use multi-layer caching: Browser cache for static files, CDN edge cache for semi-static API responses, and origin server for real-time updates. Some use advanced techniques like cache tags, `stale-while-revalidate`, and conditional GET requests. For example, when a user views a product page, the image and layout might be cached at the edge, while the price is fetched dynamically.

 

Accounting for caching/CDN setup in early design planning can prove efficient in the long run. As much as caching/CDN setup is important, understanding what can be cached (static vs dynamic content) and designing invalidation mechanisms is important too. Next comes, track cache hit ratios, latency, and error rates and using these to guide optimization efforts. Another key aspect is planning for Failover and implementing multi-CDN or fallback domains if uptime is critical. Caching and CDNs are more than performance boosters, they are strategic levers for delivering scalable, resilient, and delightful user experiences.