Performance Considerations

This guide covers performance optimization strategies for Agility CMS implementations, including caching, CDN usage, and optimization techniques.

Performance Architecture

Multi-Layer Caching

1. CDN Cache: Assets cached at edge locations
2. API Cache: API responses cached
3. Application Cache: Next.js cache tags and revalidation
4. Browser Cache: Client-side caching

Optimization Strategies

1. CDN Delivery: Assets via CDN
2. Image Optimization: Automatic resizing and formats
3. Caching: Multi-layer caching strategy
4. Static Generation: Pre-render pages at build time
5. Incremental Regeneration: Update pages on-demand

Caching Strategy

Cache Tags

Use cache tags for granular invalidation:

tags: [`agility-content-${contentID}-${locale}`]

Cache Patterns

Content Items:

agility-content-{contentID}-{locale}

Content Lists:

agility-content-{referenceName}-{locale}

Pages:

agility-page-{pageID}-{locale}

Sitemaps:

agility-sitemap-flat-{locale}
agility-sitemap-nested-{locale}

Revalidation

Time-Based:

• Revalidate after specific time (60 seconds default)
• Balance freshness with performance

On-Demand:

• Webhook-triggered revalidation
• Immediate updates when content changes

CDN Strategy

Asset Delivery

• Images: Delivered via CDN
• Optimization: Automatic resizing and formats
• Performance: Global edge locations

Image Optimization

• Automatic Resizing: CDN handles resizing
• Format Optimization: WebP, AVIF support
• Lazy Loading: Load images on demand

Static Generation

Pre-rendering

Generate static pages at build time:

export async function generateStaticParams() {
  const sitemap = await getSitemapFlat({ ... })
  return sitemap.map(page => ({ slug: page.path }))
}

Incremental Regeneration

Update pages on-demand:

export const revalidate = 60 // Revalidate every 60 seconds

Query Optimization

Efficient Queries

• Limit Results: Always limit large lists
• Use Filters: Filter at API level
• Pagination: Implement pagination
• Selective Fields: Fetch only needed fields

Parallel Fetching

Fetch multiple items in parallel:

const [page, posts, settings] = await Promise.all([
  getAgilityPage({ ... }),
  getContentList({ ... }),
  getContentItem({ ... })
])

Performance Best Practices

1. Use Appropriate Cache Duration: Balance freshness with performance
2. Leverage Cache Tags: Use specific cache tags for granular invalidation
3. Optimize Images: Use CDN and appropriate formats
4. Limit Queries: Always limit large content lists
5. Parallel Fetching: Fetch multiple items in parallel when possible
6. Static Generation: Pre-render pages when possible
7. Monitor Performance: Track cache hit rates and response times

---

Next: Scalability - Scaling strategies