How I made a scroll-scrubbed video portfolio fast (Next.js 15 + GSAP + canvas)

Short summary

Video scroll-scrubbing works better with frame sequences than video files. This developer extracted 61-frame sequences as WebP images, rendered on canvas, and used IntersectionObserver + fetch-priority hints for lazy loading. Result: portfolio shrank from 12.8MB media + 210kB First Load JS to 9.8MB + 162kB with zero mobile jank.

• •Frame sequences outperform video for scroll-scrubbing due to deterministic rendering
• •Reduced media from 12.8MB to 9.8MB and First Load JS from 210kB to 162kB
• •Key techniques: WebP quality sweeps, DPR capping at 1.5, lazy-load with IntersectionObserver and fetch-priority hints

Generated with AI, which can make mistakes.