Caching stores copies of files in a cache so that cached content can be accessed quickly. Caching improves how a website loads, but caching can occur in numerous locations.
- Caching is technically complex and seen on both the website client- and server-side.
- Caching uses a hardware device or a software application to store frequently-accessed static website content temporarily. For example, images and content on a website that remain static would be ideal for caching, so they do not have to be repeatedly downloaded to the visitor on repeat visits. This improves site loading speed.
- Caching is not used when a website page uses “dynamic.” For example, on a WooCommerce store, we would exclude the Cart and Checkout pages from any caching since those need to remain very dynamic and resilient to rapid change. Caching such a page might render inaccurate versions that would not be a true reflection of recent modifications to a cart.
So what’s this in reality?
On visiting a website page, a data request occurs, and one must wait until the host server responds to literally “serve” data until it’s possible to view said data. The web cache provides a mechanism to speed up this process and make data delivery more efficient.
A web cache is website data a computer has stored temporarily for fast and easy future access. Without web caching, browsers have to send new requests every time visitors arrive on your site. If your content has been cached, your server or visitors’ browsers can send a static copy of your content instead.
Caching reduces the number of requests sent to your server. Those individual requests take longer to process than cached responses, and if a website has much simultaneous traffic, those hits can consume a lot of valuable resources and slow the site down. This is the primary purpose of caching and how it can increase page speed.
So while boosting loading speeds is important, caching also reduces network costs. It can cache your website content at numerous points between users’ browsers and your server. When cached closer to users, your site’s data does not use as many resources. This reduces the impact on your server and could save you money on network costs.
As mentioned above, there are specific points in the network where caching can be used. There are four major types of caching that should be considered:
- Site cache: Ideal for static content.
- Browser cache: A popular and effective client-side cache option.
- Server cache: Ideal to reduce server strain and cope with high traffic.
- Micro cache: A targeted option for highly dynamic sites.
- DNS Cache: An IP lookup database stored by ISP network servers and on local computers in the operating system and browser.
Client-side and server-side caching both have their benefits. They also have different implementation methods and are often used in combination. Implementing the appropriate web caching methodologies when optimizing a website can not only boost your page loading speeds but also improve the site’s User Experience (UX).
1. Site Cache
Site caching with WordPress is typically created using a plugin such as WP Rocket, Autoptimize, WP Super Cache, W3 Total Cache, etc. Some hosts, e.g., SiteGround, have proprietary plugins and tools configured to work well with their network setups.
The site cache or page cache stores website data the first time a webpage is loaded. When a user returns to your website, saved elements are quickly accessed and displayed to visitors. We consider site caching a type of client-side caching — meaning that the end-user controls all the stored elements. The plugin is configured at the site owner’s discretion to determine how long content remains in the cache.
When page elements never change, the cache expiration date can be set far into the future. This is called a far future expiry. However, regularly changing elements would logically be set with much shorter expiration periods to ensure they are periodically refreshed. Controlling cache expiration is vital, or the site will continue to display outdated content to users loading it from their site caches, even after updates are published.
Site caching is ideal for websites with a lot of static content, and when the site rarely changes, users can continue loading your pages quickly while still seeing the latest version of your site. It is also possible when sites include a mixture of static and dynamic (frequently changing) content to exclude the pages with dynamic content from the site cache. An example might be e-commerce sites where one would never want to cache the cart or checkout pages. Sites with a predominance of dynamic features may benefit more from other types of caching.
2. Browser Cache
Browser caching is a type of site caching built into the end-user’s web browser. Website elements are stored by the browser on your visitor’s computer and grouped with other files associated with your content. A browser cache can contain HTML pages, CSS stylesheets, images, and multimedia content.
Browser caching overlaps with site caching because they are both client-side systems. The browser cache is controlled by the end-user rather than the site owner. All browsers have a cache that flushes out old files without user intervention. IT
When configuring a website’s optimization, I ensure that I leverage browser caching by either entering specific universal settings for the browser cache to save various types of elements (in the ‘.htaccess’ file). Many of the plugins mentioned above also provide a mechanism to configure.
3. Server Cache
The Server Cache includes several types of caching depending upon the hosting provider and plan. It also includes what we call Content Delivery Network (CDN) caching, object caching, and opcode caching. Each stores different content on your website’s server. Website owners administer this type of caching without end-users’ input.
Server caching is one of the best methods for reducing server loads. When a request is made, the server checks its temporary storage for the necessary content before processing it the request in full.
If the requested content is available in the server cache, it will be returned to the browser immediately. This enables your server to handle more traffic and return your web pages faster.
The methodology and tools are dependent upon the host, type of server, and the type of hosting plan.
The server technology a host uses impacts what is available – whether NGINX, Apache, etc. We would refer to this as server-side caching, which is variable. SiteGround, as an example, describes their SuperCacher system as follows:
SuperCacher services are developed by our server optimization experts to increase the number of hits a site can handle seamlessly and dramatically boost your website’s loading speed. There are 3 different caching options for maximum optimization of your websites. Our tests show that a website using simultaneously NGINX Direct Delivery & Dynamic caching along with Memcached can handle 100 times more hits than a regular website without any caching.
NGINX DIRECT DELIVERY
With NGINX Direct Delivery we will serve most of the static resources of your website (images, JS, CSS and others) directly through NGINX to achieve the fastest possible loading time. It works for all kind of applications without additional customisation.
The Dynamic Cache is a full-page caching mechanism for non-static resources. It prevents unnecessary database queries, processing of each page visit, and more. It highly improves your loading speed and the TTFB (time to first byte) of your pages.
Memcached is an object caching mechanism designed to improve the connection between your application and its database. It greatly improves the loading speed of dynamic content that can’t be served by the Dynamic Caching (checkout pages, dashboards and backends, etc).
The use of a CDN or Content Delivery Network is often cloud-based. Cloudflare is a popular CDN for WordPress users, and the cloud network provides nodes around the world that serve the cached website and provide additional security protections, too. CDNs can be used exclusively for image delivery or all site files. Again, there is incredible variability depending upon the host and what is needed to accommodate the target audience and network.
4. Micro Cache
Another type of caching that many website owners might not be aware of is micro caching. This method stores content for very short periods. It generally saves static versions of dynamic elements for up to 10 seconds.
Micro caching is not a common cache type due to the short storage time. Servers using NGINX or CDNs such as Cloudflare or MaxCDN can be configured for this mechanism. Sites typically using micro caching file a profile with high traffic and feature rapidly changing content, such as the constantly updating graphs on currency exchange and stock websites.
5. DNS Cache
While this is not a typical type of cache, we are well aware of the DNS Cache as developers who work with sites that sometimes have massive domain changes.
What is a DNS Cache?
(Domain Name System cache) The storage location of IP addresses of websites for faster retrieval of subsequent DNS queries (URL to IP). The caches are located in the user’s computer as well as in company and ISP servers.
Let’s talk about ISP (Internet Service Provider) servers first — the company that provides access to the Internet (eg., ATT, Spectrum, etc.). It used to take 48-72 hours for IP changes to “propagate” in the network. When changing a website host, for example, it would take several days for the entire network to recognize the new host as we had to wait on the ISP to flush their DNS Cache (it used to be just on Wednesday). Current technology makes this a much faster process.
But when there are a lot of changes to a domain’s IP or DNS records, even once the ISP has flushed their DNS Cache, for those who have been working with me as the developer on a website, the new versions might not be seen by my client due to their computer/browser’s DNS Cache. Yes… these are also present locally.
Initially, when a client doesn’t see what I see on a website project, I instruct them to clear (flush) their browser cache — as referenced in item 2 above. Each browser is a bit different by the operating system. I generally tell them not to delete history or cookies and only to delete cached files:
PC Magazine’s How Clear Your Cache in Any Browser. Again, I instruct NOT to delete history or cookies at this stage.
But when after clearing the browser cache and the issue is still present (it happens to me sometimes too), it is necessary to take a second step to Flush the Browser’s DNS Cache.
The DNS cache (sometimes called a DNS resolver cache) is a temporary database maintained by a computer’s operating system. It contains records of all the recent visits and attempted visits to websites and other internet domains.
The DNS cache is just a memory of recent DNS lookups that your computer can quickly refer to when it’s trying to figure out how to load a website. So when DNS records change on a website, such as an IP address or a domain name change (even switching from domain.com to www.domain.com), the computer may try to keep loading the old version.
Here is a great article from LifeWire below that implies the complex concept of the DNS Cache:
After understanding how the DNS Cache works compared to the browser cache, now let’s share an article about how to flush. It might be necessary to flush both the operating system’s DNS Cache and what is stored within the individual browser depending upon the device, operating system, and browser (and version of all these). Please note that it might be wise to search for other versions of these how-to articles depending on your device: