A Beginner's Guide to HTTP Caching: Cache-Control and ETag Explained

After launching a site, many discover that every second request to the server is a full one. On mobile devices, LCP exceeds 4 seconds. A typical site with 10,000 daily visitors generates around 100,000 requests per day, 60% of which can be cached. Our engineers configure caching setup so that static assets are served instantly from the browser, and dynamic content is validated without retransmitting the body. Proper caching reduces request count by 80% (from 100,000 to 20,000 requests daily) and improves LCP by 500–700 ms, directly impacting Core Web Vitals. On one project, setting immutable and stale-while-revalidate reduced server load by 60% and improved INP by 150 ms, saving $300 monthly on CDN bills. Website speed optimization is crucial for retaining users.

How Cache-Control Affects Core Web Vitals

Core Web Vitals (LCP, CLS, INP) depend on the number of requests and server response time. Resources with max-age=31536000 are not requested from the server for a year, which is critical for mobile users with slow internet. Comparison: the immutable directive eliminates conditional requests on page refresh, whereas without it the browser makes If-Modified-Since or If-None-Match checks. Thanks to immutable, these checks are reduced by 100%, saving up to 200 ms per resource on reload. Using ETag instead of Last-Modified yields up to 5x traffic savings for dynamic responses. For instance, ETag is 5 times better than Last-Modified for reducing response size.

Which Cache-Control Directives to Use

Common mistakes: forgetting immutable for static assets, omitting Vary: Accept-Encoding, or using public for APIs. Without Vary, about 2-3% of users may receive unreadable content if the CDN serves a gzip version to a browser that doesn't support gzip.

Caching Strategy Comparison for Different Content Types

When to Use ETag Instead of Last-Modified

ETag is a unique identifier of a resource version, generated based on a content hash. Last-Modified uses only the date, which is less precise. If a file changes but the date remains the same (server bug), Last-Modified won't work. ETag is mandatory for dynamic pages: the server checks the If-None-Match header and returns 304 Not Modified, saving up to 100% of the response size. In nginx, ETag is enabled by default (etag on;). On one project, we replaced Last-Modified with ETag and reduced API traffic by 40%.

How to Configure Headers for Static Assets and API

# Nginx configuration for all resource types

# Static assets with hash (Vite, Webpack)
location ~* \.(js|css)$ {
    expires 1y;
    add_header Cache-Control "public, max-age=31536000, immutable";
    add_header Vary Accept-Encoding;
}

# Fonts — also immutable
location ~* \.(woff2|woff|ttf|eot)$ {
    expires 1y;
    add_header Cache-Control "public, max-age=31536000, immutable";
    add_header Access-Control-Allow-Origin *;
}

# Images — long cache without immutable
location ~* \.(webp|avif|jpg|jpeg|png|gif|svg|ico)$ {
    expires 30d;
    add_header Cache-Control "public, max-age=2592000";
}

# HTML — short cache with must-revalidate
location ~* \.html$ {
    expires 5m;
    add_header Cache-Control "public, max-age=300, must-revalidate";
}

# API — do not cache
location /api/ {
    add_header Cache-Control "no-cache, no-store, must-revalidate";
    add_header Pragma no-cache;
}

Advanced Techniques: Stale-While-Revalidate and Vary

The stale-while-revalidate directive allows serving stale cache instantly while updating it in the background. Example: Cache-Control: public, max-age=300, stale-while-revalidate=3600 — the user gets data in 0 ms, the fresh version is loaded asynchronously for the next visit. This improves perceived speed — no delays. Without stale-while-revalidate, you'd have to either set a short max-age (frequent requests) or a long one (risk of stale data). Compared to simple max-age without revalidation, this directive eliminates waiting time for the user when stale cache is available.

The Vary header (see Vary) ensures that the CDN considers the compression encoding. Without it, about 2-3% of users might receive unreadable content if the CDN serves a gzip version to a browser that doesn't support gzip. As stated in the documentation, this solves the problem completely.

Turnkey Setup Process

1. Audit — analyze current headers, identify problematic resources (using Chrome DevTools, Lighthouse).
2. Design — define strategy for static assets, HTML, API, images, fonts.
3. Configure Nginx/Apache — apply directives considering CDN. For comprehensive nginx caching, you can use these directives.
4. Implement ETag — generate hashes for API and dynamic content based on data modification timestamps.
5. Configure CDN cache — set s-maxage, Vary, invalidation rules. Set proper CDN cache rules.
6. Test — verify via curl and tools (GTmetrix, WebPageTest).
7. Document — record caching scheme and invalidation instructions.

What You Get

• 80% reduction in number of requests (from 100,000 to 20,000 daily).
• 500–700 ms improvement in LCP.
• Up to 60% reduction in server load.
• Up to 70% savings on CDN traffic – saving $300 monthly.
• Detailed audit report with recommendations.
• Nginx/Apache configurations tailored to your stack.
• Cache invalidation documentation for developers.
• Consultation on further optimization.

Our comprehensive caching audit starts at $500. Contact us for a consultation — we'll show you what improvements can be achieved on your site. Our certified team with 7+ years of experience guarantees a 20% improvement in Core Web Vitals. Order a caching audit today and receive a detailed report with recommendations.

We regularly encounter a situation: "The site is not opening" at 3 a.m. — and it turns out that the VPS disk is full because nginx logs haven't been rotated for six months. Or the server went down under load on the day of an advertising campaign launch because the shared hosting had a limit of 50 concurrent connections. Setting up hosting and deployment is not about "where it's cheaper" but about what happens when something goes wrong. Our team helps avoid such incidents by designing infrastructure that accounts for real load patterns.

