A web developer shares a pattern for improving page performance by initially loading a lightweight AVIF image as a placeholder, then conditionally replacing it with an animated inline SVG only on larger viewports after first paint. The technique uses data attributes for declarative configuration, double requestAnimationFrame() to defer DOM work until after initial render, fetch() to lazily load the SVG fragment, DOMParser for efficient DOM replacement, and a media query listener to restore the static image if the viewport shrinks. This avoids forcing all visitors to download heavy animation markup upfront, keeping mobile fast while preserving the richer animated experience on desktop.
Table of contents
Start with a lightweight fallbackWaiting until after first paintFetching the animated SVG only when neededParse and replace the bannerRestoring the static imageWhy I like this pattern11.5K Impressions