Native loading=lazy defers offscreen images and iframes until they approach the viewport. Apply it only below the fold, keep width and height so space is reserved, and never lazy-load the LCP image. Verify in the Network panel that above-the-fold media loads immediately.
The extended brief explains when this works, when it does not, and the trade-offs. Join the waitlist and it unlocks for every tip when sign-in opens; MCP access is the paid part.
Identify images visible at the top of each template. These must load eagerly; everything below the first viewport can be deferred.
Check: Each template has a written list of eager images, including the hero.
Add loading=lazy below the fold
Set loading=lazy on offscreen images and iframes, and keep width and height attributes. Remove JavaScript lazy-load libraries where native support is enough.
Check: The rendered HTML has loading=lazy on below-fold images and no lazy attribute on the hero.
Check load order General best practice
Load the page in the Network panel, confirm hero requests start immediately, then scroll and confirm deferred requests begin.
Check: Hero image request starts before scroll; deferred images do not request until approaching the viewport.
Verify indexing with URL Inspection — URL Inspection shows the indexed version Google holds for one URL: crawl time, selected canonical, status code and blocked resources.
Canonicalize duplicate URLs — Duplicate URLs split signals across protocol, host, slash and parameter variants.
Make JavaScript content crawlable — Google renders JavaScript, but rendering costs time and AI retrieval systems often read raw HTML.