INTEGRITY Cloudflare Docs

← Reference Architecture / reference-architecture / diagrams / content-delivery

Designing a distributed web performance architecture

Introduction

This guide describes a comprehensive layer 7 (L7) Application Performance strategy for architects and developers. In today's competitive digital landscape, application performance is a critical business differentiator. However, the ultimate objective is finding the performance-security equilibrium point.

While this guide focuses on maximizing speed and user experience (UX), performance cannot come at the expense of security. Architects must balance latency reduction against the necessary processing overhead of rigorous security controls, such as DDoS protection, WAF and Bot Management.

In high-risk scenarios, security must take precedence, where the "latency budget" gained from these performance optimizations is strategically reinvested to power essential protections, ensuring the application remains both fast enough to convert users and secure enough to protect the business.

Key business metrics Why it matters
User Engagement & Retention First Impressions & Abandonment: A fast-loading website is fundamental to a positive user experience. Users today expect instant access to information, and research highlights this, showing that a significant portion of users will abandon a website if it takes too long to load ↗, directly increasing the bounce rate.
Revenue Generation & Conversion Direct Business Impact: Web performance directly impacts a website's conversion rate, which is the percentage of visitors who complete a desired action, such as making a purchase or signing up for a newsletter. A faster site leads to higher conversion rates; for example, one study ↗ found that even a 100-millisecond reduction in homepage load time resulted in a 1.11% increase in conversions.
Organic Visibility & Search Ranking Traffic Acquisition & Authority: Search Engine Optimization (SEO) is how search engines like Google use page speed as a ranking factor. Faster-loading websites tend to rank higher in search results, which leads to more organic traffic. Google's Core Web Vitals (CWVs) are a set of metrics that measure a page's loading speed, interactivity, and visual stability, all of which are directly tied to performance and can significantly boost a site's search engine ranking.
High-Speed Delivery & Reliability User Experience & Trust: This metric combines a high Download Success Rate (Availability/Resiliency) with maximum Download Throughput (Speed). For mission-critical assets like software, video, or AI models, it ensures users get the file fast and reliably, directly impacting product usability and customer trust, especially during traffic spikes.
Edge Efficiency & Cost Control Operational Cost Reduction: This metric is primarily measured by the Cache Hit Ratio (CHR) for large files. Maximizing the CHR offloads traffic from the origin server, which is the key driver for minimizing infrastructure load and achieving significant Data Egress Cost Reduction (for example, through the Bandwidth Alliance ↗), directly translating to lower operational costs and greater profitability for the business.

Measuring the Impact: While marketing dashboards (for example, Google Analytics) track business outcomes, Cloudflare Web Analytics and Observatory measure the performance drivers. Use them to correlate real-time Core Web Vitals (CWV) and Real User Monitoring (RUM) improvements directly with reduced bounce rates and higher conversions, without compromising privacy or relying on heavy client-side scripts.

By following this architecture, organizations can expect:

Performance goals and metrics

Measuring performance is tricky ↗, and it serves a broader business context where Security and Compliance ↗ are often non-negotiable prerequisites. Organizations frequently validate that their architecture meets regulatory standards (such as data residency ↗ or encryption protocols, including Post-Quantum Cryptography (PQC)) before unlocking performance capabilities.

Once these security and compliance baselines are secured, effective optimization starts with measuring the “right” things - which interestingly is slightly different for everyone. Nonetheless, most people would agree to focus on user-centric metrics for website performance, using TTFB as a diagnostic tool ↗ for server responsiveness, but prioritizing Core Web Vitals (CWV) ↗ for measuring user experience.

Successful implementation is measured by these metrics:

Metric Target (75th percentile) What it measures
Largest Contentful Paint (LCP) < 2.5 s Loading performance (hero image/text visibility).
Interaction to Next Paint (INP) < 200 ms Interactivity and responsiveness to inputs.
Cumulative Layout Shift (CLS) < 0.1 Visual stability (unexpected layout shifts).
Time to First Byte (TTFB) < 800 ms Server responsiveness (network + processing time). Gain deep visibility into connection performance by leveraging fields like cf.timings.origin_ttfb_msec to isolate origin latency from network overhead.

