How can we help the browser prepare to load resources?

Use preload directives: preconnect, dns-prefetch, preload, prefetch, prerender.

Directive	Description	Example
preconnect	Establishes a connection (DNS lookup, TCP handshake, TLS negotiation) with another data source in advance.	<link rel="preconnect" href="https://cdn.example.com">
dns-prefetch	Resolves the domain name in advance.	<link rel="dns-prefetch" href="//api.example.com">
preload	Requests a resource (JS, CSS, fonts) with high priority in advance, without blocking rendering.	<link rel="preload" href="/styles.css" as="style">
prefetch	Requests a resource that is likely to be needed in the future (e.g., on the next page).	<link rel="prefetch" href="/next_page.html">
prerender	Renders the next page in a hidden tab in advance.	<link rel="prerender" href="/upcoming_page.html">

Use the async or defer attribute for <script> tags for asynchronous loading and execution of scripts, without blocking HTML parsing:

<script src="script.js" async></script>
<script src="another-script.js" defer></script>

Use the loading="lazy" attribute for images and <iframe> for deferred loading when they enter the viewport:

<img src="image.jpg" loading="lazy" alt="Lazy loaded image">

Optimize images (compress, use modern formats like WebP), fonts (subsets, WOFF/WOFF2 formats), and other resources.

Minify and compress CSS, JavaScript, and HTML.

Use Service Worker for resource caching and offline access.

Split large JavaScript code into smaller parts (code splitting) and load them on demand.

Use HTTP/2 and HTTP/3 for more efficient multiplexing and header compression.

Set proper caching headers (Cache-Control, Expires) on the server.

Use <link rel="modulepreload"> for preloading JavaScript ES modules.

<link rel="modulepreload" href="/dist/module.js">