B2B_E-COMMERCE_PERFORMANCE_OVERHAUL
"Conversion rate increased by 23% via Core Web Vitals optimization"
A large-scale B2B e-commerce platform was hemorrhaging conversions due to performance issues. Despite handling thousands of daily transactions, the frontend was legacy PHP server-side rendering with poor Core Web Vitals (Desktop: 60%, Mobile: 40%). Slow pages were leaving millions on the table.
ENGINEERING_LOGS
#1 Legacy PHP SSR Constraints
Most modern optimization guides assume a SPA framework. We had traditional page loads with PHP templating.
Inlined critical path CSS (extracted with PurgeCSS), preloaded key resources, and minimized render-blocking scripts at the template level.
#2 Blocking Third-Party Scripts
The site had 12 integrations (analytics, chat, A/B testing) all loading synchronously.
Implemented a requestIdleCallback wrapper to defer all non-critical scripts until the main thread was free.
#3 Mobile on 4G Performance
Desktop improvements were easier, but mobile remained unstable on slow connections.
Implemented adaptive loading via Network Information API to serve lower-res assets on slow connections and lazy-loaded product grids.
// Intersection Observer for lazy images
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
const src = img.dataset.src;
// Preload WebP, fallback to original
const webpSrc = src.replace(/\.(jpg|png)$/, '.webp');
fetch(webpSrc)
.then(res => res.ok ? webpSrc : src)
.then(finalSrc => {
img.src = finalSrc;
img.classList.add('loaded');
})
.catch(() => img.src = src);
observer.unobserve(img);
}
});
}, { rootMargin: '50px' });
document.querySelectorAll('img[data-src]').forEach(img => {
imageObserver.observe(img);
});