The 75th percentile target is based on previous analysis ↗ for reasonable balance.

Data flow

This diagram illustrates the request lifecycle, highlighting how Cloudflare's layers/phases - Network, Optimization, Caching, and Origin connectivity - work together to minimize latency.

Figure 1: Data flow overview showing the request lifecycle across User, Cloudflare Edge, Tiered Edge, and Origin layers.
Figure 1: Data flow overview

For demonstration purposes, the architecture is organized into four logical layers and follows specific phases. Optimizing every step in this chain is required to achieve the best aggregate performance.

1. User (eyeball client)

The performance journey begins at the client's device. Device hardware, browser ↗, network quality and topology determine initial responsiveness. The goal here is to establish the fastest possible connection to the Cloudflare network.

Figure 2: Smart Shield Advanced network diagram showing Argo Smart Routing, Tiered Cache, Cache Reserve, Connection Reuse, Dedicated Egress IPs, and Load Balancing across multiple Points of Presence.
Figure 2: Smart Shield Advanced network diagram

2. Network and optimization (Cloudflare edge)

Once the request reaches the network edge, Cloudflare processes and optimizes the content before it is served or fetched from the cache.

Figure 3: Data flow for network and content optimization showing Traffic Handling, Programmatic Customization, Content Optimization, and Font and Tag Optimization.
Figure 3: Data flow - network and content optimization

3. Tiered Cache and Storage (Cloudflare edge)

Cloudflare can be organized into a specific topology. This layer handles content retention and retrieval. It acts as a shield for the origin and a high-speed store for the client.

Figure 4: Data flow for caching showing Local Edge, Tiered Cache, and Long-Term Cache or Storage layers with cache miss and fill paths.
Figure 4: Data flow - caching

4. Origin server

For requests that must traverse the full path (that is, dynamic content or cache misses), the origin configuration determines the final latency impact. Architects have two primary paths here: adopting the performant, resilient serverless model (also known as originless), or optimizing connectivity and security for a traditional Origin Server.

Serverless: Cloudflare's Developer Platform achieves the optimal performance tier by enabling an "originless" model. Fullstack applications are built and deployed directly on the global edge network worldwide, eliminating the full path traversal to a distant origin. Dynamic requests execute at the nearest Cloudflare PoP and provide seamless access to integrated edge storage solutions like R2 Object Storage and D1 Serverless SQLite Database. This drastically reduces TTFB and contributes significantly to aggressive CWV targets. Furthermore, this Originless model, leveraging Workers and R2, is the optimal design for high-performance file distribution, eliminating the need for a traditional backend server to deliver large datasets and media.

Traditional Origin Optimization: For applications that cannot be refactored or modernized ↗ to an originless model, the following optimizations are required to minimize the resulting latency impact of traditional infrastructure:

Figure 5: Deployment models comparing Serverful (DNS, CDN, Images, Zaraz, Waiting Room, Load Balancing, Network Interconnect) and Serverless (Workers, Workers KV, AI, Queues, R2, D1, Hyperdrive) architectures.
Figure 5: Deployment models

Tools and resources

Continuous monitoring and testing verify each optimization. Measurement and logging confirm real gains, surface regressions early, and reveal edge cases long before they affect clients.

When analyzing this data, it is important to take into account connection limits and TCP connection behavior, while also accounting for Cloudflare crawlers and the /cdn-cgi/ endpoint, as well as potential data discrepancies between Cloudflare and Google Analytics.

Cloudflare platform tools

Open source and automation

External validation and benchmarking tools

While Cloudflare provides internal metrics, external (third-party) tools are vital for independent validation and deep-dive analysis of the critical rendering path.