Como configurar lazy loading de imagens para acelerar o carregamento inicial do site

Como configurar lazy loading de imagens para acelerar o carregamento inicial do site

Olá, querido(a) cliente da GeHost! 🌟

Se você já notou que seu site demora um pouco para carregar no início, especialmente quando tem muitas imagens, temos uma boa notícia: há uma técnica simples e poderosa que pode deixar seu site muito mais rápido — e ela se chama lazy loading.

Imagine um site como um livro. Em vez de carregar todas as páginas de uma vez, o leitor só vê a primeira página enquanto desliza as outras. O lazy loading faz exatamente isso com as imagens: elas só são carregadas quando o visitante as está prestes a ver — ou seja, quando rola a página até elas.

Com isso, o site carrega mais rápido, economiza tráfego e melhora a experiência do usuário. E melhor ainda: é fácil de configurar — mesmo que você não seja técnico!

Passo a passo: como ativar o lazy loading no seu site (via código)

Como a GeHost não tem uma opção "clique aqui e pronto" no painel para ativar o lazy loading, vamos fazer isso diretamente no código do seu site. Mas não se preocupe — é bem simples.

1. Abra o arquivo de configuração do seu tema (geralmente chamado de functions.php ou header.php). Você pode acessar esses arquivos pelo painel do cliente → Arquivos → Gerenciador de Arquivos.
2. Localize o arquivo que contém o código do seu site. Se você usa WordPress, o mais comum é editar o functions.php do tema ativo. Se não tiver certeza, consulte o suporte da GeHost ou o manual do seu CMS.
3. Adicione este código no final do arquivo (antes do fechamento de PHP, se houver):

```php add_filter('wp_get_attachment_image_attributes', function($attr) { $attr['loading'] = 'lazy'; return $attr; }); ```

4. Salve as alterações no arquivo. No Gerenciador de Arquivos, clique em Salvar ou Atualizar.
5. Teste o site em um navegador (recomendamos Chrome ou Firefox). Abra o inspetor de elementos (F12) e verifique se as imagens têm o atributo loading="lazy" no código HTML.

Pronto! Agora, cada imagem do seu site só será carregada quando o visitante rolar até ela. Isso reduz o tempo de carregamento inicial e deixa tudo mais leve.

Dica da Sensei (GeHost):

Se você não tem certeza de onde está o arquivo ou como editar o código, não se preocupe. O suporte da GeHost está aqui para te ajudar — e é grátis nos primeiros 30 dias após a entrega do seu plano. É só entrar em contato pelo painel do cliente!

💡 Curiosidade: O atributo loading="lazy" é suportado por todos os navegadores modernos — incluindo Chrome, Firefox, Safari e Edge. Então, seu site ficará mais rápido para todos!

Importante: o que não fazer

• Não instale plugins ou extensões que prometem "acelerar tudo com um clique" — muitos deles podem causar conflitos.
• Não edite arquivos sem fazer backup. Se precisar, use o Backup no painel do cliente para salvar uma cópia antes de mudanças.
• Nunca edite arquivos do sistema do cPanel ou do WordPress sem saber o que está fazendo. A GeHost não oferece suporte para alterações que possam afetar a estabilidade do sistema.

Se precisar de ajuda com o código ou com o painel, é só chamar o suporte. Nós estamos aqui para te ajudar com carinho — como um amigo, mas com mais conhecimento. 😊

Com carinho,
Sensei da GeHost
Grupo: G e Soluções e Eventos LTDA (CNPJ: 46.647.904/0001-04)