bc-performance

# BigCommerce Performance Optimization

## Before writing code

**Fetch live docs**:
1. Web-search `site:developer.bigcommerce.com performance` for performance guide
2. Web-search `bigcommerce stencil theme performance optimization` for theme tuning
3. Web-search `bigcommerce core web vitals optimization` for CWV improvements

## Platform-Level Performance

### BigCommerce CDN

BigCommerce automatically serves storefronts via its global CDN:
- Static assets (JS, CSS, images) cached at edge
- Akamai-powered infrastructure
- Automatic HTTPS/SSL
- No CDN configuration needed from developers

### Server-Side Rendering

Stencil themes are server-rendered by BigCommerce:
- HTML generated on BigCommerce infrastructure
- Response times depend on template complexity and front matter data
- Minimize front matter requests for faster server response

## Stencil Theme Optimization

### Reduce Front Matter Data

Front matter declares what data to load per page — only request what you need:
- Remove unused front matter sections (e.g., `related_products` if not displayed)
- Reduce `limit` values to minimum needed
- Use `{{#if}}` to conditionally render sections, but note the data is still fetched

### JavaScript Optimization

- **Bundle size**: minimize third-party dependencies
- **Code splitting**: use dynamic imports for page-specific code
- **Defer non-critical JS**: use `defer` or `async` attributes
- **Remove unused jQuery plugins** if the theme ships jQuery
- **Tree shaking**: ensure webpack is configured for dead code elimination

### CSS Optimization

- Remove unused SCSS — audit with coverage tools
- Minimize use of `@extend` (causes CSS bloat)
- Use CSS custom properties for runtime theming instead of SCSS variables where appropriate
- Critical CSS: inline above-the-fold styles

### Image Optimization

- Use BigCommerce's image CDN — images are auto-resized via `{{getImage}}` helper
- Specify appropriate image dimensions: `{{getImage product.image 'product_size'}}`
- Use modern formats: BigCommerce CDN serves WebP when supported
- Lazy load below-the-fold images: `loading="lazy"`
- Use responsive images with `srcset` and `sizes`

### Template Optimization

- Minimize Handlebars helper nesting depth
- Reduce the number of partials per page
- Cache computed values — don't repeat the same helper call
- Use `{{#if}}` to skip rendering for empty data

## API Performance

### REST API Optimization

- Use `include` to fetch sub-resources in one request (avoid N+1)
- Use `include_fields` / `exclude_fields` to reduce response payload
- Implement caching for read-heavy data (products, categories)
- Respect rate limits — batch operations where possible
- Use webhooks instead of polling for real-time data

### GraphQL Optimization

- Request only needed fields — avoid over-fetching
- Use pagination (`first`/`after`) — never request all items
- Use fragments for reusable field sets
- Be aware of query complexity limits
- Cache GraphQL responses on your side (Catalyst uses Next.js caching)

### Caching Patterns

| Data Type | Cache Strategy | TTL |
|-----------|---------------|-----|
| Product catalog | CDN / ISR | 5–60 minutes |
| Category tree | CDN / ISR | 5–60 minutes |
| Cart | No cache | Real-time |
| Customer data | No cache | Real-time |
| Store settings | Long cache | 1–24 hours |
| Static assets | CDN | Long-term (versioned) |

## Core Web Vitals

### LCP (Largest Contentful Paint)

- Optimize hero images: correct size, preload, no lazy load
- Minimize server response time (reduce front matter)
- Preload critical fonts: `<link rel="preload" href="font.woff2" as="font">`

### FID / INP (Interaction to Next Paint)

- Minimize main thread blocking — defer heavy JS
- Break up long tasks
- Use `requestIdleCallback` for non-critical work
- Reduce JavaScript bundle size

### CLS (Cumulative Layout Shift)

- Set explicit dimensions on images and embeds
- Reserve space for dynamic content (ads, lazy-loaded elements)
- Avoid inserting content above existing content
- Use `font-display: swap` with size-adjusted fallback fonts

## Headless (Catalyst) Performance

### Next.js Optimizations

- **Static Generation**: pre-render product/category pages at build
- **ISR**: revalidate on interval for fresh data without full rebuild
- **Edge Functions**: run logic at CDN edge
- **Image Optimization**: `next/image` for automatic resizing, WebP, lazy loading
- **Font Optimization**: `next/font` for zero-CLS web fonts

### GraphQL Caching in Catalyst

- Server-side: Next.js data cache with revalidation
- Client-side: SWR or React Query for client-fetched data
- Storefront API responses can be cached at CDN level

## Best Practices

- Measure before optimizing — use Lighthouse, WebPageTest, Chrome DevTools
- Minimize front matter data — only fetch what the page displays
- Lazy load images below the fold
- Defer non-critical JavaScript
- Reduce third-party script impact (analytics, chat, pixels)
- Use BigCommerce CDN for all assets — don't self-host
- Cache API responses for read-heavy data
- Use ISR/SSG for headless storefronts
- Monitor Core Web Vitals in Google Search Console
- Test performance across device types and connection speeds

Fetch the BigCommerce performance documentation and Stencil optimization guide for current CDN features, image handling, and performance best practices before implementing.