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
| Directive | Meaning |
|---|---|
| public | Cache in browser and proxy/CDN |
| private | Cache only in browser (not on CDN) |
| no-cache | Always check freshness with server |
| no-store | Never cache |
| max-age=N | Cache for N seconds |
| s-maxage=N | For CDN (overrides max-age) |
| immutable | File won't change — don't revalidate even on F5 |
| must-revalidate | After max-age, must revalidate |
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
| Content Type | Example Directives | Reason |
|---|---|---|
| JS/CSS (hashed) | public, max-age=31536000, immutable | File never changes — cache forever |
| HTML | public, max-age=300, must-revalidate | Updates frequently, but freshness isn't critical |
| API | no-cache, no-store | Data changes dynamically |
| Images | public, max-age=2592000 | Long cache without immutable — may be overwritten |
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
Example Nginx Configuration
# 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
- Audit — analyze current headers, identify problematic resources (using Chrome DevTools, Lighthouse).
- Design — define strategy for static assets, HTML, API, images, fonts.
- Configure Nginx/Apache — apply directives considering CDN. For comprehensive nginx caching, you can use these directives.
- Implement ETag — generate hashes for API and dynamic content based on data modification timestamps.
- Configure CDN cache — set s-maxage, Vary, invalidation rules. Set proper CDN cache rules.
- Test — verify via curl and tools (GTmetrix, WebPageTest).
- 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.