Lazy loading is a web optimization technique that defers the loading of resources (images, videos, iframes, etc.) until they are about to enter the user's viewport. By fetching only the resources needed for the initial view and loading the rest on scroll, initial page load speed improves dramatically.
Adding the loading="lazy" attribute to an HTML img element enables native browser lazy loading. Chrome, Firefox, Safari, and Edge all support this attribute. No JavaScript library is required, making the implementation cost extremely low.
The impact on Core Web Vitals is substantial, particularly for LCP (Largest Contentful Paint). On a page with 50 images, loading all of them simultaneously competes for bandwidth. With lazy loading, only the few images visible on screen are fetched first. According to HTTP Archive data, adopting lazy loading reduces median page weight by roughly 20%.
Implementing lazy loading on the destination page of a shortened URL directly improves user experience. Users who click a campaign link expect to see content immediately; a slow initial load increases bounce rates. Google's research shows that when page load time increases from 1 second to 3 seconds, the bounce rate rises by 32%.
An important caveat: do not apply loading="lazy" to above-the-fold images (those visible without scrolling). Lazy loading above-the-fold images delays LCP and hurts Core Web Vitals scores. You can find related books on Amazon.