What is Cache & How is a Website Cached?
Table of Contents
Cache is vital in speeding up operations and enhancing user experience in web browsing and software application use.
This article will help you understand what cache is, how caching works, its different types, and how to clear the cache for optimal website performance.
Cache memory is a broad term that can refer to server infrastructure and local browser or hardware cache.
While there are many technical aspects of cache, we’ll define the ones most relevant to website owners and users.
How Does Caching Work?
The image below shows the page loading process and how data is cached at different points:
It starts when a visitor enters a website’s URL into their browser.
The browser first checks its cache to see if any parts of the page (like images or files) are stored locally. If something is found, it loads immediately. If not, the browser sends a request to the website’s server.
Website files (like HTML, CSS or JavaScript) can come from a Content Delivery Network (CDN), which helps load these resources faster by storing them closer to the visitor.
Next, the server assembles the content and sends it to the browser. If the webpage has been stored before, a page cache might send a saved version instead of rebuilding it.
If the page isn’t cached, the web server processes the request. It gathers all the necessary resources and may interact with a database to fetch dynamic content like blog posts or user data.
Caching at various stages reduces the time it takes to load content, and increases overall performance.
What are the Different Types of Cache?
Website caching can be categorized into server-side and client-side cache. Separately, hardware components (such as the CPU and RAM memory on your device) also have their own cache to speed up operations.
1. Client-side caching
Client-side caching happens on the user’s device after data has been received from the server.
-
Browser cache
Browser cache is the most common type of cache that users encounter. It stores information from websites you visit for the first time on your local device.
Web browsers such as Google Chrome, Microsoft Edge, or Safari use this cache to improve load times.
For example, when you visit a news website, your browser stores elements like images, logos, and CSS files. The next time you visit, it retrieves those files from the cache instead of downloading them again.
-
Local DNS cache
Your device caches DNS information to quickly resolve domain addresses.
When you visit a website for the first time, your system queries an external DNS server to get the IP address.
On the next visit of that same website, it first checks its local DNS cache to see if it has recently stored an IP address for that domain.
If the domain and IP address are found in the local DNS cache, the client can skip querying an external DNS server. This improves loading speed and lowers network traffic and the load on external DNS servers.
2. Server-side caching
This type of caching happens on the server before site data is sent to the local client (browser or device). It aims to reduce the server’s processing load and deliver content more quickly to the user.
Server-side caching works on multiple layers. They target different aspects of performance improvement within the server environment.
-
Reverse-proxy Cache
Reverse proxy caching stores entire HTTP responses, such as full web pages, static CSS or image files. When someone requests a page, the proxy checks its cache first. If the page is cached, it sends the saved version, speeding up load times.
This reduces the workload on the main server, which doesn’t need to resend the page. Tools like NGINX and Varnish are commonly used for this type of caching.
-
Dynamic Cache
This layer targets content generated by websites, such as WordPress. CMS applications create pages dynamically based on user requests and database queries.
Unlike static websites where a page is stored as a simple file (like HTML), dynamic websites use database queries and server-side processing to generate pages.
Dynamic Caching reduces the need for that by caching the full page response generated by the server. This leads to faster page loads and reduced server load for future requests.
-
Object cache
Object caching collects individual objects of information used for generating a page.
For example, WordPress might need to retrieve the site’s navigation menu. This involves a database query.
With object caching, this query result is cached. So, even if the dynamic page changes, the menu data can still be pulled from the cache without hitting the database.
It is particularly beneficial for high-traffic websites or those with large databases because it caches frequently-used pieces of data across multiple pages. This significantly reduces load on the database.
-
Opcode cache
Opcode caching improves performance by storing compiled PHP code (opcodes) in memory.
It eliminates the need to recompile scripts for each request and speeds up execution times. OPcache is the most common opcode caching solution.
By caching compiled code, it optimizes the performance of PHP-based applications, such as WordPress. This also reduces the CPU load on the server.
-
CDN Cache
CDN caching is important, especially if a website has a global target audience. It consists of CDN edges that store cached copies of website data in different locations.
Each visitor loads site data from the nearest CDN edge, instead of making a request to the origin server. This allows users far from the data center to access pages more quickly.
CDNs are also useful for distributing traffic and reducing the load on the origin server. This improves performance and provides an additional layer of security.
3. Hardware caching
While it is more relevant to computing performance, hardware cache can serve as a good analogy for how caching works on websites.
-
CPU cache
CPU cache is a small, high-speed memory located in the central processing unit of a computer. It holds temporary files that are frequently used by the CPU.
-
Memory cache
Memory cache stores data in your system’s RAM for quick access. For example, Google Chrome can store data in RAM if you have a lot of tabs open, in order to make internet browsing smoother.
-
Disk cache
Your storage drive also has its own cache, such as flash cache and persistent cache. They increase the speed of read and write operations. This is important during high-demand periods, like gaming or video-editing.
Benefits of Cache for Your Website
1. Improved Website Speed
The most obvious benefit of caching is improved website speed. Reducing page load times is an important factor in user retention.
Studies have shown that more than 50% of users leave a website if a page takes more than three seconds to load. Different levels of caching directly address this issue by significantly increasing performance.
2. Reduced Server Load
Caching reduces the need for repeated data requests and allows the server to handle more traffic. By reducing server load, caching enables your website to run more efficiently.
3. SEO Boost
Speed is an important factor for Search Engine Optimization (SEO). Faster websites tend to rank higher because search engines prioritize sites that offer a better user experience. It is recommended to use all available caching tools to improve your chances of ranking on the first page of searches.
4. Offline access
A significant advantage of using CDN caching is offline access to web content. For example, SiteGround’s CDN Always Online mode keeps your pages accessible in case of an outage. If the main server goes down visitors can still have a seamless experience on your website.
How to Clear Cache
Old cached data can cause websites to load outdated content. Clearing all caches frees up storage space on your device. It also prevents server-side issues with cache staleness and improper invalidation.
1. Clear browser cache and cookies
Cache and cookies serve different purposes. Cache stores website data to improve load speed. Cookies store information like login details and preferences. Keep in mind deleting cookies will also delete saved login sessions from your browser.
To clear browsing data in Google Chrome:
- Click the three-dotted line in the upper right corner to access the settings menu
- Select Delete browsing data.
- Check Cached images and files and Cookies and other site data
- Click Delete Data.
You can also specify a time range to clear, but it’s usually recommended to clear the entire cache when troubleshooting.
For Safari, click on History from the menu bar > Clear history > select a time range > Clear History
We also have detailed articles for the exact steps to clear cache on other browsers, an Android device and iOS mobile devices.
2. Flush DNS Cache
Sometimes, it may be necessary to flush the DNS cache to resolve issues related to IP address mismatches.
The steps vary across different operating systems. We’ve made separate articles for clearing DNS cache on a Windows computer, Apple computer and a Linux device.
3. Purge Server-Side Cache
SiteGround’s Dynamic cache is purged automatically in a certain period of time. You can also purge it manually via the Site Tools dashboard, or use the Speed Optimizer “Purge Cache” button.
Most hosting providers that offer some form of server-side caching also have a Clear Cache or Purge Cache button in their dashboards.
4. Purge CDN cache
To clear the CDN cache, navigate to your CDN provider’s settings and look for a Purge Cache/Clear Cache button.
For SiteGround’s CDN, go to Site Tools > Speed > CDN > click Purge Cache. This clears all stored data across the CDN’s network so users are served the most current version of your website.
Possible Caching Problems
1. Cache Staleness
Cache staleness occurs when the browser serves a stale (outdated) copy of the page.
When you can’t see recent updates, it’s usually because the browser is still retrieving the outdated, cached version.
In such cases, clearing the browser cache and purging all server-side cache should resolve the issue.
2. Cache Miss Penalties
Caches operate using a system of cache hits and cache misses.
A cache hit occurs when the requested data is found in the cache.
A cache miss means the site data is not cached, forcing the system to retrieve it from the origin server.
Cache misses increase load time and can negatively affect user experience.
3. Limited Storage
Cache files can sometimes take up significant storage on your device if they accumulate over time. This can slow down your internet browser.
In such cases, it is advisable to clear your browsing history, and both the cache and the cookies.
Why is Caching Important?
Caching website data is a complex process. We’ve covered aspects that are most important to website owners and users.
There are two main takeaways:
- Whether it’s server-side, client-side, or hardware-based, the goal of caching is always the same – to speed up data access and increase performance.
- Clearing caches is an important step when troubleshooting technical issues.
If you utilize caching effectively, you can significantly improve the speed, efficiency, and reliability of your website.