`<link rel="preload">` fetches a critical asset early (fonts, hero image, above-fold CSS). `preconnect` opens the TCP+TLS handshake to a third-party origin you'll need soon. Both cut perceived load time.
HTML
<!-- Open the TCP+TLS handshake early — useful for fonts, analytics, CDN -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Preload the LCP image and critical font — high priority fetch -->
<link rel="preload" as="image"
href="/hero.webp"
fetchpriority="high">
<link rel="preload" as="font"
type="font/woff2"
href="/fonts/inter-var.woff2"
crossorigin>
<!-- Preload critical CSS that's in a separate file -->
<link rel="preload" as="style" href="/critical.css">
<link rel="stylesheet" href="/critical.css">
<!-- Prefetch a likely-next-page (low priority, idle-time fetch) -->
<link rel="prefetch" href="/dashboard">
<!-- DNS-only resolution (lighter than preconnect) -->
<link rel="dns-prefetch" href="https://api.example.com">
<!-- Lazy/low priority for non-critical above-the-fold images -->
<img src="/banner.jpg" alt="" loading="lazy" fetchpriority="low">Save your own code snippets
Create a free account and build your private vault. Share publicly whenever you want.