¿Cómo podemos ayudar al navegador a prepararse para cargar recursos?

Utilizar directivas de precarga: preconnect, dns-prefetch, preload, prefetch, prerender.

Directiva	Descripción	Ejemplo
preconnect	Establece una conexión (búsqueda DNS, apretón de manos TCP, negociación TLS) con otra fuente de datos por adelantado.	<link rel="preconnect" href="https://cdn.example.com">
dns-prefetch	Realiza la resolución del nombre de dominio por adelantado.	<link rel="dns-prefetch" href="//api.example.com">
preload	Solicita recursos (JS, CSS, fuentes) con alta prioridad por adelantado, sin bloquear el renderizado.	<link rel="preload" href="/styles.css" as="style">
prefetch	Solicita recursos que probablemente serán necesarios en el futuro (por ejemplo, en la próxima página).	<link rel="prefetch" href="/next_page.html">
prerender	Renderiza la siguiente página en una pestaña oculta por adelantado.	<link rel="prerender" href="/upcoming_page.html">

Usar el atributo async o defer en la etiqueta <script> para cargar y ejecutar scripts de forma asíncrona, sin bloquear el análisis del HTML:

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

Usar el atributo loading="lazy" para imágenes y <iframe> para su carga diferida cuando entran en el área visible:

<img src="image.jpg" loading="lazy" alt="Imagen cargada perezosamente">

Optimizar imágenes (comprimir, usar formatos modernos como WebP), fuentes (subconjuntos, formatos WOFF/WOFF2) y otros recursos.

Minimizar y comprimir CSS, JavaScript y HTML.

Usar Service Worker para cachear recursos y garantizar acceso sin conexión.

Dividir el código JavaScript grande en partes más pequeñas (code splitting) y cargarlas bajo demanda.

Usar HTTP/2 y HTTP/3 para una multiplexación más eficiente y compresión de encabezados.

Establecer encabezados de caché adecuados (Cache-Control, Expires) en el servidor.

Usar <link rel="modulepreload"> para precargar módulos JavaScript ES.

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