Caching Explained, & How it can be both Frustrating & Helpful at the Same Time
Issues created by caching can be one of the most frustrating situations to be in if you’re a website owner and have been making changes to your website. It’s a technical issue that isn’t always easy for web developers or SEO guys like me to explain in a satisfactory way, but we thought we’d break it into parts to hopefully mate it more logical and understandable.
In short: caching is simply a way to hold files close at hand so that they are quicker to access the next time you need them. That can be managed in two ways.
If you use a computer to access the internet, then you’re probably using a browser application like Internet Explorer, Edge, Chrome, Firefox or Safari. There are others available, but it’s most likely to be one of these. Browser Caching is a file storage system operated within your web browser on your computer.
If you visit a website that requires an image like a logo to be loaded from the website and displayed on your computer screen, then the browser will download the image and save it on your computer temporarily. Because the next page you view from the same website uses the same logo, it’s likely that your browser will use the file that was already downloaded instead of downloading again. This system makes the user experience better because there are many common files needed for each of the website’s pages. The website ‘appears’ to load faster after the first page was loaded. The reality is that the cached files are now loading from your own computer and you may not even need to be connected to the internet to view them.
There is just one disadvantage with a browser cache: the files you may be accessing and using to display the website might not be the current versions of the files. In other words, the images, styles and some other content may have changed since the files where added into your browser cache and you may be viewing an out of date version. There are two ways you can try to resolve this: 1) use the “refresh” function in your browser (usually the CTRL & F5 keys – or you can use the “refresh” button on the browser), OR, 2) clear the cache in your browser via the privacy & caching settings. Both of these functions are unique to your computer so nobody (including the website owner) can fix this situation for you without access to your computer.
It’s possible for the website developer to set automatic expiry dates on the file resources needed to display their website in your browser. When the expiry limit is reached the cached file will be downloaded again from the website, instead of using the cached version. The expiry can be set to almost any length of time from 1 second to many years. If the web developer has set inappropriate lifetime expiry dates on a website that changes often, it means the website users may always be viewing old and outdated versions of the website content.
Key Point: Browser caching occurs on the user’s computer.
Many website types are not stored as a fully-assembled site. In fact, it’s common practice to assemble the necessary part of the website from templated sections whenever they are required for downloading to a user’s browser for display, and this is how WordPress works too. In other words, WordPress websites are assembled ‘on-the-fly’ by accumulating components like the header, body content, footer, slide shows, side-bars, widgets etc into a page that can be displayed. Even the instructions for font-size and colour are usually stored in separate files. Ideally, this all happens in the space of a few hundred milliseconds (0.2-0.3s), but often it takes longer and makes the user-experience frustratingly slow. A web page should be able to assemble and display in just 0.5-2 seconds or so, so every 100 milliseconds lost is precious time wasted.
Server caching is a system where the pages of the website are pre-loaded into a temporarily assembled state so that the assembly time can be bypassed when the user’s browser tries to display it. A page expiry time may be set so that once expired the server can reload and assemble a new page including any updates made since the last assembly.
The user cannot control the server cache and this may lead to delays in them being able to see website updates. Using the ‘refresh’ function or clearing the browser cache will not resolve the update delay or viewing of expired content.
Key Point: Server Caching is 100% out of the control of the user.
DNS stands for Domain Name Server. It’s essentially the master index for where a website is hosted. DNS caching doesn’t relate to website performance directly, but it can have an effect on the user experience.
When a person wants to view a website, their browser connects to the internet via their Internet Service Provider (ISP). That ISP holds a copy of the DNS records for the particular website, and if all goes to plan, they will connect the browser to the correct location. If a problem occurs, it’s most likely to do with the DNS cache held by the ISP or any other data carrier used to transmit the request to the website. The website may have moved, may be turned off or may have been redesigned or upgraded, but if the DNS records are cached with the ISP (and they always are) then the ISP may connect the user to the old location of the website hosting platform.
As web developers and SEO people, we come across this issue a lot. We rebuild websites all the time, and take over website hosting. This means also updating the DNS records for the website on launch. The delayed update caused by DNS caching can mean that some users can view the new website while users connected through other ISPs may still be directed to the old website design. Both versions of the website are live at the same time during this transition period.
The expiry time for most ISPs’ DNS cache is usually within 8 hours, and sometimes as little as 1 hour. There are a few that are much slower to update their DNS cache, and it can even be days. In rare cases when an ISP’s DNS cache is not updating frequently enough, it can cause severe issues for the website user and the website owner is not immune from the issue if they happen to be using that ISP as their internet provider. The only way for the website owner to bypass this problem is to connect to the internet through another ISP that has already updated their DNS cache. Typically, end users don’t experience a problem unless there are promotional activities prompting them to visit the ‘new’ website which they may not be able to access yet via their ISP.
Key Point: DNS caching is out of the control of both the user and the website owner.
The key ‘pro’ of caching:
Speeds up delivery of website content to users to improve the user experience.
The key ‘con’ of caching:
May sometimes cause users to experience display or usability issues with the website.
In our view, the ‘pro’ far out-weighs the ‘con’.
Using caching in WordPress:
The WordPress core operating system does not support browser or server caching, however we typically add a caching function to improve the user experience when viewing the website. Occasionally, the caching system will cause a user to view expired contents – usually when the website owner has updated something and the expiry time of the file in the user’s browser has not been reached and the old version of the file is still being used. For owners of WordPress websites that use either browser or server caching, it’s a good idea to ‘flush’ or ‘empty’ the cache after making any changes to the site. This function will vary depending on which caching system is used and you should always check with your developer if you are unsure how a caching system will affect your WordPress installation.
Using caching in Magento:
Magento natively supports caching. This means that all updates made to a Magento website should be followed by a cache flush to ensure users are able to view the new content.