If youre looking to make websites load faster without compromising on design quality,
try this simple trick: lazy loading images with a CSS background image fallback.
This reduces initial DOM size, making your site feel snappy even over slower connections.
heres how:
. lazy-load {/'' Default style ''/}/'' Fallback for non-lazy-loading browsers or when JS is disabled ''/[lazysizes] { display: none; }Then in HTML:
<figure class="lazy-loaded" data-src="/path/to/image. jpg"
><img src=" alt="
></figure
>JavaScript to load images on scroll:
document. querySelectorAll('. lazy-load'). forEach(img => {img. src = new URL(`data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADIAQMAAAD9zCqkAAAABGdBTUEAALGPC/xhB QAhcO8XrH35u72nNjY+PzkZvJycf///b6//s4/0wAAAAAAAA`, img. src). href;});This approach helps with performance without using large JS libraries. Try it out and see the difference in LCP metrics!