Http Caching Basics

Ivan Garcia
Aug 22, 2017 · 2 min read

User interface, customization, and impressive features are always in mind when thinking about what makes a good web application for the user. While all of this is true, the imminent reality is that it won’t be the bigger factor for user engagement; speed will be. An slow website is a proven way to drive away your audience, and that’s when caching can come in to help.

Caching Principles

Caching is the basic action of saving loaded information client-side to avoid unnecessary requests and loads to the server. There exists many caching protocols and algorithms, and browsers are smart enough to cache some information. However, developers have a better sense of static elements, the ones that won’t change often and can be cached longer, and dynamic elements that change often

HTTP Caching

Source: https://devcenter.heroku.com/articles/increasing-application-performance-with-http-cache-headers

HTTP allows you to store information in the client’s local browser, it is set in the response header and let’s the developer select important or heavy “load” resources to be saved. This method allows faster loading speeds after any page has been visited before.

The Cache-Control header is the most important header to set as it effectively ‘switches on’ caching in the browser.

Cache-Control can be set to public or private, which will determine if only the end-user is able to save or if it’s available for intermediate proxies. Moreover is important to set a protocol to refresh elements when needed so that users have access to the current data and HTTP provides multiple options. The basics are:

  1. Expires: sets a timestamp on the cache that prevents the browser from requesting the resource until it is expired
  2. Time-based: sets a Last-Modified or a If-Modified-Since tag. The client will request the resource and the server will only send it if the resource has been updated
  3. Content-Based: sets an ETag to identify the resource version. Similar to time-based controls the client will request the resource and the server will only send it if it has been updated.

Conclusion

Browser speed is crucial for the user’s experience and caching heavy data can improve website’s performance and server load. It is good practice to cache whatever is possible and use the client-side storage as a resource.

)
Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade