Como Fazer o Pré-Carregamento (Preload) de Fontes e Imagens Críticas do Site
Olá, querido(a) cliente da GeHost! Seja bem-vindo(a) ao seu guia de desempenho e otimização com um toque de senso de cuidado — porque seu site merece ser rápido, bonito e leve, como um bom café da manhã.
Hoje vamos aprender como pré-carregar (preload) fontes e imagens essenciais do seu site. Isso significa que o navegador já começa a carregar esses arquivos antes mesmo de precisar deles — como se fosse um ataque de super-herói: "Já estou aqui, antes mesmo de você pedir!"
Com esse pequeno truque, seu site ganha velocidade, melhora a experiência do usuário e até ajuda no SEO. E o melhor? É algo que você mesmo pode fazer — com um toque de atenção e um pouquinho de código.
O que são fontes e imagens críticas?
Imagine que seu site tem uma imagem de destaque na home — tipo um banner com o nome da sua marca, ou uma fonte customizada que dá personalidade ao seu design.
Esses elementos são críticos porque:
- Se não carregarem rápido, o usuário vê o site "vazio" ou com texto estranho.
- Eles aparecem logo no início da página — então precisam estar prontos antes de tudo.
Passo a passo: Como pré-carregar fontes e imagens
Para fazer isso, vamos usar um recurso do HTML chamado rel="preload". Ele é como um "pedido antecipado" ao navegador: "Ei, já vai precisar disso? Então comece a baixar agora!"
1. Acesse o Gerenciador de Arquivos do cPanel
Primeiro, faça login no painel do cliente da GeHost: painel.gehost.com.br
Depois, acesse o cPanel do seu domínio e clique em Gerenciador de Arquivos.
2. Localize o arquivo de cabeçalho (header)
Normalmente, o arquivo que controla o cabeçalho do seu site é chamado de header.php ou header.html, dependendo do sistema que você usa (WordPress, HTML puro, etc.).
Ele está dentro da pasta principal do seu site, geralmente em public_html ou em uma subpasta como wp-content/themes/seu-tema.
Use o Gerenciador de Arquivos para navegar até o local correto.
3. Abra o arquivo no editor de texto
Após localizar o arquivo (ex: header.php), clique com o botão direito e escolha Editar ou Code Edit.
Evite usar editores externos — o cPanel tem um editor integrado e seguro.
4. Adicione o código de pré-carregamento
Procure pela tag <head> no início do arquivo. É lá que você vai colocar o código de preload.
Insira as linhas abaixo dentro da tag <head>, antes de fechar com </head>:
Para imagens críticas:
<link rel="preload" as="image" href="/caminho/da/imagem.jpg" >Para fontes customizadas:
<link rel="preload" as="font" type="font/woff2" crossorigin href="/caminho/da/fonte.woff2" >
Exemplo prático:
<link rel="preload" as="image" href="/imagens/banner-home.jpg" > <link rel="preload" as="font" type="font/woff2" crossorigin href="/fontes/roboto-regular.woff2" >
Dica: Substitua os caminhos pelo real do seu site. Se a imagem está em public_html/imagens/banner-home.jpg, o caminho no href é /imagens/banner-home.jpg.
5. Salve as alterações
Após colar o código, clique em Salvar ou Salvar Arquivo.
Pronto! Seu site já está "preparado" para carregar esses elementos mais rápido.
Dicas importantes para não errar
- Não use caminhos errados: Verifique se o caminho da imagem ou fonte está correto. Um erro aqui pode fazer o preload falhar.
- Use apenas arquivos essenciais: Não pré-carregue tudo — só o que realmente importa no início da página.
- Evite duplicatas: Não coloque o mesmo preload duas vezes. Isso não atrapalha, mas é desnecessário.
- Teste depois: Acesse seu site em um navegador novo (modo anônimo) e veja se as imagens e fontes carregam sem erros.
Quer mais velocidade? Vamos além!
Se quiser ir mais fundo, você pode combinar o preload com outras técnicas como:
- Lazy loading para imagens secundárias.
- Compactação de imagens (use ferramentas como TinyPNG).
- CDN — a GeHost já oferece suporte a CDN para acelerar o carregamento global.
Se precisar de ajuda com qualquer um desses, é só pedir no suporte — estamos aqui para cuidar do seu site com carinho.
Conclusão
Preload é um pequeno truque com grande impacto. Ele transforma o carregamento do seu site de "espera" para "surpresa feliz" — o usuário vê tudo pronto antes mesmo de perceber.
É só um passo, mas ele faz toda a diferença. E você, com um toque de atenção, já está no caminho do sucesso digital.
Se tiver dúvidas, não hesite: o suporte da GeHost está pronto para te ajudar — e sempre com um sorriso no coração.
Com carinho,
Sensei da GeHost
*Equipe de Suporte & Otimização | G e Soluções e Eventos LTDA (CNPJ: 46.647.904/0001-04)*