Caching for Marketers | Basics for Non-Technical People
At NitroPack, we are super keen about everything speed optimization related, so naturally caching is one of our favourite topics to discuss (seriously, we talk about it literally all the time). Hence, we decided to take a bold step and publish a mini-series of blog posts that go in-depth into the concept WITHOUT all the technical terms that only developers understand, so everyone can get as excited about caching as we are (and rightfully so, caching deserves it!).
Many website owners and managers have heard about caching and may even be using a caching solution without necessarily knowing what it does. Then, when something goes wrong, chaos settles upon the world, since you have no idea what is going on.
Needn’t you worry, we got you covered with our version of Caching 101. And since there are many caching solutions out there - all offering seemingly the same thing, I will be including notes whenever applicable, with tips to help you choose the best partner for your needs.
This session will start with the necessary overview on what caching is, followed by a brief discussion on the different types that exist.
Praise the Cache...
...for it makes your website blazing fast! It does so by storing (remembering) data in cache so it can be served faster to the next user that requests it. Let’s dig into how exactly this happens.
If you do not have caching enabled, whenever a user tries to access your website, their browser sends a request to the server that hosts your page. Your server then sends all necessary information - including HTML, PHP, JS, CSS and images files - to the browser that does a bit of heavy lifting to compile everything into the meaningful page that gets served to the user. For the modern websites with many high-resolution assets and complex design elements, this process not only sounds, but actually is quite cumbersome and slows down the page’s loading times - something that makes both Google and (potential) customers unhappy.
Caching changes this sequence by firstly creating and storing a ‘copy’ of all individual requests for pages. Then, whenever a request is made from the browser, it quickly goes through the available cached resources. If there is a cached version of the request in question available, it quickly sends the ‘snapshot’ back to the browser for rendering. This saves a lot of time AND reduces application load because the server is meanwhile essentially sitting back and relaxing. Traditionally, if there was no saved copy of the page yet, the request would be sent to the server and after it returned the processed data back to the browser, the caching solution would take a ‘snapshot’ for its records. In other words, unoptimized pages were served to the first user that tried to access them.*
*Partner Selection Tip #1: As promised, here is a little note to help you choose a good partner. Cutting-edge solutions have found a way to mitigate this with exciting features such as Cache Warmup - that is the simulation of a visit to load the cache version before an actual user tries to access the page. What NitroPack offers beyond that (and so far no other solution has been able to match!) is to use both Cache Warmup and Smart Invalidation to automatically detect changes made on your website, invalidate the saved cache version for the edited pages, and immediately start the process of updating the cache, finally serving the new snapshot as soon as it becomes available. If you want to read more on Smart Invalidation - check out this blog post.
So is there only one type of caching?
Actually, no. There are many types of caching but two of the main ones are client-side and server-side.
The most popular client-side caching type and the one you are most likely to have heard before is browser caching.
Your website consists of many static files such as scripts, images and stylesheets. Client-Side Caching makes these static resources available for storage by browsers so they do not need to be downloaded every time a user goes on your website. If you wonder where these cached versions are stored - they are located and served from the hard drive of users’ own computers.
With this type of caching, the website can alert the browser for any updates, so the browser knows when a cached version needs to be invalidated and replaced with a fresh copy. Users are also manually able to erase their browser’s cache whenever they see fit, hence this type of caching can be controlled by the individual user.
Now that we got the essence of client-side caching, we can focus on the details of server-side caching. As the name suggests, this type of caching refers to the process of storing content, queries, code and other similar data on a server (or servers). The caching process in this case is controlled entirely by the server without any involvement from a browser (client) or users.
Again, there are lots of types of server-side caching, but some of the more popular ones are:
- Page caching - refers to the process of copying and storing entire dynamically generated web pages on a server and later serving the content from the cache whenever a request is made. To put it simply, page caching ‘remembers’ all the data on a page, so whenever a user wants to access it, the content is loaded blazing fast. It works pretty similarly to our human memory - I can answer the question how much is 23x12 super quickly if I have already done the calculations and learnt the answer by heart. If we continue the analogy with human memory, an important addition to knowing the answer of the equation above (which is 276 btw) is also knowing how to express it in the best way for your audience - should you say it in French, write it in Hindi, or just mimic it. Hence, when creating a cached version of a page, it is also critical to make separate versions per device to ensure that your audience will not only get what they came for, but it also ensures good user experience.
*Partner Selection Tip #2: The quality of the page cache implementation is one of the critical features of caching plugins and so here is a bit more info on what to be on the lookout for, whenever you evaluate potential partners. Since we are living in the era of smartphones, mobile-aware caching is a must and actually most of the caching solutions offer it. In case it is not obvious, mobile caching is the process of creating a dedicated cache file for mobile devices of each page on your website. As mentioned above, this ensures good user experience as well as super fast load times. And this is where most solutions stop. But we all know there is a third device type that we still have not mentioned - the tablet. Tablet caching is pretty rare on the market, with most caching providers simply using the desktop or mobile cached version to serve content for tablets. What makes NitroPack stand out of the crowd is that the service includes out-of-the-box caching for all devices as well. Hence, a third file for tablet devices is created for each page on your website that gets served whenever needed.
- CDN caching - CDN caching is the process of adding static website resources to proxy servers distributed around the globe. This makes it possible for visitors to download your website’s content much faster (you can expect a seperate blog post with details on how CDNs work), hence speeding up your site’s loading time. Other benefits of CDN caching are reduced load on the original server and reduced costs.
* Partner Selection Tip #3: Most of the caching tools available out there do not actually include a dedicated CDN. Some have a functionality that allows you to link your CDN with their solution. Bottom line this approach has two main drawbacks - more complex setup and maintenance as well as increased costs. Having to manually link the caching solution and the CDN creates technological complexity since the integration can be trickier than it first looks and potentially cause problems in the future if the integration falls apart. Secondly, having two separate solutions may lead to increased costs - after all you are paying two providers for two distinct services. The more advanced solutions on the market offer dedicated CDN, often at an additional cost and requiring manual activation. NitroPack takes CDN caching one step further, by not only offering dedicated global CDN included in the service but also having it pre-configured (that means you do not need to do anything to activate it). NitroPack is leveraging Amazon’s CloudFront 216 global locations, ensuring we are able to serve resources lightning fast, namely between 5 and 20ms (with very few cases taking longer than 20ms). Further, unlike other solutions, we are also storing not only image 21files but also JS and CSS and fonts, which means additional improvement in the page loading times for you.
- Opcode caching - is responsible for enhancing website’s PHP performance. With PHP being compiled between requests, opcode caching copies and stores the code in server memory to make it easily available for repeated page loads. This process can enhance PHP performance up to 3 times. Opcode caching is appropriate for all production environments.
- Object caching - An object in this sense is a collection of data and is often used to store results from Database queries or API calls. If object caching is implemented, the object data can be stored locally, so there is no need to constantly retrieve additional resources.
To reiterate the theory behind caching:
- Caching is critical in making your website faster while also reducing the load on your server (since it has to do a lot less calculations). It is the process of copying and storing requests made and serving them quickly from the cached version.
- There are many types of caching but two of the major ones are: client-side and server-side
- One of the most popular client-side caching types is executed by the visitors’ browsers. With browser caching the cached data is saved on the users’ computers.
- Server-side caching is administered exclusively by the server. The most important serveр-side caching type is page caching. With page caching the entire page is copied and served super quickly in subsequent requests.
As we mentioned already, there are different levels of performance when it comes to caching solutions. At the bare minimum, a caching partner provides page caching for desktop devices. Some of the better companies on the market also have the option (if you manually activate it) to also cache mobile versions of the page. Also, there are solutions that offer the so-called cache warmup feature that allows for preloading cache versions of website pages in certain time intervals. And finally, the basic solutions give website owners the ability to manually connect to a CDN. The better solutions offer a CDN option that can be manually activated for additional payment.
You might have gotten the idea already that NitroPack does A LOT MORE than this. Here are the features that we discussed in the post and put us at the top of the industry:
- We create three cached versions of each page - separate for desktop, mobile and tablet devices.
- We offer unique to the market Automatic Cache Warmup and Cache Invalidation. These two features work together to ensure you never serve unoptimized pages to guest end-users. This allows us to automatically detect changes made on your website, invalidate the saved cache version for the edited pages, and immediately start the process of updating the cache, finally serving the new snapshot as soon as it becomes available.
- And last but definitely not least, NitroPack comes with a built-in CDN with 216 global locations (that means it comes active out-of-the-box) and ensures your website’s content is served super quickly around the world.