> ## Documentation Index
> Fetch the complete documentation index at: https://buttercms.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# CDN & global content delivery

> ButterCMS uses Fastly for API responses and CloudFront for media. Edge caching, invalidation, image URL transformations, & DDoS protection.

{/* /SOURCE */}

## ButterCMS CDN infrastructure

ButterCMS has served more than a billion requests. The decoupling of the frontend from the heavy backend makes ButterCMS inherently faster than traditional CMSs. The content API traffic is served through **Fastly**, a reliable and quick content delivery platform. Your media assets are stored and delivered via **Amazon CloudFront**, a low-latency CDN.

### Dual CDN architecture

ButterCMS employs a strategic dual-CDN approach:

| Content Type         | CDN Provider      | Optimization                            |
| -------------------- | ----------------- | --------------------------------------- |
| API Responses (JSON) | Fastly            | Edge caching, low latency               |
| Media Assets         | Amazon CloudFront | Image optimization, global distribution |

```mermaid theme={null}
flowchart TB
    subgraph Platform[ButterCMS Platform]
        API[API Server]
        Media[Media Storage]
    end

    subgraph FastlyCDN[Fastly CDN - API Responses]
        F1[Fastly Edge<br/>US-E]
        F2[Fastly Edge<br/>EU-W]
    end

    subgraph CloudFrontCDN[CloudFront CDN - Media Assets]
        CF[CloudFront Edge<br/>Global]
    end

    subgraph Users[End Users Worldwide]
        U[Users]
    end

    API --> F1
    API --> F2
    Media --> CF

    F1 -->|JSON/API<br/>Responses| U
    F2 -->|JSON/API<br/>Responses| U
    CF -->|Images/Media<br/>Assets| U
```

## How CDN caching works

Content delivery operates through a global CDN with **150+ edge locations**. Read operations are cached for 20 days at edge locations by default, providing sub-100ms response times for cached content worldwide.

### Cache behavior

* **Initial requests** fetch content from the API and populate edge caches (\~200-500ms)
* **Subsequent requests** serve from the nearest location (\~50-100ms)
* **Content updates** automatically invalidate relevant cache entries globally

### Response time comparison

| Scenario            | Response Time | Notes                                         |
| ------------------- | ------------- | --------------------------------------------- |
| Cache hit (edge)    | 50-100ms      | Content served from nearest CDN location      |
| Cache miss (origin) | 200-500ms     | Content fetched from origin, then cached      |
| Without CDN         | 500-2000ms    | Direct origin requests from distant locations |

## Global edge locations

With third-party CDN caching, you can ensure that the same cache is served around the world irrespective of country or region. CDNs improve website performance by cascading data to locations closer to the user.

### Edge location benefits

<CardGroup cols={2}>
  <Card title="Reduced Latency" icon="clock">
    Content is served from the geographically nearest location to each user
  </Card>

  <Card title="High Availability" icon="server">
    Multiple edge nodes provide redundancy and failover capabilities
  </Card>

  <Card title="Bandwidth Savings" icon="chart-line">
    Origin servers handle fewer requests, reducing bandwidth costs
  </Card>

  <Card title="DDoS Protection" icon="shield">
    CDN absorbs and mitigates distributed attacks
  </Card>
</CardGroup>

## Media delivery optimization

### Image CDN features

ButterCMS media assets are delivered through CloudFront with automatic optimizations:

**Automatic Features:**

* **WebP Conversion** - Modern browsers receive WebP format automatically
* **Compression** - Images are compressed without visible quality loss
* **Lazy Loading Support** - URL-based transformations support progressive image loading (requires client-side implementation)

**URL Transformations:**

You can transform images on-the-fly using URL parameters:

```
https://cdn.buttercms.com/[file-handle]

# Resize to 800px width
https://cdn.buttercms.com/resize=width:800/[file-handle]

# Crop to 400x300
https://cdn.buttercms.com/resize=width:400,height:300,fit:crop/[file-handle]

# Convert to WebP with quality 80
https://cdn.buttercms.com/output=format:webp,quality:80/[file-handle]
```

### Responsive image example

