Loading Strategies & Resource Hints

15 min read

lazy loadingpreloadprefetchpreconnectdns-prefetchasyncdefer

Loading Strategies: Controlling When Resources Load

Script Loading

Attribute	Download	Execute	Order
None	Blocks parsing	Immediately	In order
async	Parallel	When ready	Random
defer	Parallel	After HTML parsed	In order
type=module	Parallel	After HTML parsed	In order (deferred by default)

Resource Hints

preconnect: Establishes early connection (DNS + TCP + TLS)
dns-prefetch: Resolves DNS only (cheaper than preconnect)
preload: Fetches a resource needed for current page (high priority)
prefetch: Fetches a resource needed for next navigation (low priority)
prerender: Renders entire next page in background (Chrome)

Lazy Loading

loading="lazy" on img and iframe defers loading until the element is near the viewport. The browser handles all the IntersectionObserver logic natively.

Loading Strategies: Controlling When Resources Load

Script Loading

Attribute	Download	Execute	Order
None	Blocks parsing	Immediately	In order
async	Parallel	When ready	Random
defer	Parallel	After HTML parsed	In order
type=module	Parallel	After HTML parsed	In order (deferred by default)

Resource Hints

preconnect: Establishes early connection (DNS + TCP + TLS)
dns-prefetch: Resolves DNS only (cheaper than preconnect)
preload: Fetches a resource needed for current page (high priority)
prefetch: Fetches a resource needed for next navigation (low priority)
prerender: Renders entire next page in background (Chrome)

Lazy Loading

loading="lazy" on img and iframe defers loading until the element is near the viewport. The browser handles all the IntersectionObserver logic natively.