sfnext-performance

Performance Skill

This skill covers performance optimization techniques for Storefront Next storefronts.

Bundle Size Limits

The application enforces strict bundle size limits in package.json under the bundlesize configuration.

pnpm bundlesize:test      # Verify bundle stays within limits
pnpm bundlesize:analyze   # Analyze bundle composition

Built-in Metrics

Enable performance tracking in config.server.ts:

{
    performance: {
        metrics: {
            serverPerformanceMetricsEnabled: true,
            clientPerformanceMetricsEnabled: true,
            serverTimingHeaderEnabled: false  // Enable for debugging only
        }
    }
}

Tracks:

• SSR operations and rendering time
• SCAPI API calls with parallelization visibility
• Authentication operations
• Client-side navigation timing

Parallel Data Fetching

Return all promises simultaneously in loaders — avoid sequential await:

// GOOD — Parallel (all requests start at once)
export function loader({ context }: LoaderFunctionArgs) {
    const clients = createApiClients(context);
    return {
        product: clients.shopperProducts.getProduct({...}),
        reviews: clients.shopperProducts.getReviews({...}),
        recommendations: clients.shopperProducts.getRecommendations({...}),
    };
}

// BAD — Sequential (each waits for previous)
export async function loader({ context }: LoaderFunctionArgs) {
    const product = await clients.shopperProducts.getProduct({...});
    const reviews = await clients.shopperProducts.getReviews({...});
    return { product, reviews };
}

Image Optimization

Use the DynamicImage component with WebP format:

import { DynamicImage } from '@/components/dynamic-image';

<DynamicImage
    src={product.image.link}
    alt={product.image.alt}
    width={400}
    height={400}
    format="webp"
/>

Image Best Practices

• Use WebP format by default (smaller file sizes)
• Set explicit width and height to prevent layout shifts
• Lazy load below-the-fold images
• Use SCAPI image alt text as the primary alt source