Lazy Loading

A loading strategy where images and other heavy assets below the fold aren't fetched until the visitor scrolls near them. Instead of downloading all eighty product thumbnails on a category page the moment it opens, the browser loads the dozen that are visible and defers the rest. Done right, it's one of the highest-value performance techniques available to an image-heavy store: initial page weight drops sharply, the visible content paints faster, bandwidth stops being wasted on images nobody scrolls to, and Core Web Vitals scores improve on the exact templates — category and product pages — where stores live or die. Modern implementation is simple at its core: the loading='lazy' attribute on image tags, supported natively by every current browser. But the ways to get it wrong are what keep it on our audit checklists. The classic mistake is lazy-loading the hero image — the largest element in the first viewport — which delays the very paint that LCP measures and makes the score worse, not better. Google is explicit: above-the-fold images should load eagerly, everything below should not. The second classic is lazy-loaded images without reserved dimensions, so each one that pops in shoves the layout downward and racks up CLS. We also see plugin-based lazy loading stacked on top of native lazy loading, JavaScript implementations that hide images from crawlers entirely — product images that never make it into Google Images — and placeholder blurs that never resolve on slow connections. Our team audits how each template loads its media, exempts the critical above-the-fold assets, applies lazy loading with proper width and height attributes everywhere else, and verifies that crawlers still see every image that should rank.