Como configurar lazy loading de imagens sem plugin no WordPress (sem complicação!)
Olá, querido(a) cliente da GeHost! 👋
Você sabia que imagens pesadas podem deixar seu site lento? Pois é… e isso afeta muito a experiência do seu visitante — e até o Google! 🚀 Mas calma: hoje vamos te ensinar, com carinho e passo a passo, como ativar o lazy loading de imagens sem usar plugins, diretamente no WordPress, usando apenas o painel do cPanel da GeHost. É rápido, seguro e funciona perfeitamente — mesmo se você é novo na área!✨ Dica do Sensei: O lazy loading faz com que as imagens só carreguem quando o visitante rola até elas. Isso reduz o tempo de carregamento inicial do site em até 50%! 🎯
Passo 1: Acesse o cPanel da GeHost
Para começar, faça login no painel do cliente da GeHost:
Se você já tem acesso, clique em Log in e entre com seu usuário e senha.
Passo 2: Abra o Gerenciador de Arquivos
Depois de logado, no painel do cPanel, procure pela ferramenta chamada Gerenciador de Arquivos (File Manager).
Clique nela para abrir o gerenciador.
Passo 3: Localize o arquivo functions.php do tema
No Gerenciador de Arquivos, vá até a pasta:
- public_html
- Dentro dela, procure pela pasta do seu tema. Geralmente é algo como twentytwentyfour, generatepress, ou custom-theme.
Abra essa pasta e procure por um arquivo chamado functions.php.
⚠️ Cuidado: Nunca edite arquivos do WordPress sem saber o que está fazendo. Faça backup antes! (Você pode fazer isso no painel > Backup).
Passo 4: Edite o arquivo functions.php
Clique com o botão direito no arquivo functions.php e escolha a opção Editar.
Isso abrirá um editor de texto dentro do cPanel. Não feche a aba!
Passo 5: Adicione o código de lazy loading
No final do arquivo functions.php, antes do fechamento de PHP (ou seja, antes de `?>`), cole o seguinte código:
add_filter('wp_get_attachment_image_attributes', 'lazy_load_images', 10, 3);
function lazy_load_images($attr, $attachment, $size) {
// Adiciona o atributo loading="lazy" apenas para imagens que não são inline
if (!isset($attr['loading'])) {
$attr['loading'] = 'lazy';
}
return $attr;
}
💡 Dica do Sensei: Esse código é leve, seguro e funciona em todos os navegadores modernos. Ele ativa o lazy loading automaticamente em todas as imagens do seu site!
Passo 6: Salve as alterações
Após colar o código, clique em Salvar (ou Salvar Arquivo) no canto superior direito do editor.
Seu site já está com lazy loading ativado!
Passo 7: Teste o resultado
Abra seu site em um navegador (como Chrome) e abra as Ferramentas de Desenvolvedor (F12).
Vá até a aba Network, recarregue a página e veja as imagens. Você verá que elas só carregam quando rola para baixo — é o lazy loading funcionando! 🎉
Conclusão: Você é um herói do desempenho!
Parabéns! Você acabou de melhorar o desempenho do seu site sem instalar plugins, sem gastar mais e sem precisar de ajuda técnica.
Com esse simples ajuste, seu site carrega mais rápido, seu visitante fica mais feliz, e o Google também te recompensa com melhor posicionamento. 🌟
Se precisar de ajuda, lembre-se: a GeHost está aqui para você. Basta entrar em contato com nosso suporte — e lembre-se: 30 dias grátis de suporte após a entrega estão sempre disponíveis no painel.
Até a próxima dica, com carinho,
Sensei da GeHost 🌿