Como Pré-Carregar Recursos Críticos para Acelerar o Carregamento do Site
Olá, viajante da web! 👋 Se você já sentiu aquele friozinho no estômago quando o site demora a aparecer no celular ou no computador, saiba que temos um truque simples para deixar seu site mais rápido — e isso não exige mágica, só um pouquinho de atenção. Vamos aprender juntos como pré-carregar (preload) os recursos mais importantes do seu site, como imagens, fontes e arquivos JavaScript que o usuário precisa imediatamente.
Dica Sensei: O pré-carregamento é como entregar o café da manhã ao seu cliente antes mesmo dele pedir. Quem chega primeiro, ganha o coração!
Por que pré-carregar é tão poderoso?
Quando um visitante entra no seu site, o navegador começa a carregar tudo de forma sequencial. Mas se ele precisar de uma imagem principal, um botão de "Comprar agora" ou uma fonte especial logo no início, esperar que o navegador descubra isso só depois de começar a renderizar pode fazer o site parecer lento.
O pré-carregamento diz ao navegador: “Esse arquivo é importante, carregue ele agora, mesmo que ainda não esteja no código”. Assim, quando o usuário chegar na parte do site que o usa, ele já está pronto — como um amigo que já chegou com o pedido na mão.
Passo a passo: Como fazer isso no seu site (com GeHost)
Seu site está hospedado na GeHost? Ótimo! Vamos usar o painel cPanel, que é como o console de controle do seu site. Vamos lá:
- Acesse o painel cPanel
Vá parapainel.gehost.com.bre faça login com suas credenciais. Se não souber, entre em contato com o suporte (lembre-se: temos 30 dias grátis após a entrega). - Abra o Gerenciador de Arquivos
No painel, encontre a seção Arquivos e clique em Gerenciador de Arquivos. Selecione o diretório principal do seu site, geralmentepublic_html. - Localize o arquivo
index.htmlouindex.php
Esse é o arquivo principal do seu site. Clique duas vezes nele para abri-lo no editor de texto embutido. - Adicione o código de pré-carregamento
No topo do arquivo, logo após a tag<head>, insira o seguinte código, ajustando os caminhos para os arquivos que você quer pré-carregar:<head> <link rel="preload" as="image" href="/imagens/capa-principal.jpg" > <link rel="preload" as="font" href="/fontes/roboto.woff2" type="font/woff2" crossorigin > <link rel="preload" as="script" href="/js/interativo.js" > <!-- Mais recursos aqui --> </head>Explicando:
as="image"→ para imagens principais.as="font"→ para fontes customizadas.as="script"→ para arquivos JavaScript essenciais.crossorigin→ necessário para fontes.
- Salve as alterações
Após adicionar o código, clique em Salvar no editor. Pronto! Seu site agora avisará ao navegador o que é importante antes mesmo de pedir.
Quais recursos você deve pré-carregar?
Concentre-se nos arquivos que o visitante vê no primeiro segundo. Alguns exemplos práticos:
- Imagem de capa principal do site.
- Ícones de navegação (como o logo).
- Fontes personalizadas usadas no título ou botões.
- JavaScript que faz o menu abrir ou o formulário funcionar.
- Arquivos CSS que definem o estilo do conteúdo inicial.
Atenção, Sensei: Não pré-carregue tudo! Isso pode sobrecarregar o navegador. Foque apenas nos críticos. Um bom site é rápido, mas não é um “gigante” que pesa.
Verifique o resultado
Depois de fazer as alterações, abra seu site em um navegador moderno (Chrome, Firefox, Edge) e abra as Ferramentas de Desenvolvedor (F12). Vá até a aba Network e recarregue a página. Você verá os arquivos pré-carregados com a marca “(preloaded)” — isso é sinal de que funcionou!
Importante: Dicas de ouro do Sensei
- Use nomes de arquivos curtos e claros para facilitar a identificação.
- Não esqueça de testar em diferentes dispositivos (celular, tablet, desktop).
- Se usar um framework como React, Vue ou WordPress, o pré-carregamento pode ser feito via plugin ou configuração do tema — consulte seu desenvolvedor.
- Se precisar de ajuda, entre em contato com o suporte da GeHost no painel. Estamos aqui para te ajudar — com um sorriso e um café virtual.
Parabéns! Você acelerou seu site com um toque de sabedoria web. Agora, cada visitante vai sentir que chegou em casa — rápido, leve e com alegria. 🚀
Com carinho,
Sensei da GeHost
*Grupo: G e Soluções e Eventos LTDA (CNPJ: 46.647.904/0001-04)*