Eyewear eCommerce with Virtual Try-On
WooCommerce platform scaling and performance optimization featuring Virtual Try-On functionality for pioneers in computer eyewear.
The Challenge
A computer eyewear brand specializing in blue-light blocking glasses had grown significantly, but their WooCommerce store hadn't scaled with them. Page load times were exceeding 6 seconds on mobile, add-to-cart failures were occurring under moderate traffic, and their server was maxing out CPU during social media traffic spikes from influencer promotions. On top of the performance crisis, they wanted to add a Virtual Try-On feature that used the customer's webcam or phone camera to overlay frame styles on their face — a technically complex addition to an already struggling infrastructure.
Our Solution
We first stabilized the existing platform — migrating to a managed WooCommerce stack on Cloudways, implementing full-page caching with Redis, and optimizing the database query patterns causing the slowdowns. Once the site was stable, we integrated a Virtual Try-On SDK that uses MediaPipe face mesh for browser-based face landmark detection, letting customers see any frame on their face live via webcam or by uploading a photo, all without leaving the product page. The VTO module is lazy-loaded to avoid adding weight to the initial page load.
Our Approach
Platform Stabilization & Caching
Migrated the site to Cloudways with dedicated PHP workers configured for WooCommerce traffic patterns. Implemented Redis for object caching and Breeze for full-page caching. Optimized slow WooCommerce database queries identified via New Relic tracing. Reduced Time to First Byte from 2.8s to 0.4s on product pages.
Load Testing & Infrastructure Scaling
Ran load tests simulating influencer traffic spike scenarios (2,000 concurrent users over 10 minutes) to identify failure points. Configured autoscaling rules, implemented a Cloudflare CDN layer in front of WooCommerce, and added a queue for checkout processing to prevent order data corruption under simultaneous high-traffic checkouts.
Virtual Try-On Integration
Integrated a browser-based VTO SDK using MediaPipe face mesh for 478-landmark facial detection. Built a custom overlay renderer that maps each frame style's 3D dimensions to the user's detected face geometry in real time at 30fps. The VTO component is loaded on user opt-in via a 'Try On' button, keeping the initial product page payload unchanged.
Mobile VTO & Cross-Browser QA
Adapted the VTO component for mobile camera inputs using the MediaDevices API with fallback to photo upload mode on devices where live camera permissions weren't granted. Ran QA across Chrome, Safari, and Firefox on iOS and Android to ensure consistent face detection and frame overlay behavior across skin tones, lighting conditions, and face shapes.
"The site was falling over every time an influencer posted about us. Now it handles the spikes fine, and the try-on feature is the single most-requested thing our customers mention in reviews."
Let's Build Together
Have a similar challenge? We'd love to hear about your project.