CASE STUDY

From a Failing PageSpeed Score to a Fully Optimized Shopify Product Page

Client: bubucarrier.com — a Shopify store with a product page that had completely failed its PageSpeed audit. The design couldn't change; the performance had to.

0
BEFORE
0
AFTER
THE PROBLEM

A product page that scored a complete fail

The product page's PageSpeed score had collapsed entirely — not a "needs improvement" result, a full failure. The page combined a video story slider, before/after image comparisons, and image-with-text blocks, all loading eagerly regardless of whether a visitor ever scrolled to see them. On top of that, the slider itself was prone to crashing with a JavaScript error, which made the performance problem worse by breaking execution partway through the page.

WHAT I FIXED

Root-cause fixes, not a redesign

Video story slider

Rebuilt to use IntersectionObserver for lazy loading, so video sources only load on-demand as a visitor actually scrolls to them, instead of all loading upfront. Wrapped initialization in try/catch and deferred DOM setup, which fixed the JS error that had been crashing the slider.

Before/after image sections

Rewrote responsive image handling with proper srcset and sizes attributes, fixed missing width/height dimensions (a CLS cause), and eliminated a pattern of forced reflows that was making the browser recalculate layout repeatedly during load.

Image-with-text blocks

Rewrote these sections' responsive image handling the same way — correct srcset breakpoints so mobile visitors weren't downloading desktop-sized images.

Video compression

Compressed source video to WebM/VP9 using FFmpeg and CloudConvert, cutting file size significantly without a visible quality drop.

Hero image preload scoping

Scoped the hero image preload in theme.liquid so the browser prioritized the actual above-the-fold image instead of preloading assets that weren't immediately needed.

No design changes

Every fix was implemented at the code level — the visual design the client had already approved stayed exactly the same.

THE RESULT

A passing score, without touching the design

The product page went from a complete PageSpeed failure to a fully optimized result — while keeping the exact visual design and content the client had already signed off on. The fixes addressed the actual causes (unoptimized media, blocking scripts, layout shift, a crashing slider) rather than masking them.

Get a Free Audit on Your Store
0
FINAL SCORE