Chapter 15: Performance and cost

Lazy loading

Not loading something until it is needed: an image as it nears the screen, a chart's code when someone opens the chart. The first view gets lighter, and anyone who never scrolls that far never pays for it.

It's an easy thing to ask an agent for, and a common way to do harm. Told to lazy-load the images, it may well do every one of them, including the big one at the top, and that makes the main content appear later, which is the number you were trying to improve.

Say it to your agent

“Add loading="lazy" to images below the fold only. Keep the first image in the page eager with fetchpriority="high", and give every image width and height. Show me LCP from a Lighthouse run before and after.”

The workshop

Name a word, or describe what you mean in everyday language.