"Simple" requests skip preflight; non-simple methods, custom headers, or non-simple content-types trigger `OPTIONS`.

Frontend Fundamentals

CORS preflight

<h2>Summary</h2>
<p><strong>Preload</strong> — high-priority fetch for current navigation (fonts, LCP image, critical script). <strong>Prefetch</strong> — low-priority fetch for likely future navigation. <strong>Preconnect</strong> — early DNS+TLS to origin (CDN, API) without fetching a specific resource. Misusing preload competes with LCP; prefetch on wrong routes wastes bandwidth.</p>
<h2>Code example</h2>
<pre><code class="language-html">&lt;link rel="preconnect" href="https://cdn.example.com" crossorigin /&gt;
&lt;link rel="preload" href="/font.woff2" as="font" type="font/woff2" crossorigin /&gt;
&lt;link rel="prefetch" href="/next-page.js" as="script" /&gt;
</code></pre>
<h2>Key points</h2>
<ul>
<li><strong>Preload</strong> — high-priority fetch for current navigation (fonts, LCP image, critical script).</li>
<li><strong>Prefetch</strong> — low-priority fetch for likely future navigation.</li>
<li><strong>Preconnect</strong> — early DNS+TLS to origin (CDN, API) without fetching a specific resource.</li>
<li>Misusing preload competes with LCP; prefetch on wrong routes wastes bandwidth.</li>
</ul>
<h2>Further reading</h2>
<ul>
<li><a href="https://web.dev/articles/preload-critical-assets">Preload critical assets</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload">rel=preload</a></li>
</ul>
<h2>Related concepts</h2>
<ul>
<li><a href="/blogs/level-1-dynamic-import-chunking">Dynamic import chunking</a></li>
<li><a href="/blogs/level-1-cors-preflight">CORS preflight</a></li>
</ul>


**Preload** — high-priority fetch for current navigation (fonts, LCP image, critical script).

Preload vs Prefetch vs Preconnect

`import()` creates async chunks named by bundler (webpack magic comments, Vite rollup output).