Como usar Preload e Prefetch para otimizar o carregamento de recursos (Desempenho & CDN)
Olá, amigo(a) GeHost! 👋 Seja bem-vindo(a) ao nosso guia de desempenho web, onde vamos aprender juntos como acelerar seu site com duas ferramentas poderosas: preload e prefetch. Não se preocupe — mesmo que você não seja técnico, comigo você vai entender de forma simples, prática e cheia de carinho. 😊
Imagine seu site como uma casa. Quando alguém chega, você não quer que ele fique esperando na porta, né? Com preload e prefetch, estamos preparando o caminho antes mesmo da visita. É como deixar a porta aberta, o chão limpo e o café pronto — o visitante entra e já se sente em casa!
Dica Sensei: Quanto mais rápido seu site carrega, mais pessoas ficam, mais vendas acontecem e mais feliz você fica. Preload e prefetch são como "superpoderes" para isso!
O que são Preload e Prefetch?
Vamos descomplicar:
- Preload: É como dizer ao navegador: “Olha, esse arquivo é MUITO importante — carregue ele agora, logo que possível!”
- Prefetch: É como dizer: “Quando o visitante for para outra página, já vá carregando esse arquivo em segundo plano, pra ele não esperar.”
É como se o navegador fosse um entregador inteligente: com preload, ele leva o pacote principal logo no começo. Com prefetch, ele já começa a preparar o próximo pedido, mesmo antes de você pedir.
Quando usar cada um?
Veja um exemplo simples:
- Preload → Use para arquivos essenciais do seu site que são críticos para o primeiro carregamento, como:
- Imagens principais (logo, banner principal)
- Fontes personalizadas (tipografia única)
- Arquivos JavaScript ou CSS que aparecem logo no início
- Páginas de contato, FAQ ou produtos
- Arquivos de imagem de próxima página
- Scripts usados em links internos
Dica Sensei: Nunca use preload para tudo! Isso sobrecarrega o navegador. Escolha os top 3 arquivos mais importantes.
Como implementar no seu site (passo a passo)
Seu site está hospedado na GeHost? Ótimo! Vamos usar o Gerenciador de Arquivos do cPanel — é onde você edita os arquivos do seu site. Vamos lá!
- Entre no cPanel — Acesse seu painel de controle com os dados da sua conta.
- Encontre o Gerenciador de Arquivos — No cPanel, clique em “Arquivos” e depois em “Gerenciador de Arquivos”.
- Navegue até o diretório do seu site — Selecione a pasta public_html (ou a pasta do seu site, se estiver em subdomínio).
- Abra o arquivo HTML principal — Clique duas vezes no arquivo index.html (ou o arquivo principal da sua página inicial).
- Adicione os links no
<head>— No código HTML, dentro da tag<head>, adicione os comandos:
<head>
<link rel="preload" as="image" href="/imagens/banner-principal.jpg" >
<link rel="preload" as="font" href="/fontes/roboto.woff2" >
<link rel="prefetch" href="/contato.html" >
<link rel="prefetch" as="image" href="/imagens/produto-2.jpg" >
</head>
Dica Sensei: Troque os nomes dos arquivos e caminhos pelos reais do seu site. Use sempre caminhos relativos (como /imagens/banner.jpg).
Exemplo prático para seu site
Vamos imaginar que seu site é de uma loja de roupas. O que você deve preload?
- Imagem do banner principal → Carrega logo no início.
- Fonte do nome da marca → Torna a identidade visual mais rápida.
E o que você deve prefetch?
- Página de contato → Muitos visitantes vão querer falar com você.
- Imagem do próximo produto → Se o visitante clicar em “próximo”, ele já está carregando.
Importante: não exagere!
Preload e prefetch são ótimos, mas exagerar pode prejudicar o desempenho. O navegador não tem infinita memória. Use com sabedoria:
- Preload: apenas 2 a 3 arquivos essenciais.
- Prefetch: até 5 arquivos, sempre relacionados a links que o visitante provavelmente vai clicar.
Dica Sensei: Teste com ferramentas como PageSpeed Insights — elas mostram se você está usando bem essas técnicas.
Conclusão: seu site mais rápido, mais leve, mais humano
Com preload e prefetch, você está não só acelerando seu site — você está criando uma experiência de usuário incrível. Cada segundo economizado é uma pessoa que fica, um cliente que se sente bem-vindo.
Se precisar de ajuda, o nosso suporte está aqui — e eu, sua Sensei da GeHost, sempre com um sorriso e um conselho. 💚
Até a próxima dica, e lembre-se: um site rápido é um site feliz! 🌟
