Como podemos ajudar o navegador a preparar-se para carregar recursos?

Utilizar diretivas de pré-carregamento: preconnect, dns-prefetch, preload, prefetch, prerender.

Diretiva	Descrição	Exemplo
preconnect	Estabelece uma conexão (consulta DNS, handshake TCP, negociação TLS) com outra fonte de dados antecipadamente.	<link rel="preconnect" href="https://cdn.example.com">
dns-prefetch	Executa a resolução do nome de domínio antecipadamente.	<link rel="dns-prefetch" href="//api.example.com">
preload	Solicita recursos (JS, CSS, fontes) com alta prioridade antecipadamente, sem bloquear a renderização.	<link rel="preload" href="/styles.css" as="style">
prefetch	Solicita recursos que provavelmente serão necessários no futuro (por exemplo, na próxima página).	<link rel="prefetch" href="/next_page.html">
prerender	Renderiza a próxima página em uma aba oculta antecipadamente.	<link rel="prerender" href="/upcoming_page.html">

Usar o atributo async ou defer na tag <script> para carregar e executar scripts de forma assíncrona, sem bloquear a análise do HTML:

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

Usar o atributo loading="lazy" para imagens e <iframe> para seu carregamento diferido quando entrarem na área visível:

<img src="image.jpg" loading="lazy" alt="Imagem carregada preguiçosamente">

Optimizar imagens (comprimir, usar formatos modernos como WebP), fontes (subconjuntos, formatos WOFF/WOFF2) e outros recursos.

Minificar e comprimir CSS, JavaScript e HTML.

Usar Service Worker para cachear recursos e garantir acesso offline.

Dividir o código JavaScript grande em partes menores (code splitting) e carregá-las sob demanda.

Usar HTTP/2 e HTTP/3 para uma multiplexação mais eficiente e compressão de cabeçalhos.

Configurar os cabeçalhos de cache corretos (Cache-Control, Expires) no servidor.

Usar <link rel="modulepreload"> para pré-carregar módulos JavaScript ES.

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