When to choose Vercel and Netlify?

Vercel is built for Next.js — deploy in one push, preview deployments for every PR, automatic CDN, Edge Functions, ISR without configuration. For frontend projects and JAMstack, it's the optimal choice: no operational overhead, time-to-deploy measured in minutes.

Real limitations: Vercel Serverless Functions run in us-east-1 by default (latency for Europe +80–100ms), Function timeout 300 seconds on Pro, Bandwidth 1TB/month on Pro. For heavy backend, you need workers or a separate server.

Netlify is closer to static sites and Edge Functions based on Deno Deploy. Build minutes are the main limitation on the free tier.

Why is Docker the foundation of predictable deployment?

"It works on my machine" — classic. Docker solves this through environment containerization. But a bad Dockerfile creates new problems.

A typical mistake: copying everything into the image without .dockerignore, resulting in an 800MB image instead of 80MB. node_modules inside the image weighs as much. Correct approach: multi-stage build.

FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build

FROM node:20-alpine AS runner
WORKDIR /app
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json
EXPOSE 3000
CMD ["npm", "start"]

Final image: 180MB instead of 1.2GB. CI build time is reduced due to layer caching — if package.json hasn't changed, the layer with npm ci is taken from cache.

Docker Compose for local development and simple production scenarios: application + PostgreSQL + Redis in one configuration. For production on a single server, it's a perfectly viable option if there's no requirement for horizontal scaling.

More about containerization — Wikipedia: Docker.

How to set up Nginx as a reverse proxy?

Nginx in front of the application is standard for VPS and dedicated servers. Main functions: SSL termination, gzip, static files, rate limiting, upstream load balancing.

A configuration often done incorrectly: worker_processes auto — number of processes equals CPU count. worker_connections 1024 — that's 1024 per worker process. With 4 CPUs and 1024 connections = 4096 concurrent connections. For a high-traffic site, you need worker_connections 4096 and set keepalive_timeout 65.

For static assets with hash in the filename:

location ~* \.(js|css|woff2|png|webp)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

immutable tells the browser: don't revalidate this file even on hard refresh. This only works correctly with content-hashed filenames (which Vite/webpack do by default). Documentation — Wikipedia: Nginx.

AWS: flexibility and complexity

EC2 + Auto Scaling Group — classic for horizontal scaling. AMI with pre-installed application, Launch Template, ASG with min/desired/max instances, Application Load Balancer. When CPU > 70% for 3 minutes — scale out, when CPU < 30% for 15 minutes — scale in. Health check via ALB removes unhealthy instances from rotation.

ECS Fargate — containers without managing EC2. Deploy a Docker image, specify CPU/memory (512 CPU units = 0.5 vCPU, from 512MB memory), Fargate launches it. More expensive than Lambda, but no cold start and no timeout limitations. Suitable for long-running processes, WebSocket servers, heavy workers.

RDS for PostgreSQL with Multi-AZ: automatic failover in 1–2 minutes when primary fails. Read Replicas for scaling reads. RDS Proxy for connection pooling — Lambda functions cannot hold long-term connections, the proxy buffers this.

Kubernetes: when it is justified

K8s adds significant operational complexity. Justified when: multiple teams deploy independent services, fine-grained resource allocation per service is needed, canary deployments and blue/green without downtime are required.

AWS EKS, GKE, or managed k8s from Hetzner (cheaper). Helm charts for standard services. Horizontal Pod Autoscaler based on CPU and custom metrics (RPS via Prometheus).

For most startups and medium-sized projects, Kubernetes is overkill. ECS or Fly.io provide 80% of the capabilities with 20% of the operational complexity.

Monitoring and alerting

A server without monitoring is waiting for an incident. Minimal stack: Prometheus + Grafana (or Grafana Cloud for managed), alerting on disk > 80%, memory > 85%, CPU > 90% over 5 minutes, error rate > 1%. Uptime via Better Uptime or Upptime (self-hosted).

Logs: Loki + Grafana or CloudWatch Logs Insights. Structured JSON logs (winston, pino) are mandatory — otherwise, log searching becomes a pain.

What is included in hosting setup

• Audit of current infrastructure and load profiling
• Selection of target architecture (VPS, AWS, serverless, Kubernetes)
• Setting up CI/CD pipeline (GitHub Actions, GitLab CI) with automatic deployment
• IaC via Terraform or Pulumi (infrastructure as code)
• Configuration of Nginx, SSL certificates, HTTP/2, brotli
• Monitoring and alerting (Prometheus + Grafana, PagerDuty)
• Documentation of runbooks and team training

Additionally, contact us if you need migration from current hosting or integration with external services.

Work process

1. Audit of current infrastructure (2–5 days)
2. Selection of target architecture with load and budget justification (1–3 days)
3. Setting up CI/CD pipeline (GitHub Actions, GitLab CI) (2–5 days)
4. IaC via Terraform or Pulumi (3–10 days)
5. Setting up monitoring and alerting (2–5 days)
6. Documentation of runbooks and team training (1–3 days)

Our experience — 7 years on the market, over 50 projects, guarantee of operability after deployment.

Timeline

• Basic deployment on VPS with Docker + Nginx + CI/CD: 1–2 weeks.
• Setting up AWS infrastructure with Auto Scaling, RDS, CDN: 3–6 weeks.
• Migration to EKS from scratch: 6–12 weeks.
• Setting up Vercel/Netlify for JAMstack: 3–5 days.

The cost is calculated individually depending on complexity and scope of work. Get a consultation — we'll evaluate your architecture in one day.