```html theme={null}
<!-- Responsive images with srcset -->
<img
  src="https://cdn.buttercms.com/resize=width:800/abc123"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  alt="Responsive image"
  loading="lazy"
/>
```

## Cache invalidation

Content changes (create, update, delete, and status changes) trigger multi-layer cache invalidation including:

1. **Object cache** - Individual cached items
2. **Serialized response cache** - Pre-built API responses
3. **Global CDN cache** - All edge location caches

Referenced content invalidation cascades automatically - when a referenced object changes, all content that references it also gets invalidated to maintain consistency.

### Invalidation flow

```mermaid theme={null}
flowchart TB
    A[Content Update in Dashboard] --> B

    subgraph Platform[ButterCMS Platform]
        B[1. Save to Database] --> C[2. Invalidate Caches]
    end

    C --> D[Edge US-E]
    C --> E[Edge EU-W]
    C --> F[Edge APAC]

    D --> G[Next request fetches<br/>fresh content]
    E --> G
    F --> G
```

## Best practices for CDN performance

<AccordionGroup>
  <Accordion title="Optimize API requests">
    Smaller payloads cache more efficiently and transfer faster from edge locations. See:

    * [Query Optimization](./query-optimization) — `exclude_body`, `levels`, and ordering
    * [Pagination](./pagination) — page size and pagination strategies
    * [Filtering Requests](./filtering-requests) — server-side filtering to reduce payload size
  </Accordion>

  <Accordion title="Leverage image transformations">
    **Resize images server-side** instead of client-side:

    ```jsx theme={null}
    // Good - serve appropriately sized images
    <img src="https://cdn.buttercms.com/resize=width:400/abc123" />

    // Avoid - downloading full-size then scaling
    <img src="https://cdn.buttercms.com/abc123" style={{width: '400px'}} />
    ```
  </Accordion>

  <Accordion title="Use appropriate caching headers">
    When implementing your own caching layer:

    ```javascript theme={null}
    // Set cache headers for static content
    res.setHeader('Cache-Control', 'public, max-age=3600'); // 1 hour

    // For frequently changing content
    res.setHeader('Cache-Control', 'public, max-age=60, stale-while-revalidate=300');
    ```
  </Accordion>

  <Accordion title="Monitor CDN performance">
    Track CDN effectiveness:

    * **Cache hit ratio** - Should be >90% for static content
    * **Edge response times** - Should be `<100ms` for cached content
    * **Origin requests** - Monitor for unexpected spikes
  </Accordion>
</AccordionGroup>

## Security at the CDN level

### DDoS protection

Distributed Denial of Service (DDoS) attacks can bring the whole application down if the architecture is not designed to prevent such a situation. ButterCMS protects users at the CDN level and also with load balancers and through AWS Shield.

As your application becomes more popular, it can gain more attention from people with bad intentions. Applications based on a traditional monolithic architecture may be easily affected by DDoS attacks. With ButterCMS, your content is protected and will be available without interruptions thanks to modern cloud architectures.

{/* SOURCE: file_path="blog-posts/gsd/migrate-from-wordpress-to-angular-headless-cms.md" section="Security" */}

### Data security

ButterCMS handles all aspects of security. The data centers used for storing and delivering your content are all ISO-27001 compliant. Your data is encrypted at rest using AES-256, and all API traffic is encrypted in transit using TLS 1.2+.

## Regional content delivery

### How regional routing works

When a user requests content:

1. **DNS Resolution** - Request is routed to nearest edge location
2. **Edge Check** - CDN checks if content is cached at that edge
3. **Cache Hit** - Cached content served immediately (\~50-100ms)
4. **Cache Miss** - Request forwarded to origin, response cached at edge

### Performance by region

| Region             | Typical Cache Hit Response | Edge Locations |
| ------------------ | -------------------------- | -------------- |
| North America      | 30-80ms                    | 40+            |
| Europe             | 40-90ms                    | 30+            |
| Asia Pacific       | 50-100ms                   | 25+            |
| South America      | 60-120ms                   | 10+            |
| Middle East/Africa | 70-130ms                   | 10+            |