Javascript 101: All about caching

Have you ever noticed how some websites load super fast when you visit them again? That's thanks to web caching! Caching provides a personal storage space on your computer or phone for website files.

Here's how it works:

• When you visit a website for the first time, your browser downloads all the files it needs to display the page correctly. These files include HTML, CSS, JavaScript, and images.
• Instead of just using these files once and then forgetting about them, your browser keeps copies of them in its storage.
• The next time you visit that same website, your browser checks its cache first. If the cached files are still valid (meaning they haven't changed on the website), it can quickly load those files from the cache instead of downloading them again from the internet.

So why cache? Here are a few reasons:

1. Faster load times! Since the files are already on your device, they load almost instantly from the cache, rather than having to download everything from the internet again. This makes websites feel super snappy!

2. Less data usage: By using cached files, your browser doesn't need to download as much data from the internet, which is great if you have a limited data plan or a slow internet connection.

3.Reduced server load: Websites don't have to send the same files over and over again to every visitor, which makes their servers less stressed and keeps things running smoothly.

4. Offline browsing: Some websites can even let you view cached versions of their pages when you're not connected to the internet at all, thanks to a technology called service workers.

But! Sometimes you might want to force your browser to ignore the cached files and load the latest version of a website. This is called "cache busting," and there are a few ways developers can do it:

• Changing the file names or adding version numbers to the end (like style.css?v=2). This is how we use to support cache busting.
• Setting special headers that tell the browser how long to cache the files. This is what we optimized in the latest release.
• Using unique "fingerprints" based on the file contents, so any change creates a new fingerprint. Webflow does a lot of this.
• Adding random values or query strings to the file URLs. We use this method as well.

Cache busting is useful when a website has been updated, and you want to ensure you're seeing the latest version without any old, cached files interfering. Go see if you can find cache busting in the wild and let us know what you find.