Lazy Loading

When a page has dozens of images, downloading them all as soon as it opens makes the first screen slow. Lazy loading puts a placeholder there first (a gray block or a blurry thumbnail) and only requests the real image when it's about to enter the viewport. The simplest way is to add loading="lazy" to the image, and the browser handles the rest.

Lazy loading isn't just for images. It also works for components and code: heavy modules like dialogs, chart libraries, and rich text editors can wait to load their JS until the user actually opens them. This is usually called "on-demand loading" or "code splitting."

Don't mix it up with infinite scroll. Lazy loading delays the resources for content that's already going to be on the page. Infinite scroll keeps appending new data. Give placeholders a fixed width and height up front. Otherwise, when the image loads, it pushes the content below it down and the page jumps.