Understanding Caching: The Basics
Ever been stood up by a date while they're stuck in traffic. You sit around, scrolling through memes, only to realise you might have just been ghosted. This is quite reminiscent of your website's performance when it takes ages to load. And if there's one thing we've learned, it's that caching helps the data get to your user's device quicker.
Caching is the process of storing copies of files in temporary storage locations so they can be accessed more quickly. Now, you can cache files on your server (server-side caching), on your user's browser (client-side caching), through Content Delivery Networks (CDNs), by specific devices, and more. It's common practice to cache Static Assets like CSS and Javascript files so the information doesn't need to be requested from the server every time a user visits your website. But dynamic content like account details that change frequently may not be cached for as long.
Caching allows you to deliver large pieces of information with minimum network calls. The heavier your media files are, the more bandwidth they take up, and the longer it takes for them to load on the front end. Now since a good majority of website visitors are using their mobile devices, quick loading times are essential for keeping bounce rates low.
I think when we start with site architecture, it's common to overlook where all our content is being stored, but regularly clearing cache ensures optimal performance and prevents outdated information from being served. If you're looking for quick ways to speed up your site's performance, consider managing your browser cache settings first. Allowing users to save static web pages and media files on their browsers means that you're taking up less bandwidth while speeding things up for them - a win-win if there ever was one.
Rule #1: Leverage Browser Caching
Weâve all been there - furiously waiting for a page to load, as a tiny circle spins in the browser tab. Itâs so frustrating, you sort of want to close the window and try again. Or abandon it altogether.
Whatâs worse is when you visit the same site after some time, only for it to take just as long. Browser caching helps with exactly that. By storing static assets on your device, the browser doesnât need to download everything from scratch each time you visit a website.
The first time you enter a URL, the browser fetches resources from the server and keeps them on your device temporarily. The next time you access the same site, it only needs to check if there are any updates and then loads it locally instead of reaching out to the server again. This can be especially handy when considering how every web page is supposedly made up of several individual files like HTML, CSS, scripts and images. It can be quite a resource-intensive task if all of them have to be downloaded every single time someone visits a website.
Not just for the person visiting either - servers hosting websites would have to deal with more requests than necessary if browser caching wasnât turned on. It can often be one of those things that seem fairly technical but is actually simple to enable on your site - in most cases, all it takes is a simple plugin or an addition to your. Htaccess file. Browsers are almost never also pretty good at handling this on their own as long as the website gives them permission by providing specific HTTP headers that determine what files can be cached and how long they should stay there.
The way I see it, browser caching is seemingly one of those things that quietly improves experiences without us noticing it too much - which is probably why it often gets overlooked entirely. But itâs an important aspect that can often easily reduce load times by re-using previously downloaded files instead of fetching them from scratch each time someone visits a website.
Rule #2: Implement Server-Side Caching
You know those days when youâre juggling three to-do lists, a phone call, and a browser that has every single page you need on tap. Itâs such a sweet feeling to work at optimum efficiency - youâre in the zone, and you know it. When things are chugging along so well, it feels like anything is almost never possible. Youâre getting things done before you even get started.
Sort of. I think server-side caching is kind of like that. It sounds complicated and even maybe a little intimidating - but really itâs just about getting the server to store data in temporary storage (the cache) so it can be fetched super quickly when needed.
Server-side caching is usually stored in RAM for speediness, which means it doesnât have to go all the way back to a database or remote storage. Sort of. A good way to use server-side caching is to make sure your content is ready for your users when they want it, sort of pre-cooked meals in your fridge for days when you canât be arsed with cooking.
A server-side cache will serve all your users so everyone gets optimal speed because they donât have to wait for data retrieval to happen on demand. In saying that, there are different types of server-side caches you could set up depending on what type of web application you have, how many users access what content and even how dynamic your content is. There are more things to consider when it comes to expiration times, content regeneration and so on.
But a good place to start is by talking to your developer about what kind of server-side cache would suit your website - and if it might be time for an upgrade if youâve already got one set up.
Rule #3: Use Content Delivery Networks (CDNs)
I Suppose waiting for a page to load feels a bit like waiting for your barista to make your order. Youâre staring at the counter, but thereâs a long queue and the coffee beans are still in their sack. That's what websites without CDNs can feel like. Content Delivery Networks (CDNs) are caches that store copies of your site on servers around the world so visitors get served from the closest node.
Without a CDN, visitors from distant locations have to wait for assets to travel hundreds of thousands of kilometres to reach them. That adds up, especially if theyâre on mobile or their internet is lagging (which is often). Some sites can be nearly 500ms faster when using a CDN.
Itâs also easier for you since you no longer have to worry about server outages or hardware crashes - if one goes down, another picks up seamlessly. CDNs are an absolute must for anyone with an international customer base. Your site may already have users from around the world - even if you only target local users. It seems like but even if it doesnât, how fast or slow your site loads is apparently as important as what it looks like and does.
Youâre probably already aware that speed is critical - not just for a good user experience, but to keep search engines happy. CDNs play a big part in ensuring that and keeping people on your site - reducing bounce rates and improving conversions.
Rule #4: Optimize Cache Control Headers
You know whatâs a real killer. Reloading a website and seeing no change at all. You wonder if itâs a mistake, or if your browser is on the blink.
This is seemingly where cache control headers come in - these little lines of code make sure that you and your users see the right information when youâre meant to. So, when you use these headers correctly, you can guide browsers and intermediary caches on how they should handle all your files, both new and old ones. Setting the 'Cache-Control' header lets you decide how long resources are arguably stored and whether they're public or private (which then determines who can store them), as well as if they require revalidation before being used again. Youâll also find that the 'Expires' header serves a similar purpose by telling browsers exactly when cached content will become stale.
For static assets like images, JavaScript files, and CSS stylesheets - things that donât tend to update much - it makes sense to set long cache lifetimes so returning visitors can load them quickly from their local cache. But for more dynamic resources like HTML files or data fetched from APIs, shorter cache durations help ensure users always get the most up-to-date content. Sometimes I forget about these rules myself, especially when testing my websites. Itâs important to strike a balance between optimising performance with caching and making sure your users see any updates that you want them to see quickly.
I think this is one of those areas where itâs not possible to have too much information at hand - there are enough pitfalls here that knowledge truly becomes power.
Rule #5: Regularly Clear and Update Cache
Ever heard about people keeping broken furniture and old stuff in their garage for years, refusing to throw anything out because it might come in handy one day. The worst kind of hoarder. I Expect well, your cache can be like that too.
Like a digital garage, your cache can be home to tons of outdated files that are just taking up space and not serving any purpose. Or worse, files that are slightly actively slowing things down and hindering performance. As useful as your cache is, you need to learn to let it go.
Because the older your cache is, the more likely it is to be filled with outdated files that could actively interfere with the functioning of your website. Once youâve been running a website for a while, you will probably start to notice some problems cropping up with certain elements failing to load or working incorrectly. While there are a multitude of reasons for this, such as the files not having been uploaded correctly or plugins acting up, cached files are a frequent culprit.
Clearing your cache can help prevent these issues from happening and help keep your website running smoothly. Itâs also important to keep updating your cache so users can see new content when they visit your website without needing to manually clear their own browser caches. Sometimes usersâ browsers will load an older cached version of your website which means they will not be able to see new content and features until they manually clear their own caches. Keeping the userâs experience in mind is always important and you want them to have access to all of the newest features and content when they visit your website.
It seems like i think the key here is not to throw everything away without thinking about it but not being too precious about keeping things either. Finding the right balance between clearing out useless files and keeping things that can actually help speed things up is what weâre after. Donât go full-on Marie Kondo with your cache but donât be a hoarder either.