Basic Logic of Browser Caching
Browser caching is based on the principle of storing the files that make up a web page (HTML, CSS, JS, font, SVG, etc.) on the user's device for a certain period and using these local copies instead of the network when needed again. This approach reduces network latency and bandwidth consumption; especially on repeat visits, it significantly improves perceived speed by shortening the time from first byte to first content. The key question is: Which asset will I keep locally, for how long, and under what conditions? The answer depends on the asset's change frequency, criticality, and user context.
Cache behavior is mostly managed through HTTP headers. With Cache-Control, you define the maximum retention time of an asset (e.g., max-age=31536000) and the rights to use intermediary caches (CDN, corporate proxy) (e.g., public / private). If the content changes frequently, no-store or very short max-age values are chosen; a more sustainable approach is conditional validation. The server returns an ETag (content fingerprint) or Last-Modified (modification date) along with the response; on the next request, the browser sends these values. If the content has not changed, the server responds with 304 Not Modified and the data is not downloaded again.
The highest efficiency comes from combining versioning in the file name (fingerprinting) with long-term caching. For example, a hashed file like app.9f3c1.js can be stored for a year with Cache-Control: public, max-age=31536000, immutable. When the content changes, the build generates a new hash; the browser continues to use the old one while new pages reference the new file. This way, both freshness and speed are preserved. HTML is usually cached for a short time or not at all, as it carries references (manifests) to other assets and should reflect layout/content changes.
Speed Through Principles: Quick Guide
“Static assets long, HTML short and validated.” This simple match can dramatically improve the second-visit speed of over 70% of typical site users.
Boost on Repeat Visit
The browser's disk and memory cache reduce LCP and FCP values by loading critical CSS/JS locally instead of over the network.
Reduces Server Load
Assets served from the cache prevent unnecessary requests to the origin server and application layer.
Less Bandwidth Usage
Network traffic decreases; experience improves especially for mobile users and those with limited data plans.
Typical Policy Map
- HTML:
Cache-Control: no-cache+ETag(orLast-Modified) - Hashed CSS/JS:
public, max-age=31536000, immutable - Webfont/SVG: Long-term cache + CORS headers
- API JSON: Short
max-age+ conditional validation
This map is a safe starting point for most modern sites.
Note: Cache behavior may vary depending on the user session, authentication, and privacy policies. For sensitive content, private and appropriate identity checks are required.
Static Asset (CSS, JS, Images) Caching Settings
Proper caching of static assets is the backbone of performance engineering. The goal is to define the longest possible retention time while preserving content integrity. This is achieved through a three-part strategy: (1) File name versioning to make content changes detectable, (2) aggressive cache headers to prevent repeat network requests, (3) correct variation definitions (e.g., Vary: Accept-Encoding) to serve copies suited to different client capabilities.
On the CSS/JS side, using hashed build outputs is the most robust method. Names like app.[contenthash].css and app.[contenthash].js keep the file name unchanged when the content doesn't change and automatically update it when it does. This allows these files to be served with Cache-Control: public, max-age=31536000, immutable. The immutable directive tells the browser that the file will never change under the same URL; the browser does not revalidate, it reads directly from disk.
For images, two additional parameters are important: content type and size/format variations. Depending on the formats served (WebP, AVIF, JPEG) and pixel densities (1x/2x), different files may need to be produced. In this case, when building a responsive images setup (e.g., <img srcset>) that selects according to client capabilities, each variant should also be cached long-term. The CDN or origin should handle Vary: Accept or Vary: User-Agent headers; otherwise, incorrect copies may be served to different clients.
Recommended Headers (Static Assets)
Cache-Control: public, max-age=31536000, immutableETag(optional; often unnecessary with immutable)Vary: Accept-Encoding(for gzip/br/zstd compression)Content-TypeandContent-Encodingset correctly
For hashed assets, use long-term cache; for non-hashed assets, short-term + conditional validation is preferred.
CSS Tips
Deliver critical CSS inline (inline critical CSS) and load the rest deferred. When critical CSS is inline and small, it comes with HTML and speeds up the first paint. The remaining CSS should be hashed and long-term cached.
JS Tips
Use module-based splitting (code-splitting) to load only the required bundles. Hash each part, defer execution with defer, and apply long-term cache.
Image Tips
Use automatic format conversion on CDN and origin shield. Convert small icons to SVG where possible; SVGs can also be hashed and long-term cached.
Distribution Pipeline Note
In the build output, file names are hashed, HTML/manifest references are updated, uploaded to the CDN, and only HTML is published with short cache. This way, users immediately see the new hashed assets with the new HTML.
Warning: Third-party scripts are often outside your hash/versioning control. Self-host them if possible, or ensure integrity with Subresource Integrity (SRI) and manage cache headers from your own CDN.
HTTP Cache-Control and ETag Usage
The backbone of HTTP caching strategies is formed by the Cache-Control and ETag headers. Cache-Control defines how long and under what conditions a file can be stored by the client and intermediary caches. ETag is a unique content signature representing the file’s integrity. When used together, they provide a balanced structure for both performance and content freshness.
One of the most commonly used parameters in the Cache-Control header is max-age. This value specifies how many seconds the file can be used without re-downloading. The public and private parameters determine the cache's shareability. For example, a public CSS file can be marked as public, while a user-specific PDF file should be private. no-store completely disables caching, while no-cache ensures that the content is not used without revalidation.
The ETag header is a unique identifier assigned to a file by the server. The client sends back the previously received ETag value in the If-None-Match header. If the content hasn’t changed, the server responds with 304 Not Modified and no data transfer occurs. This approach is ideal for files that don’t change frequently but are not entirely static.
Example Usage of Cache-Control and ETag
- Static assets:
Cache-Control: public, max-age=31536000, immutable - Dynamic data:
Cache-Control: no-cache+ETag - User-specific content:
Cache-Control: private, no-store
Data Consistency
ETag preserves data integrity between the browser and server, preventing incorrect or outdated content from being displayed.
Fast Response Times
Conditional validation prevents unnecessary data transfer and reduces page load times.
Flexible Configuration
Cache-Control directives can be easily adapted based on the asset type and usage scenario.
Note: Cache-Control and ETag work the same way in HTTP/2 and HTTP/3 protocols. However, upgrading the protocol does not change caching behavior.
CDN's Contribution to Site Speed
A CDN (Content Delivery Network) delivers the static and dynamic content of a website from edge servers distributed worldwide, serving data from the location closest to the user. This structure reduces latency and significantly increases page load speed. For websites targeting a global audience, a CDN is an indispensable part of performance optimization.
The CDN's contribution to site speed comes from three main factors: physical proximity, load balancing, and caching. The geographically closest server to the user delivers data faster. Traffic is routed to the least busy edge location to prevent congestion. Static assets are kept in the edge cache and served directly from there on repeat requests.
Another advantage is network optimization. CDNs compress data (gzip, brotli) and run multiple requests over the same connection using HTTP/2 or HTTP/3, shortening transfer time. Additionally, storing frequently requested assets in RAM-based caches (hot cache) reduces time to first byte to milliseconds.
Summary of CDN Advantages
- Reduces latency
- Decreases server load
- Optimizes network traffic
- Ensures high availability
Global Access
CDN delivers your content worldwide with minimal latency.
Instant Loading
Static files served from cache load in milliseconds.
Security Integration
CDN providers offer integrated DDoS protection and SSL management.
Performance Measurement
Use WebPageTest or Lighthouse to compare page load times before and after implementing a CDN. Test results will clearly show the impact of the investment.
Criteria for Choosing a CDN Provider
Choosing a CDN is not just a decision based on price comparison; factors such as performance, security, scalability, and technical compatibility must also be considered. Websites with a wide geographical target audience can experience significant speed differences depending on the number and distribution of PoP (Point of Presence) locations offered by the CDN. For an e-commerce site based in Turkey, a provider with a strong edge presence in Europe, the Middle East, and North Africa should be a priority.
The first evaluation criterion is PoP coverage and latency tests. The provider's network map should have sufficient numbers of strategically located PoPs in your target regions. Latency test results can make a difference at the millisecond level. The second important factor is the cache hit ratio performance. A high hit ratio means fewer origin requests and lower server load.
The third criterion is pricing and traffic policies. Some CDNs operate on a “pay-as-you-go” model, while others offer fixed packages. Also, egress fees may vary by region. Choose the model that suits your usage patterns. Finally, consider whether additional features (DDoS protection, WAF, SSL management, bot filtering, image optimization) are provided.
Key Questions When Selecting a CDN
- How many PoPs are there in target regions and where are they located?
- What are the average latency times?
- What is the cache hit ratio?
- Are additional security and optimization features available?
- Does the pricing model suit your usage?
PoP Location
PoP points close to your target markets minimize latency.
Hit Ratio
A high cache hit ratio reduces server load and data transfer costs.
Security
Integrated WAF and DDoS protection enhance both performance and security.
Tip: Request a 7–14 day trial period before choosing a CDN and test with real user data.
Reducing Latency with Edge Server Placement
Edge servers reduce the physical distance between the user and the origin server, delivering data faster. Latency is usually measured in milliseconds and directly impacts user experience. Especially in high-traffic international websites, correctly placed edge points can dramatically improve page load times.
Edge placement should be based on target market analysis. For example, if 40% of your visitors come from Europe and 35% from the Middle East, PoP points should be concentrated in these regions. Additionally, anycast routing technology automatically routes the user request to the nearest edge point. This setup supports both performance and uninterrupted service continuity.
Another way to reduce latency is by using origin shield. Origin shield acts as an additional cache layer between edge points and the origin server. This reduces load on the origin and increases efficiency, especially when many edge points request data from the origin simultaneously.
Edge Placement Strategies
- Select PoPs close to target markets
- Use anycast routing
- Integrate origin shield
- Conduct regular latency tests
Geographic Proximity
Serving content from the nearest PoP provides millisecond-level advantages.
Smart Routing
Anycast routing automatically chooses the route with the lowest latency.
Origin Shield
Filters requests to the origin server, balancing load and reducing response times.
Performance Tests
After making edge placement changes, measure the impact using real user monitoring (RUM) and synthetic monitoring tools.
Techniques for Using CDN with Dynamic Content
Although CDNs are generally known for static assets, with advanced configurations they can also deliver high performance for dynamic content. Dynamic content is data generated in real time based on the user's request; for example, user-specific account pages, cart contents, or live scoreboards. This content is not cached directly, but “smart” CDN rules can reduce response time.
The most common method for using CDNs with dynamic content is Edge Side Includes (ESI). ESI serves the unchanging parts of the page from the cache while pulling the variable parts from the origin server. This way, both speed and personalization are maintained. Another method is API caching, where certain queries are stored for a short time. For example, currency exchange rates or weather data can be stored in the CDN cache with a 30–60 second TTL.
In scenarios requiring persistent connections such as WebSocket and HTTP/2 push, the CDN only optimizes the connection; the data still flows through the origin. However, CDN capabilities such as TCP optimization, protocol negotiation, and connection reuse reduce latency.
Highlighted Methods for Dynamic CDN Usage
- Page fragmentation and partial caching with ESI
- Caching API responses with short TTL
- TCP optimization and HTTP/2 push
- Geographic routing to the nearest origin
Partial Delivery with ESI
Fixed elements (header, footer) come from the CDN, while dynamic areas are loaded in real time.
Short-Term API Cache
Even for fast-changing data, provides caching benefits measured in seconds.
Geographically Smart Routing
Connects the user to the nearest and fastest origin, reducing latency.
Recommendation
When using a CDN for dynamic content, configure the cache key carefully. Variables such as user session data or language parameters can cause incorrect content to be served from the cache.
Cache Purge and Update Processes
Cache purging is a critical step to prevent users from accessing outdated or incorrect content. Data stored in the CDN or browser cache should be cleared manually or automatically when the content changes. This process is called “purge” and can be applied at different levels: single file, directory, or the entire cache.
The success of the purge process depends on its integration with your update mechanism. In modern deployment pipelines (CI/CD), a CDN API call can automatically trigger a purge when code or content is published. This eliminates the need for manual intervention by developers or content managers.
One point to note in purge operations is that excessive use can negatively impact performance. Clearing the entire cache causes edge points to fetch data from the origin again, which can lead to delays on first visits. Therefore, soft purge or purge by URL methods targeting only changed assets should be preferred.
Automatic Purge
With CI/CD integration, cache clearing after deployment becomes automated.
Selective Clearing
Only changed files are cleared, preventing performance loss.
Safe Updates
Prevents outdated or incorrect content from staying live permanently.
Warning: Slight performance drops after a purge are normal. This is the process of the cache refilling.
Security Advantages of CDN (DDoS Protection, SSL)
CDNs not only provide speed and performance but also strengthen your security infrastructure. High-traffic websites and e-commerce platforms are vulnerable to DDoS attacks, data breaches, and malicious bot traffic. CDNs minimize these threats through their global network structures and advanced security protocols.
One of the most common security advantages is DDoS protection. CDN providers prevent service interruptions by distributing traffic spikes and filtering attack traffic. Additionally, WAF (Web Application Firewall) integration offers extra protection against common web attacks such as SQL injection and XSS.
SSL/TLS certificate management is another strong area of CDNs. Many CDNs allow you to easily enable HTTPS via Let's Encrypt or custom certificates through their network. This ensures encrypted data transfer between the browser and the server, increasing user trust.
Real-Time DDoS Protection
The CDN network distributes and filters attack traffic, ensuring uninterrupted service.
Encrypted Communication
SSL/TLS secures the flow of data, increasing user confidence.
Bot Filtering
Blocks malicious bots, ensuring only real user traffic is processed.
Extra Tip
Regularly review the security reports provided by your CDN provider. These reports provide critical data about attack types and frequencies.
