What is preloading, prefetching, and preconnecting?

Resource hints tell the browser to fetch resources in advance. preload: high-priority fetch for resources needed for the current page. Doesn't execute the resource — just downloads it. <link rel="preload" href="hero.jpg" as="image">. Use for: LCP image, critical fonts, above-the-fold CSS. Overuse causes bandwidth contention — only preload truly critical resources. prefetch: low-priority fetch for resources that might be needed for the next navigation. Fetched when the browser is idle. <link rel="prefetch" href="/dashboard.js">. Use for: JS bundles for the likely next page, heavy components. preconnect: establishes a TCP/TLS connection to a third-party origin in advance — DNS lookup + TCP + TLS handshake. <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>. Use for: CDN, API server, font provider. Saves 100-200ms per connection. dns-prefetch: only DNS lookup (lighter than preconnect). modulepreload: like preload but for ES modules — also parses and compiles. Order of priority: preload > prefetch. Don't overuse — too many preloads compete for bandwidth.