Como adiar (defer) o JavaScript não essencial para melhorar o CLS imprimir

Como adiar (defer) o JavaScript não essencial para melhorar o CLS

Olá, querido(a) cliente da GeHost! Seja bem-vindo(a) ao seu Sensei do Desempenho — aqui, vamos te ajudar a deixar seu site mais rápido, mais estável e mais agradável para quem navega nele. 🌟

Hoje vamos falar de um assunto super importante para quem quer um site que carregue rápido e não "trema" na tela: o CLS (Cumulative Layout Shift). Esse é um dos fatores do Google que avalia a experiência do usuário — e, quando ele está alto, o seu site pode ficar com uma nota mais baixa nos resultados de busca.

Um dos principais causadores do CLS é o JavaScript que carrega demais — especialmente scripts que alteram o layout do site quando já está carregado. Por exemplo: um anúncio que aparece do nada, um botão que se move, um vídeo que "pula" ao carregar.

A boa notícia? Você pode adiar (defer) esses scripts — ou seja, dizer ao navegador: “Espere um pouco antes de carregar isso”. Assim, o layout fica estável desde o início. É como preparar a mesa antes de servir o prato: tudo no lugar, sem surpresas.

Passo a passo: como adiar o JavaScript não essencial

Este guia é para quem já tem acesso ao painel do cliente da GeHost. Se ainda não tem, basta acessar painel.gehost.com.br com seu login e senha.

1. Acesse o Gerenciador de Arquivos
   No painel, clique em Arquivos e depois em Gerenciador de Arquivos.
   
2. Localize o arquivo principal do site
   No gerenciador, vá até a pasta public_html. É aqui que seu site vive.
   Dentro dela, procure pelo arquivo principal — geralmente é index.html, index.php ou um arquivo com nome semelhante ao seu site.
3. Edite o arquivo
   Clique com o botão direito no arquivo e escolha Editar. Isso abrirá um editor de texto dentro do cPanel.
   

   Dica do Sensei: Antes de editar, faça um backup do arquivo. No painel, vá em Backup e gere um backup completo da sua conta.

4. Encontre os scripts que não são essenciais
   Procure por linhas que pareçam com isso:

   <script src="https://exemplo.com/anuncio.js"></script>

   Ou:

   <script> // código de análise, chat, anúncios, etc. </script>

   Esses são os candidatos ideais para serem adidos (ou seja, carregados mais tarde).

5. Adie o script com defer
   Para cada script que não for essencial para o carregamento inicial, adicione o atributo defer na tag <script>. Exemplo:

   <script src="https://exemplo.com/anuncio.js" defer></script>

   Isso diz ao navegador: “Carregue isso, mas não atrapalhe o layout. Espere até o HTML estar pronto”.

6. Salve as alterações
   Após fazer as alterações, clique em Salvar no editor. O arquivo será atualizado no servidor.
7. Teste o site
   Abra seu site em um navegador novo (ou em modo anônimo) e veja se tudo está funcionando. Verifique se os scripts que adiamos ainda estão ativos (por exemplo, um chat ou contador de visitas).

   Dica do Sensei: Use a ferramenta PageSpeed Insights do Google para testar seu site depois da alteração. Você vai ver uma melhora no CLS!

Quais scripts devem ser adiados?

Não adie tudo! Apenas os scripts que não são necessários para o carregamento inicial da página. Exemplos comuns:

• Scripts de análise (Google Analytics, Facebook Pixel)
• Scripts de anúncios (Google Ads, AdSense)
• Chat ao vivo (ex: Tawk.to, Zendesk)
• Scripts de redes sociais (compartilhamento, curtidas)
• Scripts de carrosséis ou animações complexas

Se não tiver certeza, consulte seu plano no painel ou entre em contato com o suporte — estamos aqui para te ajudar, sempre. 🤝

Importante: o que não fazer

• Não adie scripts que são essenciais para o funcionamento do site (ex: scripts de formulários, navegação, login).
• Não adie scripts que já estão dentro do head sem defer — isso pode causar conflitos.
• Não use async em vez de defer se o script depende de outros — defer é mais seguro para ordem de execução.

Leve do Sensei: Um site rápido não é só sobre velocidade de carregamento. É sobre experiência. Quando o layout não salta, o usuário se sente seguro, confiante e feliz. E isso, no fim das contas, é o que mais importa.

Se precisar de ajuda com a edição de código, do seu plano ou de qualquer outro detalhe, é só chamar o suporte da GeHost. Estamos aqui para você — com carinho, atenção e tecnologia de ponta. 💚

Com carinho,
Seu Sensei da GeHost
— Raphael Neves Koga, dono do Grupo G e Soluções e Eventos LTDA (CNPJ: 46.647.904/0001-04)