Lazy loading
Not fetching something until it is about to be needed: images below the fold, or a chart component nobody has clicked yet.
See it
What it is
Lazy loading means a thing is not fetched until it is about to matter. For images and iframes that is one attribute, 'loading=lazy', and the browser handles the rest: it waits until the element approaches the viewport, then downloads. For JavaScript it is a dynamic 'import()' paired with whatever loading boundary your framework hands you (React's 'lazy' and 'Suspense', Vue's 'defineAsyncComponent', Svelte's awaited import, Astro's 'client:visible'), so the chart library or the rich text editor only downloads when someone actually opens that tab.
Reach for it when a page ships things most visitors never see: a long photo feed, comment threads, embedded maps and video players, modal content, admin panels behind a role check. It buys you a smaller first load without deleting any features. For custom cases (background sections, infinite feeds) an 'IntersectionObserver' gives you the same trigger by hand.
The gotcha everyone hits once: never lazy load your hero image. Lazy loading the LCP element makes the browser discover it late and your headline metric gets worse, not better. Anything in the first screen stays eager. Second gotcha: lazy content still needs its box reserved, otherwise you traded bytes for layout shift.
Ask AI for it
Add lazy loading to this page. Put loading='lazy' and decoding='async' on every image and iframe that starts below the fold, and leave the hero image eager with fetchpriority='high'. For heavy below-the-fold or behind-a-click components (charts, editors, video players, modals), use this project's framework-native dynamic-import and loading-boundary mechanism rather than a hard-coded React pattern: React.lazy with Suspense, Vue defineAsyncComponent, Svelte's awaited import, Astro's client:visible, or a plain dynamic import() with your own placeholder. Give the placeholder the same size as the finished component. Keep the LCP asset eager, and reserve the exact space for everything deferred using width/height attributes or CSS aspect-ratio so nothing shifts when it arrives.