What is Link Prefetch and Preload? | HTML Interview Questions

What You'll Learn

Resource loading hints
Preload vs prefetch
Performance optimization

Resource Hints

Hint	Purpose
`preload`	Critical resources for current page
`prefetch`	Resources for future navigation
`preconnect`	Early connection to origins
`dns-prefetch`	DNS lookup only

Examples

index.htmlHTML

<head>
  <!-- Preload: Critical for current page -->
  <link rel="preload" href="/fonts/main.woff2" as="font" crossorigin>
  <link rel="preload" href="/css/critical.css" as="style">

  <!-- Prefetch: Likely needed for next navigation -->
  <link rel="prefetch" href="/next-page.html">

  <!-- Preconnect: Early connection -->
  <link rel="preconnect" href="https://api.example.com">

  <!-- DNS Prefetch: Just DNS lookup -->
  <link rel="dns-prefetch" href="https://analytics.example.com">
</head>

Best Practices

Use preload for fonts, critical CSS, hero images
Use prefetch for likely next-page resources
Don't over-use - it can waste bandwidth