Have you ever visited a website that was slow to load or experienced inconsistent performance? Caching can solve these issues and more. In this article, we'll explore caching, how it works, and where it can be applied to improve website performance.
We'll also discuss some common bottlenecks and scenarios where caching should be used. Whether you're a developer, DevOps, or end user, caching can play a role in improving your experience with web applications.
What is caching?
As defined on AWS’s site, a cache in computing, is a high-speed data storage layer which stores a subset of data, typically transient in nature, so that future requests for that data are served up faster than is possible by accessing the data’s primary storage location. Caching allows you to efficiently reuse previously retrieved or computed data.
When should we use caching?
Using a cache can be very useful. Here are some common scenarios where caching should be used:
When a website or application is slow to load
When infrastructure costs are too high
When infrastructure resource monitors display high values
When a website or application has inconsistencies in visits or load
When developers have done a poor job implementing existing features
Request procedure
To explain where caching can be applied, we must first understand how an HTTP(S) request passes from the end user to the machine/server where the application is hosted.
Let's say that we have flow, as shown in the picture.
Request procedure
Here’s what happens: The end user attempts to open the website, at which point DNS directs them to the Cloudflare service. Cloudflare then points to the server where the web app is hosted. The webserver takes over and checks which application to load according to internal configuration, such as virtual hosts. Finally, the web app loads and the end-user has access to the desired page.
Now that we've explained how the request procedure works, we can explain to you in more detail information about caching at each step of the process.
Backend caching
A more detailed description of caching in each part of the request procedure starts at the end, with backend caching.
Backend caching is a technique for improving website performance and reducing server load by storing frequently accessed data in memory. It can significantly reduce load times and improve the overall responsiveness of web applications.
Since the backend is the last stage of the request procedure, delays on it can cause delays in all other parts of the request procedure.
Here are some of the most common bottlenecks on the backend:
Database queries
Memory usage
CPU usage
Diagram - How does caching work
The above diagram explains how caching typically works. When an end user requests data from an app host, the host checks if there is a cache available. If a cache is available and the conditions are met (for example, it is not too old), the host can return the result from the cache instead of fetching, processing, and preparing the data to be served.
If the cache is unavailable, the host processes the request by, for example, querying the database, processing the result, preparing the HTML/response, and then serving the data to the end user.
Request procedure with backend caching
Caching with webserver
A subtype of backend caching is backend caching with the webserver.
Make your backend more reliable using Nginx caching proxy
This method is faster and doesn't require as much processing power, resulting in faster load times and improved server performance. Nginx is an excellent example of a server-side caching tool that can significantly improve web server performance by storing frequently accessed data in its cache. This results in faster load times and a more efficient server.
Take a look at the image below to see an example of a cached request/response using a web server.
On the left side, you can see an example of requests without using cache, and on the right side, there's an example with cache. It's easy to see that using cache in the web server, instead of fetching data for every request from the server, will result in fewer direct requests from the web server to the server, and the application will work faster.
What does the webserver caching configuration look like?
By using server-side caching tools like Nginx, you can significantly reduce load times and improve your web server's overall responsiveness. As shown in the example configuration above, implementing web server caching is relatively simple and can significantly impact your application's performance.
Request procedure with webserver caching
CDN caching
As the last part of backend caching, the result could be cached before it even reaches the server where the application is hosted or by using CDN caching.
CDN caching is a technique for storing frequently accessed data in a Content Delivery Network's cache. This allows the CDN to serve cached content to end users without needing to ping the server where the application is hosted, resulting in faster load times and improved server performance.
In our showcase, we use Cloudflare. This means that Cloudflare can cache and serve content to end users without pinging the server where the app is hosted. This approach significantly reduces the path of the request, allowing for an even faster service.
As shown in the image above, Cloudflare allows us to specify the URL where we want to apply caching, the level of caching we want, and the duration for which the caching should be valid.
Request procedure with CDN caching
Client-side caching
While server-side caching helps reduce server load by storing frequently accessed data in memory, client-side caching can improve website performance by caching images, JavaScript, and other assets in the user's browser. This can reduce load times and improve the overall user experience.
The most common frontend bottlenecks are:
Unoptimized images
JavaScript
Excessive HTTP requests
For certain problems, we have the option to utilize caching within the user's browser (internal browser cache). This approach can speed up loading times because, when the end user tries to open the website, instead of retrieving data from the server or processing JavaScript on the client machine/browser, we simply load the already processed result from the browser's internal cache.
The process of caching
The process of caching is illustrated in the images below. The first image shows a request without caching, where the browser must ask the web server for data with every request. The second image shows the use of caching, where the browser no longer needs to ask the web server for the data with each request.
A request without caching
The use of caching
It's good to know that various cache times for images, files, CSS, JS, and other assets can be defined. These definitions can range from a few seconds to a few weeks or months.
Request procedure with various frontend caching
Who is involved in caching?
On the first thought, everybody will say that developers are responsible for implementing caching, but that is not the correct answer. Let us explain.
Everyone who uses or works on a web application in any way is involved in caching. This includes developers, both frontend and backend, DevOps, and end users who can enable or disable cache in their browser.
So, what are the benefits of caching?
Caching is a powerful tool for improving website performance and user experience. It can significantly reduce load times by storing frequently accessed data closer to the user, such as in cache memory, enhancing overall responsiveness.
By decreasing the number of requests the web server needs to process, caching also reduces server load and can lower operational costs by reducing the need for extensive server resources. This not only improves server performance but also ensures smoother operation during high-traffic periods or server issues.
With the right caching strategies, including the use of a content delivery network (CDN), applications can be made fast, responsive, reliable, and cost-efficient, providing a seamless experience for users.
Summary
We see various methods and places where we can apply caching. To sum up, caching in the backend can be applied by caching memory and CPU usage on the web server or through a CDN.
In the frontend development, caching involves storing images, JavaScript, and other assets. Caching is crucial and mandatory for large-scale systems and applications. If implemented correctly, it can reduce loading times to only a few milliseconds or seconds. However, if not properly executed, it can lead to a lot of strange, hardly reproducible bugs, and end users might see incorrect information.
Whether you're working on the front-end or back-end, it's important to keep caching in mind as you design and develop your applications. With the right caching strategies and techniques, you can ensure that your applications are fast, responsive, and reliable.
