E-commerce Performance Optimization
Direct-to-Consumer Brand
Context
A direct-to-consumer brand with $50M annual revenue was losing customers to slow page loads. Core Web Vitals were failing, affecting search rankings. The existing Next.js site was bloated with third-party scripts and unoptimized images.
Constraints
- —No changes to visual design — marketing had approved current aesthetics
- —All existing integrations must remain functional
- —Marketing team must retain ability to update content without engineering
- —4-month timeline to align with holiday shopping season
- —Cannot reduce functionality or remove features
Engineering Decisions
Server-side rendering with streaming
Moved from client-side rendering to SSR with streaming. First byte arrived faster, and progressive hydration improved perceived performance.
Edge caching with Cloudflare
Static assets and API responses cached at edge. Reduced origin requests by 80% and improved global performance consistency.
Image optimization pipeline
Implemented automatic WebP/AVIF conversion, responsive images, and lazy loading. Images were the largest contributor to LCP.
Security Considerations
- •CSP headers implemented to restrict third-party script execution
- •Subresource integrity for all external scripts
- •Bot protection at edge to prevent inventory scraping
- •Rate limiting on checkout API
Performance Considerations
- •LCP reduced from 4.2s to 1.1s
- •Total Blocking Time reduced from 650ms to 180ms
- •Cumulative Layout Shift reduced from 0.25 to 0.02
- •JavaScript bundle reduced from 1.2MB to 380KB (gzipped)
- •Third-party scripts loaded asynchronously after critical path
UX Trade-offs
- —Delayed loading of chat widget until after LCP — slight delay in chat availability, significant performance improvement
- —Simplified above-the-fold content — fewer animations, faster perceived load
- —Skeleton screens during hydration — maintained layout stability
Failures & Corrections
Failure
Initial SSR implementation caused TTFB regression
Correction
Implemented Redis caching for database queries in render path. TTFB improved from 800ms to 120ms.
Failure
Third-party review widget caused layout shift
Correction
Reserved space with minimum height. Loaded widget asynchronously after initial render.
Final Architecture
Next.js 14 with App Router, deployed on Vercel. Cloudflare for edge caching and security. PostgreSQL for data, Redis for caching. Image CDN for optimized asset delivery.
Outcome
Conversion rate increased 15%. Bounce rate decreased 32%. Core Web Vitals passed for 95% of page loads. Search ranking improved an average of 4 positions for key terms.
Why It Matters
Performance is a feature. This project demonstrated measurable business impact from technical improvements. The 15% conversion increase translated to approximately $7.5M additional annual revenue.
Interested in a similar approach for your project?
Start a Conversation