What caching is and what it means for your website
“Have you tried clearing your cache?”
If you have a website or contracted a team to develop one, you’re no stranger to the question “Have you cleared your cache?” If you’re used to using WordPress to publish or edit content, you’ve come to expect changes you make to show up right away when you hit “Publish” or “Update” from your page editor. But, when changes to the styles or images are updated, sometimes those changes don’t show up right away. This is often a function of your website being “cached.”
So what exactly is “caching?” Let’s explore what that means, and why caching really is a good thing for your website.
STATUS: UPDATED. I CHECK? NOTHING NEW.
Caching 101
The term “cache” is pretty straightforward: it is storage for temporary data that is expected to change very little between site visits. The data that gets stored, or cached, is typically of the sort we call “static” files. Unlike, say, the text of a blog article that may need to be updated on the fly to reflect new changes. Static files that tend to get cached on a website are scripts, stylesheets that usually don’t get changed that often, or files like images that might take up a lot of space and bandwidth for your browser to re-download every time you visit the site.
In short, caching can dramatically increase the speed and performance of a website, and deliver a superior user experience for your visitors. Faster site speeds also directly correlate to higher search engine ranking, so while it may seem like an inconvenience when a change to a cached file doesn’t appear immediately, the long term benefits of good caching far outweigh the short-term annoyance it might cause.
How Caching Works
WordPress sites use a combination of dynamic and static data in order to deliver what you see when your website is displayed. Your site is a compilation of several files of different types and languages: PHP, JavaScript, CSS, HTML, a SQL database, and any media files such as images, videos, audio files and the like that all get put together in the correct order by your server and your browser working together.
The magic happens behind the scenes, as the server that your website is hosted on essentially builds your site on the fly using the coded instructions from the primary WordPress function files. These files dynamically generate a site that a browser can read and display, where all of the files are combined into essentially one big file that gets rendered as the text, colors, fonts and images that you see on your screen.
In order to speed this process up, there are two primary types of caching that your WordPress site can and should take advantage of in order make things nice and speedy: the server cache and the browser cache.
The Server Cache
The content that you write into your blog posts, articles and pages is stored in the database. This content always gets pulled fresh from that database when a user visits one of your pages, and is dynamically written into the page that gets displayed before it ever hits the screen. This content doesn’t get cached since a) it can change often and quickly, and b) is typically fairly lightweight text. The page that you’re on is told only to access the content for that given page, so you aren’t loading the entire database all at once every time the page loads – just the relevant bits for that page or post.
The styling and the functionality of your page, however, tends to share the same styles, fonts and functionality across the entire site, and not just that page. In order to speed up how things are rendered, the server will cache files that remain consistent across the site. These files are usually CSS stylesheets and JavaScript files, and depending on your hosting company and a variety of plugins available, you can have greater or lesser control of how these files are cached.
The best cache control plugins on the market currently are WP Super Cache, W3 Total Cache, and WP Rocket. These cache plugins work great on WordPress sites that are hosted on shared hosting, or through non-WordPress specific hosts like GoDaddy, SiteGround and the like.
Managed WordPress hosts like WPEngine, Flywheel and Pagely typically offer their own, built-in caching solutions, and therefore may not be compatible with any of the above plugins – be sure to check with your hosting company to see if plugins are needed or not.
Caching solutions for WordPress these days are aggressive and advanced – this is a great thing for performance! But consider this scenario you may have encountered before: you requested some updates be made to your website, contacted your development team, and your developers informed you that the changes have been made. You go to refresh the page and…nothing’s changed. What gives?
Chances are that you are still seeing the old version of the files, even though the new ones have been uploaded and are living on the server. Developers know to flush the server cache on their end after they have uploaded, which in turn notifies the server that there are new versions of the cached files to replace the older versions.
In most cases, all that is required is to wait patiently for a bit, and the server will clear out the old cached information and replace it with the new data. However, sometimes just flushing the server cache doesn’t do the trick, and you still aren’t able to see the changes. If this is case, the culprit is most likely the browser cache.
The Browser Cache
Your browser has its own cache for temporary internet files. This cache stores files from the sites you visit on your own hard drive, and makes return visits to each page you’ve viewed load much faster than the first time you went to that particular web address. What this means, however, is that your browser often ignores changes that were made to certain files, especially to stylesheets and scripts. This means things like margins, fonts and colors can appear to have not changed even when you know they have been – your browser hasn’t yet downloaded the latest version of those files.
For desktops and laptops, it’s quite easy to do what’s called a “hard refresh” (and even then, it may take a few hard refreshes to kick things into gear.) Here’s how to do a hard refresh on the most common operating systems and browsers:
On Windows/Linux:
Chrome:
Hold down Ctrl and click the Reload button, or hold down Ctrl and Shift and press R.
Firefox:
Hold down Ctrl and Shift and then press R.
EDGE/IE:
Hold the Ctrl key and click the Refresh button.
On Mac
Chrome:
Hold down Shift and press reload.
Firefox:
Hold down Shift and press refresh.
Mobile devices tend to be trickier, as there isn’t a fast combo of key presses that allow them to hard refresh. For these devices, you will have to manually clear your browser cache. Here’s how to do that for the most common devices/browsers:
On Android:
Chrome:
- In Chrome, tap the menu button in the upper right hand (three vertical dots).
- Go to Settings > Privacy.
- Click “Clear Browsing Data.”
- In pop up, check the boxes next to the items you want to clear (including your cache) and click “Clear.”
On iPhone/iPad:
Safari:
- Go to Settings > Safari and scroll to bottom of options.
- Click “Clear History and Website Data.” (
If you do not want to clear your History, click “Advanced” > “Website Data” > and “Remove All Website Data.”)
The Takeaway
Just remember, caching is your friend! As a site owner or operator, caching ensures that your visitors have a smoother, faster experience on your site, which leads to great page ranking for top.
