EDUCBA Logo

EDUCBA

MENUMENU
  • Explore
    • EDUCBA Pro
    • PRO Bundles
    • Featured Skills
    • New & Trending
    • Fresh Entries
    • Finance
    • Data Science
    • Programming and Dev
    • Excel
    • Marketing
    • HR
    • PDP
    • VFX and Design
    • Project Management
    • Exam Prep
    • All Courses
  • Blog
  • Enterprise
  • Free Courses
  • Log in
  • Sign Up
Home Software Development Software Development Tutorials Software Development Basics HTTP Caching
 

HTTP Caching

Priya Pedamkar
Article byPriya Pedamkar

Updated May 25, 2023

http caching

 

 

Introduction to HTTP Caching

I am sure you have noticed that it takes some time to load when you open a website for the first time. However, when you open it again after some time, the site loads much faster. Imagine if a site took the same time to load every time; how slow browsing would feel. Well, this is all thanks to a nifty idea called HTTP Caching.

Watch our Demo Courses and Videos

Valuation, Hadoop, Excel, Mobile Apps, Web Development & many more.

What is HTTP Caching?

HTTP caching involves storing commonly or frequently used data in a readily accessible location. As a result, accessing frequently needed data becomes much faster because the computer doesn’t have to reach too far. Caching comes into play in web browsing when web browsers like Chrome store a copy of a website or web app on the local storage. Caching a website eliminates the need for the web browser to redownload all the server data, resulting in faster browsing.

For instance, once a browser downloads a website’s CSS file, there is no need to download it again for every subsequent session page. Many JavaScript files, images (such as the site’s logo and social media icons), and even certain dynamic content can enable caching by utilizing Cache headers.

Cache Headers in HTTP

HTTP Caching has two major cache headers; the first one is called “Cache-Control,” and the second one is called “Expire.”

1. Cache-Control

You can consider Cache-Control as a Switch to toggle the caching in the user browser. Adding this header enables caching for all supported web browsers. If this header is not present, no browser will keep a cache of the web page contents even if it helps to cache. The Cache-control has two types of privacy settings, the first one is Public and the second one is Private.

In the case of the Public, the resources can be cached by any intermediate proxy, such as Content Delivery Networks (CDN). When a Cache-Control header with a Private response is included, it informs the browser that caching will only be performed for a single user and not for any intermediate proxy.

The value “max-age” in the Cache-Control header sets the time for the content to be cached. This time is in seconds.

Cache-Control:public, max-age=31536000

2. Expires

The Expires header is used when Cache-Control is present in the code. This simple HTTP Cache header sets a date from which any cache resource is considered invalid. Once the cache expires and the user loads the website, a web browser will request all page content again.

Conditional Requests

The discussed headers simply inform the browser about when to retrieve the data from the web server. Conditional Requests, on the other hand, tell the browser how to retrieve them. Conditional Requests instruct a browser on how to query the server to determine if the cached data is still valid or outdated.

In this process, the browser sends some data about resources it has cached into its memory, and after reading this data, the server decides if the data is outdated or not.

1. Time-Based Requests

In time-based requests, we check if the requested resource has changed on the server or not. If the cached copy in the browser is the latest, the server will return code 304.

To set Conditional Requests on a time basis, you can use “Last-Modified” in the response header.

Cache-Control:public, max-age=25998579
Last-Modified: Fri, 08 Jul 2018 15:25:00 GMT

2. Content-Based

In Content-Based requests, we check the server and cache copies for the MD5 Hash (or any other viable option). This tells if the data is the same; if the data is different, the MD5 checksum will not match, and the server will send a fresh copy of resources.

This is done via “ETag” in the header. Its value of it is the digestion of resources.

Cache-Control:public, max-age=25998579
ETag: "496d7131f15f0fff99ed5aae”

Visibility

Almost all modern browsers include development-related tools that let you check resources, source code, and other web page aspects. Among them, you can find a tool to see the headers returned by any application.

To see these headers on Google Chrome, you can right-click on an empty web page area and click on “Inspect” or press CTRL+SHIFT+I to open DevTools. In this tool, click the Network tab and press CRTL+R to reload to see all the page headers.

Use Cases in HTTP Caching

Below are some uses cases of HTTP Caching which are as follows:

1. For Static Assets

You can opt to aggressively cache the contents for static assets of a page, such as images, JS Files, and any CSS files. Not having to load these files will result in impressive performance improvement. For this use case, go for the Cache-Control Header with a max-age value of more than a month or even a year.

Cache-Control:public; max-age=31536000

2. For Dynamic Contents

In the case of a page’s dynamic contents, you will need to think about what files the browser should cache and for how long. If the content changes frequently, you must ensure that the time duration you pick for caching won’t result in any problems for the user.

3. Caching of Private Content

As we discussed in the Cache-Control section, if the content of a page is private, you can prevent it from being cached by intermediate proxies like CDNs by including the “Cache-Control: private” header. Another safer approach is not to cache any private content at all.

Implementing HTTP Caching

Now that you know what HTTP Caching is and how it works, let’s look at how you can implement it on your website. The implementation of HTTP Caching is a bit different for different server types. In our case, let us look at implementing caching via the .htaccess file.

To enable the Caching on-site, you can add the headers in the .htaccess file on your server, for example:

FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$"
Header set Cache-Control "max-age=31536000, public"
/FilesMatch

The above will cache all to pdf, Flv, jpg, and other formats mentioned in the “File Match” for one year.

Conclusion

HTTP Caching is one of the essential tricks that make browsing your site a faster experience for your visitors, and now that you can see how it works, you can implement it on your sites and web apps to make them faster for your users and save your server bandwidth.

Recommended Articles

This has been a guide to HTTP Caching. Here we discuss the implementation, conditional requests, cache header, and use cases of HTTP. You can also go through our other suggested articles to learn more –

  1. Python HTTP Server
  2. HTTP Methods
  3. HTTP Cookies
  4. Flask HTTPS

Primary Sidebar

Footer

Follow us!
  • EDUCBA FacebookEDUCBA TwitterEDUCBA LinkedINEDUCBA Instagram
  • EDUCBA YoutubeEDUCBA CourseraEDUCBA Udemy
APPS
EDUCBA Android AppEDUCBA iOS App
Blog
  • Blog
  • Free Tutorials
  • About us
  • Contact us
  • Log in
Courses
  • Enterprise Solutions
  • Free Courses
  • Explore Programs
  • All Courses
  • All in One Bundles
  • Sign up
Email
  • [email protected]

ISO 10004:2018 & ISO 9001:2015 Certified

© 2025 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

By continuing above step, you agree to our Terms of Use and Privacy Policy.
*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you

EDUCBA Login

Forgot Password?

🚀 Limited Time Offer! - 🎁 ENROLL NOW