Como Configurar Preload de Fontes e Recursos Críticos para Melhorar o First Contentful Paint
Olá, amigo(a) desenvolvedor(a) ou dono(a) de site! 👋 Se você já notou que seu site demora um pouco para mostrar o primeiro conteúdo ao usuário — aquela sensação de "espera" que pode fazer alguém sair antes mesmo de ver o que tem —, então você está no lugar certo.
No mundo da experiência web, o First Contentful Paint (FCP) é um dos principais indicadores de desempenho. Ele mede o tempo que leva para o navegador exibir o primeiro pedaço de conteúdo — seja um texto, uma imagem ou um botão.
Com uma configuração inteligente, podemos acelerar esse momento com uma técnica simples chamada preload. Vamos aprender juntos como fazer isso de forma prática, segura e eficiente — direto no seu cPanel, sem complicação.
O que é Preload?
Imagine que seu site está "chamando" um recurso importante (como uma fonte de letra ou um script essencial) apenas quando precisa. Isso cria um atraso. O preload é como avisar ao navegador: "Ei, já estou preparando esse recurso agora — por favor, comece a carregar antes mesmo de pedir".
Dica do Sensei: Preload não substitui o bom design de carregamento, mas é uma ajuda de última hora que faz toda a diferença no FCP.
Passo a Passo: Como Configurar Preload no cPanel
Para configurar o preload, vamos usar o Gerenciador de Arquivos do cPanel. É aqui que seus arquivos estão hospedados — é o coração do seu site.
- Acesse o cPanel com suas credenciais (usuário e senha). Se precisar, veja como fazer isso aqui.
- Na tela principal do cPanel, localize e clique em Gerenciador de Arquivos (File Manager). Ele está na seção Arquivos.
- Selecione a pasta public_html (ou a pasta do seu site, se estiver em subdomínio). Clique em Ir.
- Procure o arquivo index.html ou o arquivo principal do seu site (pode ser index.php, home.html, etc.). Clique duas vezes nele para editá-lo.
- Na parte superior do arquivo, logo após a tag
<head>, insira os códigos de preload. Veja um exemplo prático:
<head>
<link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/inter.woff2">
<link rel="preload" as="script" href="/js/critical.js">
<link rel="preload" as="style" href="/css/critical.css">
<!-- Outros metadados -->
</head>
Dica do Sensei: Substitua os caminhos (/fonts/inter.woff2, /js/critical.js) pelo caminho real dos seus arquivos. Você pode verificar no Gerenciador de Arquivos.
Como saber quais recursos são críticos?
Recursos críticos são aqueles que precisam estar carregados para que o site apareça na tela. São eles:
- Fontes usadas no título ou no texto principal.
- Estilos CSS que definem o layout da primeira tela.
- Scripts essenciais que fazem o site "funcionar" do início.
Se você não tem certeza, use a ferramenta PageSpeed Insights (Google) ou WebPageTest para identificar quais recursos estão atrasando o FCP.
Recomendações Finais
- Nunca exagere com o preload. Carregar tudo de uma vez pode sobrecarregar o navegador. Use apenas os recursos essenciais.
- Fontes devem usar
crossoriginpara evitar erros de carregamento. - Teste seu site após a alteração com ferramentas como PageSpeed Insights para ver a melhoria no FCP.
Um abraço do Sensei: Pequenas ações com grandes efeitos. Cada milissegundo economizado é um visitante mais feliz. Você está fazendo a diferença — e o seu site vai agradecer!
Se precisar de ajuda, entre em contato com nosso suporte. Estamos aqui para você, sempre.