O que é lazy loading?

Lazy loading é uma técnica que adia o carregamento de recursos não críticos até que sejam realmente necessários. Em vez de baixar toda imagem, iframe e vídeo de uma página no momento em que o HTML é interpretado, o navegador espera até que esses elementos estejam prestes a entrar na área visível. Isso significa que o carregamento inicial da página é mais rápido e leve, porque o navegador concentra sua largura de banda no que o visitante vê primeiro.

Como o lazy loading funciona por baixo dos panos

Há duas abordagens principais para implementar lazy loading. A primeira é a abordagem nativa do navegador, que se baseia no atributo HTML loading="lazy". Quando o navegador encontra um elemento com esse atributo, ele adia a busca do recurso até que o elemento atinja uma distância calculada da viewport. Cada navegador determina esse limiar de forma um pouco diferente, mas o objetivo é o mesmo: começar o download pouco antes de o usuário rolar até ele, para que o conteúdo apareça sem solavancos.

A segunda abordagem usa JavaScript, normalmente via API Intersection Observer. Um pequeno script observa a página e detecta quando os elementos placeholders entram na viewport. Quando isso acontece, o script troca o conteúdo pela origem real da imagem ou URL do iframe, disparando o download. Antes da existência da API Intersection Observer, os desenvolvedores dependiam de listeners de eventos de scroll, que eram menos eficientes e podiam causar travamentos em dispositivos mais lentos.

O que pode ser carregado de forma lazy

Lazy loading se aplica a vários tipos de recursos:

• Imagens: o caso de uso mais comum. Toda tag <img> abaixo da dobra é uma boa candidata para lazy loading.


• Iframes: vídeos do YouTube incorporados, Google Maps e outros widgets de terceiros podem ser pesados. Aplicar lazy loading a iframes evita que eles bloqueiem a renderização inicial da página.


• Vídeos: vídeos auto-hospedados com a tag <video> podem usar preload="none" ou lazy loading via JavaScript para adiar o download.


• Imagens de fundo: imagens de fundo CSS carregadas via background-image não podem usar o atributo nativo loading, então requerem soluções em JavaScript ou estruturação cuidadosa do CSS.

Lazy loading nativo do navegador vs. bibliotecas JavaScript

O lazy loading nativo é a opção mais simples. Você adiciona loading="lazy" à sua tag <img> ou <iframe> e o navegador cuida de tudo. Sem JavaScript, sem tamanho de arquivo extra, sem configuração. Funciona em todos os navegadores modernos, incluindo Chrome, Firefox, Safari e Edge.

<img src="photo.jpg" loading="lazy" width="800" height="600" alt="Description" />
<iframe src="https://www.youtube.com/embed/xyz" loading="lazy"></iframe>

Bibliotecas JavaScript como lazysizes, lozad.js ou vanilla-lazyload oferecem mais controle. Elas suportam imagens de fundo, podem adicionar animações de fade-in e permitem personalizar o limiar de carregamento. No entanto, adicionam JavaScript extra à sua página e exigem inicialização adequada. Para a maioria dos sites WordPress, o lazy loading nativo é a melhor escolha pela simplicidade e zero custo de desempenho.

WordPress e lazy loading nativo desde a versão 5.5

O WordPress adiciona automaticamente loading="lazy" a imagens desde a versão 5.5, lançada em agosto de 2020. Isso se aplica a imagens no conteúdo dos posts, imagens destacadas e outras imagens emitidas por funções do núcleo. O WordPress também adiciona loading="lazy" a iframes incorporados ao conteúdo. Desde o WordPress 5.9, a primeira imagem do conteúdo (a que tem mais probabilidade de estar acima da dobra) é automaticamente excluída do lazy loading para não prejudicar pontuações de LCP.

Impacto nas Core Web Vitals e considerações sobre LCP

O lazy loading tem uma relação direta com as Core Web Vitals, particularmente com Largest Contentful Paint (LCP). Quando feito corretamente, o lazy loading melhora o LCP porque o navegador pode priorizar o download do maior elemento visível sem competir por largura de banda com imagens abaixo da dobra. No entanto, se você acidentalmente aplicar lazy loading ao próprio elemento de LCP (geralmente a imagem do herói ou um banner grande acima da dobra), vai piorar o LCP. O navegador esperará para buscar essa imagem até calcular a proximidade da viewport, adicionando atraso desnecessário.

Para imagens que não recebem lazy loading mas são críticas, considere adicionar fetchpriority="high" para dizer ao navegador que priorize o download:

<img src="hero.jpg" fetchpriority="high" width="1200" height="600" alt="Hero banner" />

Quando NÃO aplicar lazy loading

Nem toda imagem deve ter lazy loading. Há exceções claras:

• Imagens de herói: o banner principal ou imagem destacada que aparece imediatamente no carregamento da página nunca deve ter lazy loading.


• Logotipo e imagens de identidade do site: normalmente ficam no cabeçalho e visíveis sem rolagem.


• Primeira imagem de conteúdo visível: qualquer imagem que aparece na viewport inicial deve carregar imediatamente.


• Candidatas a LCP: se uma imagem é o maior elemento visível quando a página é renderizada pela primeira vez, aplicar lazy loading vai prejudicar diretamente sua pontuação de LCP.

Para essas imagens, use loading="eager" (o comportamento padrão) ou adicione explicitamente fetchpriority="high" para que o navegador as baixe o mais rápido possível.

Plugins WordPress para lazy loading

Embora o WordPress já cuide do lazy loading básico nativamente, vários plugins oferecem funcionalidade estendida:

• WP Rocket: inclui lazy loading para imagens, iframes e vídeos como parte de sua suíte mais ampla de otimização de desempenho. Também pode substituir embeds de vídeos do YouTube por uma miniatura leve que só carrega o player real ao clicar.


• Autoptimize: principalmente um plugin de otimização de CSS/JS, mas inclui lazy loading para imagens usando o atributo nativo ou um fallback em JavaScript.


• a3 Lazy Load: um plugin dedicado a lazy loading com controle granular sobre quais elementos recebem lazy loading, incluindo suporte a imagens de fundo e seletores personalizados.


• Perfmatters: um plugin leve de desempenho que inclui lazy loading junto com outras otimizações, como gerenciamento de scripts e limpeza do banco de dados.

Lazy loading e SEO

O crawler do Google (Googlebot) renderiza JavaScript, então consegue ver imagens com lazy loading desde que elas eventualmente carreguem durante a renderização. No entanto, depender de lazy loading via JavaScript significa que o Googlebot precisa executar seus scripts para descobrir essas imagens. O lazy loading nativo com loading="lazy" é mais seguro para SEO porque o atributo src real está presente no HTML desde o início. Os mecanismos de busca conseguem encontrar a URL da imagem sem executar JavaScript. Sempre garanta que suas imagens tenham atributos alt adequados, independentemente do método de lazy loading escolhido.

O que o InspectWP verifica

O InspectWP analisa as imagens da sua página e relata se o atributo loading="lazy" está presente em cada imagem. Isso ajuda você a verificar se o lazy loading está implementado corretamente em todo o seu site WordPress e a identificar imagens que possam estar sem o atributo ou com lazy loading aplicado incorretamente quando deveriam ser carregadas imediatamente.