Definir o pré-carregamento e a pré-busca num sítio Web

O pré-carregamento e a pré-busca são técnicas que utilizas para tornar um sítio Web mais rápido e mais fluido. Ao pré-carregar determinados recursos (mesmo antes de o utilizador precisar deles), reduz o tempo de carregamento de componentes cruciais. Neste artigo, explico-te qual é a diferença, quando os deves utilizar e como os deves configurar tecnicamente.

Qual é a diferença?

Pré-carga

Dizes ao browser: “Por favor, carrega este ficheiro o mais depressa possível, é importante”.

Normalmente utilizado para: tipos de letra, imagens importantes, CSS ou JS que são necessários imediatamente.

Busca prévia

Dizes ao browser: “Este recurso pode vir a ser útil mais tarde, carrega-o já em segundo plano”.

Normalmente utilizado para: páginas seguintes, scripts externos, chamadas de API.

1. Definir a pré-carga

O pré-carregamento é adicionado em do teu HTML. Especificas o que estás a carregar e que tipo de ficheiro é.

Exemplo: pré-carregar tipos de letra

Exemplo: CSS crítico

Certifica-te de que definiste corretamente, caso contrário o browser ignorará o pré-carregamento.

2. Definir a pré-busca

A pré-busca funciona especialmente bem para recursos que provavelmente serão necessários, mas não imediatamente. Pensa num link para uma página seguinte ou num script que só será carregado mais tarde.

Exemplo: uma página pré-busca

Ou com estruturas como Next.js:

Muitas estruturas suportam a pré-busca automática de rotas internas (roteamento do lado do cliente). Mas a pré-busca manual também pode ser útil para APIs externas ou scripts de terceiros.

3. Também útil: dns-prefetch e preconnect

Para fontes externas (como CDNs ou scripts externos), é inteligente configurar a resolução de DNS e as ligações antecipadamente.

Exemplo: Google Fonts

Explica-te:

• dns-prefetch: resolve o domínio antes de ser utilizado
• preconnect: já estabelece a ligação (TCP handshake, TLS), mais rápido do que dns-prefetch

Utiliza-o apenas para domínios que realmente utilizas – caso contrário, perderás desempenho.

4. Testes e validação

Certifica-te de que defines o pré-carregamento e a pré-busca corretamente. Uma implementação incorrecta pode causar atrasos.

Ferramentas:

• WebPageTest: verifica se o pré-carregamento funciona como pretendido
• Lighthouse: dá recomendações de pré-carregamento
• Devtools do navegador (separador Rede): vê se um ficheiro já foi carregado antes?

Melhores práticas

• Utiliza o pré-carregamento apenas para recursos críticos – caso contrário, abrandas os outros recursos
• Combina o pré-carregamento com uma alternativa (por exemplo,
• Coloca a pré-conexão apenas no que realmente precisas
• Testa o tempo de carregamento antes e depois da implementação

Em conclusão

O pré-carregamento e a pré-busca são técnicas relativamente simples para tornar um site mais rápido e suave. Especialmente para sítios Web com muitos meios de comunicação, tipos de letra ou componentes JS, podes obter ganhos visíveis com estas técnicas – se aplicadas corretamente.