Performance
Eager loading
Eager loading is fetching a resource as soon as the parser sees it, with no delay for visibility. It is the default for images and iframes, and the right choice for anything in the first screen.
How it is measured
Check the `loading` attribute on image and iframe tags. No attribute, or `loading="eager"`, means the browser starts the request immediately. Add `fetchpriority="high"` to raise its position in the queue for the LCP image.
The cost is bandwidth competition. Every eagerly loaded image above and below the fold competes for the same connection, so loading too much early can delay the one image that decides LCP.
Worked example
A product page marks all 18 gallery thumbnails with `loading="lazy"`, including the large main photo. The main photo starts at 1,420 ms after layout, and LCP is 3,150 ms. Switching the main image to eager with `fetchpriority="high"` starts it at 310 ms and LCP falls to 1,880 ms.
The 17 thumbnails stay lazy so they do not slow the hero.
How it differs
Eager loading fetches now. Lazy loading waits until the element is near the viewport. A preload hint goes further by telling the browser about a resource before the parser reaches it. Eager is the default, lazy defers, preload gets ahead of discovery.
Common errors
Lazy loading the LCP image. Eager loading a long list of below-the-fold photos. Assuming eager means priority, when without fetchpriority it competes equally. Putting `loading` on a CSS background image, where it does nothing. Setting eager on ads that are far down the page.
In practice
Open the Network panel on your home page and see which images start in the first 500 ms. Make sure the LCP image is eager and high priority, and everything below the fold is lazy with width and height set.