Prefetch/Preload/Preconnect

28.3.2026
index.html Raw #

<!--
https://medium.com/@TusharKanjariya/four-lines-in-head-changed-my-site-speed-449bfeb396a2
-->


<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My App</title>

  <!-- Step 1: Warm up third-party connections first -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="dns-prefetch" href="https://analytics.myapp.com">

  <!-- Step 2: Preload critical current-page assets -->
  <link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="/images/hero.webp" as="image">

  <!-- Step 3: Load stylesheets -->
  <link rel="stylesheet" href="/styles/main.css">
  <link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">

  <!-- Step 4: Prefetch likely next pages (background, no urgency) -->
  <link rel="prefetch" href="/dashboard/bundle.js">
</head>