Caching is used to improve the performance and efficiency of a system by storing frequently accessed data in a temporary storage area, called a cache. Caching is important for website performance, because it significantly reduces the time it takes for a webpage to load.
In this post, you will learn what is caching, its benefits, how it works, how is it implemented, and what tools are commonly used for caching.
What is caching?
Caching is a technique used to store copies of frequently accessed data in temporary storage locations, known as caches, to serve future requests more quickly. By storing data closer to the user or in a more easily accessible location, caching reduces the need to retrieve data from the original source repeatedly, thereby improving performance and efficiency.
Types of caching
1. Browser caching
Browser caching involves storing web page resources (such as HTML, CSS, JavaScript, and images) on the user's local device. When a user visits a website, the browser saves these resources so that subsequent visits can load the page faster by using the cached files instead of downloading them again.
How it works:
- When a user visits a website, the browser downloads the necessary files and stores them in the browser cache.
- On subsequent visits, the browser checks if the cached files are still valid (using cache headers like
Cache-ControlandETag). - If the cached files are valid, the browser uses them to render the page, reducing the need to download the files again.
Benefits:
- Reduces load times for returning visitors.
- Decreases the amount of data transferred over the network.
- Improves user experience by making the website feel more responsive.
2. Application-level caching
Application-level caching involves storing frequently accessed data within the application itself, typically in memory, to reduce the need for repeated database queries or complex calculations.
How it works:
- The application stores the results of expensive operations (e.g., database queries, API calls) in a cache.
- When the same operation is requested again, the application checks the cache first.
- If the data is found in the cache (a cache hit), it is returned immediately.
- If the data is not found in the cache (a cache miss), the application performs the operation and stores the result in the cache for future use.
Benefits:
- Speeds up application performance by reducing the time spent on expensive operations.
- Reduces the load on the database or external services.
- Improves scalability by allowing the application to handle more requests efficiently.
Examples of tools:
- Redis - an in-memory data structure store used as a database, cache, and message broker.
- Memcached - a high-performance, distributed memory object caching system.
3. Server-level caching
Server-level caching involves storing cached content on the web server or a reverse proxy server. This type of caching is often used to serve static content or dynamically generated pages that don't change frequently.
How it works:
- The web server or reverse proxy server stores copies of frequently requested pages or resources.
- When a request is made, the server checks the cache first.
- If the requested content is found in the cache, it is served directly from the cache.
- If the content is not found in the cache, the server generates the content and stores it in the cache for future requests.
Benefits:
- Reduces the load on the application server by serving cached content directly.
- Improves response times for users by serving content more quickly.
- Enhances the overall performance and scalability of the website.
Examples of tools:
- Varnish - a high-performance HTTP accelerator designed for content-heavy dynamic websites.
- SVR.JS Cache mod - a mod for SVR.JS (a web server running on Node.JS) that adds in-memory caching capabilities to SVR.JS web server.
- NGINX - a web server that can also act as a reverse proxy and load balancer, with built-in caching capabilities.
- LiteSpeed Web Server - a web server known for its high performance that also has a built-in cache (LiteSpeed Cache).
4. Content Delivery Networks (CDNs)
A Content Delivery Network (CDN) is a distributed network of servers that deliver content to users based on their geographic location. CDNs cache content at various edge locations around the world to reduce latency and improve load times.
How it works:
- Content is stored on multiple servers located in different geographic regions.
- When a user requests content, the CDN directs the request to the nearest edge server.
- The edge server serves the cached content to the user, reducing the distance the data needs to travel and improving load times.
Benefits:
- Reduces latency by serving content from geographically closer locations.
- Improves load times for users around the world.
- Enhances reliability and availability by distributing content across multiple servers.
- Offloads traffic from the origin server, improving its performance and scalability.
Common CDNs:
- Cloudflare - a global CDN that offers a range of services, including DDoS protection, web application firewalls, and DNS management.
- Akamai - one of the largest CDNs, providing a wide range of content delivery and security services.
- Amazon CloudFront - a CDN service offered by Amazon Web Services (AWS) that integrates with other AWS services.
Benefits of caching
1. Faster load times
Caching reduces the time it takes for a web page to load by storing frequently accessed data closer to the user. This means that instead of retrieving data from the original source every time, the cached data is served quickly from a nearby location.
How it helps:
- Immediate Access - cached content is served almost instantly, reducing the Time to First Byte (TTFB) and overall page load time.
- Reduced Latency - by storing content at edge locations (in the case of CDNs), caching minimizes the distance data needs to travel, reducing latency.
Benefits:
- Enhanced User Experience - faster load times make the website feel more responsive and engaging.
- Increased User Satisfaction - visitors are less likely to abandon a site that loads quickly, leading to higher engagement and lower bounce rates.
2. Reduced server load
Caching decreases the number of requests that need to be processed by the server by serving cached content instead. This offloads a significant amount of work from the server, freeing up resources for other tasks.
How it helps:
- Efficient Resource Use: By reducing the number of requests that reach the server, caching allows the server to handle more users and tasks simultaneously.
- Scalability: Caching enables the website to scale more effectively, handling increased traffic without performance degradation.
Benefits:
- Improved Performance: The server can process other critical tasks more efficiently, leading to overall better performance.
- Cost Savings: Reduced server load can lead to cost savings, as fewer resources are needed to handle the same amount of traffic.
3. Improved user experience
Faster load times and more responsive websites lead to a better user experience, which can increase user engagement and satisfaction.
How it helps:
- Seamless Interactions: Users experience smoother interactions with the website, leading to a more enjoyable browsing experience.
- Consistent Performance: Caching ensures that the website performs consistently well, even during peak traffic times.
Benefits:
- Higher Engagement: Users are more likely to spend more time on the site, explore more pages, and engage with content.
- Increased Conversions: A better user experience can lead to higher conversion rates, whether that means more sales, sign-ups, or other desired actions.
4. Better SEO
Search engines like Google consider page load speed as a ranking factor. Faster websites can improve search engine rankings, making them more visible to potential users.
How it helps:
- SEO Metrics: Improved load times can lead to better scores on SEO tools like Google PageSpeed Insights.
- User Behavior: Faster websites tend to have lower bounce rates and higher time-on-site metrics, which are positive signals for search engines.
Benefits:
- Higher Rankings: Improved SEO metrics can lead to higher search engine rankings, increasing organic traffic.
- Increased Visibility: Better rankings make the website more visible to potential users, leading to more traffic and engagement.
5. Cost savings
Reduced server load and improved efficiency can lead to cost savings, as fewer resources are needed to handle the same amount of traffic.
How it helps:
- Infrastructure Costs: By reducing the need for additional servers or more powerful hardware, caching can lower infrastructure costs.
- Operational Efficiency: More efficient use of resources can lead to lower operational costs, such as reduced energy consumption and maintenance.
Benefits:
- Budget Optimization: Businesses can allocate resources more effectively, investing in other areas that drive growth.
- Sustainability: Improved operational efficiency can contribute to sustainability goals by reducing energy consumption and environmental impact.
6. Reliability and availability
Caching can enhance the reliability and availability of a website by distributing content across multiple servers and locations.
How it helps:
- Redundancy: By storing content in multiple locations, caching provides redundancy, ensuring that content is still available even if one server or location fails.
- Load Balancing: Caching can help distribute traffic more evenly across servers, preventing any single server from becoming a bottleneck.
Benefits:
- Consistent Uptime: Enhanced reliability ensures that the website remains available to users, even during high traffic periods or server issues.
- User Trust: Consistent availability builds user trust and confidence in the website, leading to higher user satisfaction and loyalty.
Benchmarks
The benchmark above we have performed during the development of SVR.JS Cache mod shows that SVR.JS web server is around 1.9x faster in static file serving with caching enabled (cache mod installed and caching headers set) than without caching enabled (without the cache mod installed).
The benchmark above we have performed shows that a website built on Joomla 5 and running on SVR.JS is faster with caching enabled than without the caching. The performance improvements are as follows:
- Both conservative and progressive caching with Redis handlers make the website around 1.2x faster than without the caching.
- Both conservative and progressive caching with file handlers make the website around 1.3x faster than without the caching.
- Built-in page cache makes the website around 1.6x faster than without the caching
- The "Server Cache" extension (which alters
Cache-Controlheaders; the publisher says that it works well with NGINX and Varnish, but it works too with SVR.JS Cache mod) along with SVR.JS Cache mod improves the performance of the website by around 117x, as compared to the website without the caching.
While application-level caching makes a small improvement in the website performance, a server-level cache improves the performance by a lot as compared to the website without the cache.
Implementing caching
1. Identify what to cache
- Static assets - cache static assets like images, CSS, JavaScript, and fonts.
- Dynamic content - cache dynamically generated content that doesn't change frequently, such as blog posts or product listings.
- API responses - cache API responses to reduce the load on backend services.
2. Set appropriate cache expiration
- Cache-Control header - use the
Cache-Controlheader to specify how long a resource should be cached.
Cache-Control: max-age=3600, public- ETag header - use the
ETagheader for cache validation.
ETag: "686897696a7c8e3b78b"3. Use browser caching
- HTML meta tags - use meta tags to control browser caching.
<meta http-equiv="Cache-Control" content="max-age=3600">- .htaccess File - configure browser caching in the
.htaccessfile for Apache httpd servers.
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>4. Implement server-level caching
- NGINX configuration - use NGINX as a reverse proxy with caching.
http {
proxy_cache_path /data/nginx/cache levels=1:2 keys_zone=my_cache:10m max_size=1g inactive=60m use_temp_path=off;
server {
listen 80;
server_name example.com;
location / {
proxy_cache my_cache;
proxy_pass http://backend.example;
proxy_cache_valid 200 302 10m;
proxy_cache_valid 404 1m;
proxy_cache_use_stale error timeout updating http_500 http_502 http_503 http_504;
add_header X-Cache-Status $upstream_cache_status;
}
}
}- Varnish configuration - use Varnish for HTTP acceleration.
vcl 4.0;
backend default {
.host = "127.0.0.1";
.port = "8080";
}
sub vcl_recv {
if (req.method == "PURGE") {
if (!client.ip ~ purge) {
return (synth(405, "Not allowed."));
}
return (purge);
}
if (req.method != "GET" && req.method != "HEAD") {
return (pass);
}
return (hash);
}
sub vcl_backend_response {
if (beresp.ttl <= 0s || beresp.http.Set-Cookie) {
set beresp.ttl = 120s;
return (deliver);
}
if (beresp.http.Cache-Control ~ "private") {
return (deliver);
}
if (beresp.ttl >= 0s) {
return (deliver);
}
return (deliver);
}- SVR.JS Cache mod configuration - refer to the SVR.JS Cache mod notes.
5. Use application-level caching
- Redis example - use Redis for caching in a Node.JS application.
const redis = require('redis');
const client = redis.createClient();
client.on('error', (err) => {
console.log('Redis error:', err);
});
function getCachedData(key) {
return new Promise((resolve, reject) => {
client.get(key, (err, data) => {
if (err) reject(err);
else resolve(data);
});
});
}
function setCachedData(key, value, expiration) {
client.setex(key, expiration, value);
}
// Example usage
async function fetchData(key) {
let data = await getCachedData(key);
if (data) {
console.log('Cache hit:', data);
return data;
} else {
// Fetch data from the database or API
data = await fetchFromDatabaseOrAPI(key);
setCachedData(key, data, 3600); // Cache for 1 hour
console.log('Cache miss, data fetched and cached:', data);
return data;
}
}- Memcached example - use Memcached for caching in a PHP application.
<?php
$memcache = new Memcached();
$memcache->addServer('localhost', 11211);
function getCachedData($key) {
global $memcache;
return $memcache->get($key);
}
function setCachedData($key, $value, $expiration) {
global $memcache;
$memcache->set($key, $value, $expiration);
}
// Example usage
function fetchData($key) {
$data = getCachedData($key);
if ($data) {
echo 'Cache hit: ' . $data;
return $data;
} else {
// Fetch data from the database or API
$data = fetchFromDatabaseOrAPI($key);
setCachedData($key, $data, 3600); // Cache for 1 hour
echo 'Cache miss, data fetched and cached: ' . $data;
return $data;
}
}
?>6. Use Content Delivery Networks (CDNs)
- Cloudflare example - use Cloudflare to cache and deliver content.
- Sign up for a Cloudflare account and add your website.
- Update your DNS settings to point to Cloudflare's nameservers.
- Configure caching settings in the Cloudflare dashboard, such as setting the cache level and expiration times.
7. Monitor and Optimize
- Monitor cache performance - use tools like New Relic, Datadog, or built-in monitoring tools to track cache performance.
- Optimize cache settings - regularly review and optimize cache settings based on performance data and user behavior.
Conclusion
Caching is a powerful technique that significantly enhances the performance and efficiency of websites. By storing frequently accessed data in temporary storage locations, caching reduces load times, decreases server load, improves user experience, and contributes to better SEO and cost savings. Whether through browser caching, application-level caching, server-level caching, or Content Delivery Networks (CDNs), implementing caching strategies can transform the way your website operates.
The benchmarks presented in this post clearly demonstrate the tangible benefits of caching. For instance, the SVR.JS web server showed a 1.9x speed improvement in static file serving with caching enabled, and a Joomla website running on SVR.JS saw performance boosts ranging from 1.2x to an impressive 117x with various caching methods. These results signify the impact that caching can have on website performance.
By following the practical tips and best practices outlined in this post, you can effectively implement caching on your website. Whether you're configuring browser caching with .htaccess files, setting up server-level caching with NGINX, Varnish or SVR.JS Cache mod, using application-level caching with Redis or Memcached, or leveraging CDNs like Cloudflare, each method contributes to a faster, more responsive, and more reliable website.
Monitoring and optimizing your cache settings regularly will ensure that your website continues to perform at its best, providing a seamless and enjoyable experience for your users. By investing in caching, you not only improve the technical aspects of your website but also enhance user satisfaction, engagement, and ultimately, the success of your online presence.
Embrace the power of caching and watch your website soar to new heights of performance and efficiency!