Cache busting πŸ’₯

More and more Slater-powered Webflow projects are running in production! So, let's talk about what that means.

Slater works a little differently in a production environment. Instead of serving a file from the Slater server, we serve a file from Amazon S3. The S3 file is extremely resilient, and by default, it is cached by the browser.

When your site doesn't seem to be updated, even after publishing changes, it's likely a caching issue. Your browser is simply not getting the latest copy of the site files. Caching is every developer's arch-nemesis, even though it is every developer's best friend. Caching makes the web faster, even if it leads to the common advice of "try it in incognito mode."

Slater has provided cache-busting functionality since early on, but it wasn't easy or intuitive. You had to manually update the v variable in the script to force a cache refresh.

We're excited to announce that we've just launched improvements to make production deployment more straightforward. With the new minification setting and improved caching, working in production should now be as easy as working in the staging environment!



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.

Happy coding!

- The Slater Team



If Slater helps you create better websites, please support the team behind it.

Welcome To Slater!

Slater resources, updates and community activity

Read more from Welcome To Slater!

We're back from a company-wide summer pause (or winter pause for our Southern Hemisphere team members). Edgar Allan is hitting it's numbers! Let's look at some new Community Library scripts: πŸ‘€ Dynamically loads HTML content based on a random number. This is a quick script we wrote to give a dynamic intro into a soon-to-be-released From Jared Malan ✍️ Create a variable for your...

We're rolling into a holiday week in the US. If you need an animated American flag to celebrate, look no further. But! We have users from all over the world. For those outside of the US, try updating the code to make an animated flag of your country (hint: use AI). If you make one, please share. We'll get it added to the Community Library. πŸ‡ΊπŸ‡Έ Render and animate an American flag on a canvas with dynamic waving effects....

We're adding new community library scripts each week. Let's take a look at some of them. πŸ‘Ύ An interactive swarm Create a dynamic grid of squares that react to mouse movement, simulating a swarm-like effect (is it a swarm?). This code is the scaled back version of something we did for a client. We'll show you the finished experience once that projects launches. Play with the example: Review the code:...