Advanced loading techniques
Control what the browser loads, when, and with which priority.
Choosing the right technique
Preload for critical resources, Speculation Rules to speed up the next navigation, lazy loading for offscreen content, defer and async to avoid blocking rendering.
In this section
- PreloadUse rel=preload and preconnect: LCP image, WOFF2 fonts, the as attribute, fetchpriority. Avoid needless preloads.
- Speculation RulesSpeculation Rules: JSON rules for prefetch and prerender, the eagerness setting, Chromium support and caveats.
- Lazy loadingNative lazy loading: loading="lazy" for offscreen images and iframes, exceptions for the LCP image, async decoding.
- defer & asyncDifference between defer, async and type=module for JavaScript, impact on LCP and INP, best uses.