Skip to content
Rose City Commerce

Large-Scale Ecommerce Performance Optimization

Led performance initiatives across Fender's global Shopify Plus storefronts, improving page-load speed, Core Web Vitals, product discovery, media delivery, and frontend maintainability.

Large-Scale Ecommerce Performance Optimization screenshot
Completed as part of an in-house ecommerce engineering team and included here as a professional portfolio project.
Reduced homepage load time from approximately 10 seconds to 4 seconds, cut PDP Largest Contentful Paint by more than 50%, improved PDP Cumulative Layout Shift by more than 90%, and improved sitewide LCP by approximately 30–40%.

Context

Fender's Shopify Plus properties supported high-traffic global storefronts with media-rich product pages, long-form marketing pages, product recommendation rails, localized content, and third-party integrations.

The challenge was to improve both measured and perceived performance without limiting the flexibility needed by merchandising and marketing teams.

I led initiatives by connecting technical measurements with customer-behavior data, then working through the tradeoffs with ecommerce, merchandising, and marketing stakeholders.

Homepage and Marketing Page Performance

Problem

Long-form marketing pages contained numerous product rails, including deeply nested recommendations farther down the page.

Loading all of those products as customers scrolled introduced repeated loading states, additional network requests, and unnecessary frontend work.

Data-Driven Decision

Analytics showed that only 0.3% of visitors clicked a product rail. Of the visitors who did, 99% clicked one of the first two product rails.

Based on that behavior, I recommended reducing or removing product loading from deeper, lower-engagement sections rather than continuing to optimize loading states that almost no customers interacted with.

Solution

  • Progressively lazy-loaded product tiles on marketing pages
  • Prioritized the first product rails, where nearly all engagement occurred
  • Reduced product fetching and rendering for deeply nested rails
  • Minimized repeated loading states as customers moved through the page
  • Reduced unnecessary API requests and client-side rendering work

Result

Reduced homepage and marketing-page load time from approximately 10 seconds to 4 seconds while preserving the product-discovery experiences customers actually used.

Product Detail Page Core Web Vitals

Problem

The primary PDP image was rendered inside a React-powered media gallery.

Because the gallery mounted after the initial server-rendered page, customers could experience a delayed hero image and visible layout movement during hydration. This negatively affected both Largest Contentful Paint and Cumulative Layout Shift.

Solution

Created a server-rendered, hydrated skeleton that included the primary product image before the React gallery initialized.

The server-rendered image matched the gallery's final dimensions, placement, and visual presentation. When React mounted, the full gallery replaced the skeleton seamlessly without a visible jump or duplicate loading experience.

  • Displayed the main product image immediately
  • Reserved the gallery's final layout space before hydration
  • Avoided a blank or unstable media region
  • Prevented the React gallery from visibly shifting the page
  • Made the initial server-rendered experience nearly indistinguishable from the hydrated application

Result

  • Reduced PDP Largest Contentful Paint by more than 50%
  • Improved Cumulative Layout Shift by more than 90%
  • Created a faster and more stable initial product-page experience
  • Preserved the full React gallery experience, including variant-driven media and interactive product views

Sitewide Image Delivery

Problem

Large ecommerce imagery was being delivered without consistently matching each asset to the exact size and format needed by the customer's device and layout.

That increased transfer size and delayed the rendering of key visual content across the storefront.

Solution

Introduced Cloudflare Image Resizing to dynamically deliver appropriately sized and optimized assets.

The implementation allowed storefront components to request images based on their rendered dimensions rather than relying on oversized source assets.

Result

Improved Largest Contentful Paint by approximately 30–40% across the site, with particularly strong gains on image-heavy ecommerce pages.

Additional Improvements

Storefront and Developer Performance

  • Implemented asynchronous product-tile loading for collection and marketing pages
  • Added skeleton states and reserved dimensions to reduce perceived latency and content movement
  • Improved media-loading priority for primary PDP content
  • Refactored carousel and gallery logic to reduce unnecessary rendering
  • Evaluated third-party scripts and storefront integrations for performance impact
  • Applied React and Liquid optimization patterns across shared storefront functionality
  • Improved Safari behavior and cross-browser reliability
  • Reduced frontend rebuild time from approximately 20 seconds to 2 seconds through code splitting and architectural improvements

Developer Feedback Loop

Frontend architecture and code splitting were also applied to the development workflow. Reducing rebuild time from approximately 20 seconds to 2 seconds made performance work easier to iterate on and improved the feedback loop for shared storefront development.

Results

Measured and Organizational Impact

  • Reduced homepage and marketing-page load time from approximately 10 seconds to 4 seconds
  • Reduced PDP Largest Contentful Paint by more than 50%
  • Improved PDP Cumulative Layout Shift by more than 90%
  • Improved sitewide Largest Contentful Paint by approximately 30–40%
  • Reduced frontend rebuild time from approximately 20 seconds to 2 seconds
  • Used customer-behavior data to eliminate low-value product loading
  • Improved perceived performance while preserving merchandising flexibility
  • Created reusable performance patterns across multiple ecommerce experiences

Measured performance

WordPress site vs custom Next.js site

Customer Experience

MetricBeforeAfterChange
Homepage and marketing-page load time≈10 seconds≈4 seconds≈60% faster
PDP Largest Contentful PaintBaselineLess than half>50% reduction
PDP Cumulative Layout ShiftBaselineLess than one-tenth>90% improvement
Sitewide Largest Contentful PaintBaselineOptimized image delivery≈30–40% improvement

Developer Experience

MetricBeforeAfterChange
Frontend rebuild time≈20 seconds≈2 seconds≈90% faster

Technical Highlights

  • Analytics-driven product-loading strategy
  • Progressive product-rail lazy loading
  • Server-rendered PDP image skeleton
  • Hydration-safe gallery replacement
  • Cloudflare Image Resizing
  • Responsive image delivery
  • React and Liquid optimization
  • Code splitting and faster rebuilds
  • Cross-browser reliability

Stack

Shopify PlusLiquidReactTypeScriptCloudflare Image ResizingPerformance APIsCore Web VitalsAnalyticsCode SplittingResponsive Images
Request a free auditBack to work
Large-Scale Ecommerce Performance Optimization | Rose City Commerce