Understanding Cache: How Caching Impacts Site Speed

A cartoon woman looking at a world surrounded by internet location icons

Many people assume caching is a magic wand that makes slow websites fast. But the reality is there’s more illusion than actual magic to caching. 

Understanding cache is an integral part of website optimization. Caching plays a role in helping speed up websites, but only if you address other underlying problems slowing down your site. 

To help you better understand cache, this post will: 

  • Define cache and how it works
  • Explain the role of caching in website optimization
  • Provide best practices for utilizing cache 

What is Cache? 

Caching refers to storing copies of a file in a temporary storage location. Think of caching as the digital equivalent of keeping copies of the files you reference most frequently on your desk, so you don’t have to take the time to find them in a filing cabinet every time you need them. 

Types of caching for websites include:

  • Browser Cache. Browsers like Google Chrome or Safari save copies of HTML files, JavaScript, and images on your computer’s hard drive. For sites you regularly visit, like Google or your favorite news site, the browser uses the cached version of the site logo instead of downloading it from the server each time. 
  • DNS Cache. DNS servers cache DNS records for faster lookups. A DNS record is what tells a browser where to find your website. DNS servers cache records at servers worldwide, so when someone visits your website, the DNS server physically closest to them directs them to your site. Since DNS records cache all around the globe, DNS changes often take 24 to 48 hours to propagate. 
  • CDN. A CDN, or content delivery network, stores copies of static elements of your website — images, JavaScript, styles, and CSS — on proxy servers around the world. When someone visits your site, they go to the proxy server closest to them. If a part of your site is on the proxy server, it only requests missing items. If your site isn’t on the proxy server or the cached copy expires, the proxy server requests a new copy and caches those files for future use.
  • Static Page Cache. When your web server builds the HTML of a page, it can be configured to then save that HTML output locally. This locally cached copy of the HTML is used to quickly respond to similar requests in the future. Static page caching is one of the most common tools used by site builders to try to increase site speed, often forgetting to optimize the backend as well. Static page caching also can be configured with CDNs to store the output at edge locations around the world with the rest of your assets.
  • Object Cache. Like static page caching, object caching is storing pieces of data after more expensive operations such as API calls or database queries. By not making the same repeated operations, websites can more effectively scale in traffic without using as many server resources. The data stored in an object cache can vary in size or type.

There are other, less-known types of caching, like fragment caching. We’ll write about those in a different post.

Each computer also includes a cache to help increase processing speed. To optimize a website for speed, we’ll be talking about web server or CDN caching. 

Caching for Website Optimization 

Caching does not make a slow site fast. 

Caching just cuts down the delivery time. The site might seem quicker because the cached files got from a server to the browser in less time. But unless you’ve completed backend and frontend optimization, you haven’t increased your site’s speed. 

Too many database queries, inefficient PHP, or API dependencies can significantly decrease how quickly your backend loads and functions. 

On the front end, many slow websites struggle with render-blocking resources like unnecessary CSS and JavaScript. 

Let’s take CSS files, for example. You can cache a CSS file, so it delivers faster. But, if you’re still linking to multiple CSS files with extraneous styles, the extra CSS slows down the page rendering process. 

A cartoon man and woman connecting on the internet

How Does Caching Help? 

Caching helps with scaling your site. Your server can likely handle one server request. But what happens when you get a thousand or a million? By utilizing caching, you can rely on a cache-stored version of a resource and decrease the number of new server requests you make at once. Caching static files helps reserve server capacity for dynamic processes like checking out. 

Best Practices for Caching

If you only rely on caching to solve your site speed problems, you could run into issues when visitors land on pages that cannot cache. For example, with an ecommerce site, caching images and product pages can make a site load faster. But, when the customer goes to check out, they could run into a significant problem. The dynamic nature of checkout pages eliminates the load-saving time of caching. Except for your logo, not much on a checkout page caches. If you haven’t optimized your backend and frontend, the checkout experience could be painfully slow, causing the buyer to abandon their cart

So, our top tip for caching is to optimize your backend and front first. 

After that, to get the best results for scaling your site, you should carefully consider what types of files to cache. Caching works best for files that do not change frequently and are the same for every user. 

Types of files to cache include:

  • Logos and other static images
  • Stylesheets
  • Downloadable files
  • JavaScript files

Avoid caching files that change often, including information that varies by user or contains sensitive data. 

How to Implement Caching 

Caching may be part of your web hosting service, especially if your web host offers a CDN. If not and you’re running a WordPress website, you can utilize plugins to enable CDNs and caching. 

Our recommendations for best caching plugin options for WordPress:

Learn More About Caching and Website Optimization

At Mindsize, we specialize in helping ecommerce businesses scale, including optimizing their websites for speed. Caching is one part of the optimization process.