O lazy load imagens vídeos adia o carregamento de mídia fora da dobra e acelera a primeira pintura. Segundo a web.dev (2024), 97,5% das imagens com lazy load carregam em até 10 ms ao entrar na viewport em redes 4G. Mal configurado na imagem do LCP, ele atrasa a pintura em até 600 ms. Ative o nativo e ajuste exclusões.

O lazy load imagens vídeos é a técnica de adiar o download de imagens e vídeos até que o usuário role a página perto deles, em vez de baixar tudo no primeiro acesso. No WordPress isso já vem ligado por padrão desde a versão 5.5, mas a configuração nativa é limitada e não cobre vídeos embutidos nem trata o elemento de LCP. Este tutorial mostra como ativar o lazy load imagens vídeos do jeito certo, escolher entre o recurso nativo e um plugin, e evitar o erro mais comum: adiar a imagem que deveria carregar primeiro. Você sai daqui com o ganho medido no relatório de Core Web Vitals.

Primeiros passos: O que o lazy load imagens vídeos resolve

O lazy load imagens vídeos corta o peso do carregamento inicial em sites com muita mídia. Páginas no percentil 90 enviam mais de 5 MB de imagens, segundo o HTTP Archive, e boa parte dela fica fora da dobra; adiar esse download libera a thread principal para pintar o conteúdo visível primeiro.

A tabela abaixo resume as três frentes que o lazy load imagens vídeos ataca numa instalação WordPress típica e o que cada uma valida na prática.

Lazy load nativo do WordPress: Por que ele sozinho não basta

O lazy load nativo do WordPress aplica o atributo loading="lazy" em imagens e iframes desde a versão 5.5, de agosto de 2020, e roda em Chrome 77+, Firefox 75+ e Safari 15.4+. O problema é que ele trata todas as imagens igual: adia até a primeira, que costuma ser o elemento de LCP.

Nos tickets de suporte da FULL, a gente vê esse cenário com frequência em temas que reaproveitam o banner do topo como imagem destacada. O nativo também não aplica facade em vídeos do YouTube nem ajusta a distância de pré-carregamento, fixada pelo navegador em 1.250 px em 4G. Para um controle real de lazy load imagens vídeos, você precisa de uma camada que saiba excluir a dobra e tratar embeds, e é aí que entra o plugin. Veja a medição no nosso guia de tempo de carregamento.

Como ativar lazy load imagens vídeos em 5 passos

Ativar lazy load imagens vídeos com controle leva cerca de 15 minutos e exige um plugin de performance mais um teste no PageSpeed Insights antes e depois. Os cinco passos cobrem desde checar o que o WordPress já faz por padrão até excluir a imagem da dobra, o ajuste que mais protege o LCP. Faça um por vez e valide cada um no DevTools.

Passo 1: Confirme o lazy load nativo já ativo

Abra o código-fonte de uma página com Ctrl+U e procure por loading="lazy" nas tags . Se ele aparece, o WordPress já adia as imagens abaixo da dobra sozinho. Confirme também que o da dobra NÃO tem esse atributo, porque o navegador deve baixá-lo de imediato. Esse diagnóstico de 30 segundos evita que você instale um plugin que duplica o que o core já faz.

Passo 2: Instale um plugin de lazy load com exclusão

Instale o WP Rocket, o Perfmatters ou o a3 Lazy Load para ganhar o controle que o nativo não dá. O recurso decisivo é o campo de exclusão por classe ou URL: ele tira a imagem do LCP do adiamento. Ative a opção de lazy load de imagens e de iframes, salve e limpe o cache antes de medir.

Passo 3: Ative o facade para vídeos do YouTube

Ligue a opção “substituir iframe do YouTube por imagem de pré-visualização” no plugin. Em vez de carregar o player inteiro, com mais de 1 MB de scripts, a página mostra só a thumbnail; o embed real sobe apenas no clique. Em páginas com cinco vídeos, isso costuma cortar dezenas de requests do carregamento inicial.

Passo 4: Exclua a imagem da dobra do lazy load

Adicione a classe ou o nome do arquivo do banner principal no campo de exclusão. Essa é a etapa que separa lazy load imagens vídeos bem feito de lazy load que derruba a nota. A imagem do topo é quase sempre o elemento de LCP, e adiá-la atrasa a pintura do maior elemento da tela.

Passo 5: Meca o antes e depois no PageSpeed

Rode a mesma URL no PageSpeed Insights antes e depois e compare o LCP e o total de bytes transferidos. Procure também o aviso “Adie imagens fora da tela”, que deve sumir. Se o LCP piorou, reveja a exclusão da dobra do passo 4 antes de qualquer outra coisa.

Lazy load de vídeos: Facade, iframe e o peso real do YouTube

O lazy load imagens vídeos no caso de vídeos é diferente do de imagens: o ganho não vem só de adiar, mas de trocar o player pesado por uma facade. Um embed padrão do YouTube carrega mais de 1 MB de JavaScript antes mesmo de o usuário clicar em play, e a facade corta isso.

Com a facade, a página exibe apenas a thumbnail e um botão; o iframe real só sobe no clique. A regra de campo é nunca subir um vídeo direto para a biblioteca de mídia do WordPress, porque o servidor não entrega streaming adaptativo e o arquivo trava em conexões lentas. Hospede no YouTube ou no Vimeo e use facade. Esse cuidado com loading="lazy" em iframes, combinado com carregamento assíncrono de scripts, mantém a thread principal livre para o conteúdo visível.

Quando o lazy load imagens vídeos piora o LCP

O lazy load imagens vídeos piora o LCP sempre que é aplicado à imagem do maior elemento visível, e esse é o erro mais caro do recurso. Num tema que já faz defer, o plugin de lazy load duplica o atributo loading e a mídia da dobra pode demorar mais de 600 ms a mais para pintar em 3G.

A causa é direta: o navegador só decide baixar a imagem adiada depois de calcular o layout, então o maior elemento da tela espera por uma decisão que não deveria existir, e a nota de Core Web Vitals cai junto. Por isso a exclusão da dobra do passo 4 não é opcional. Em páginas onde o primeiro banner é o LCP element, a regra é excluir as 1 ou 2 primeiras imagens do lazy load e deixar só o restante adiado. Confira o impacto no conceito de LCP do glossário.

Plugins de lazy load imagens vídeos: O que cada um prioriza

Os plugins de lazy load imagens vídeos competem em 4 dimensões diferentes, e escolher errado custa nota de performance. O nativo do WordPress compete por zero configuração; o WP Rocket, por controle fino de exclusões, facade e LCP no mesmo painel; o Perfmatters, por leveza com desativador de scripts por página.

O Optimole compete por entregar a imagem já redimensionada via CDN com lazy load embutido. Para a maioria dos sites que chegam ao suporte, a combinação que mais entrega é WP Rocket para o lazy load imagens vídeos somado a uma rotina de otimização de imagens em formato WebP. Tente o nativo primeiro; só troque por plugin quando o PageSpeed pedir mais controle.

Ative o lazy load imagens vídeos com os plugins do bundle FULL

No suporte da FULL a gente vê que o lazy load imagens vídeos raramente resolve sozinho: ele anda junto com cache, WebP e CDN, e licenciar cada plugin avulso sai caro. O plano PRO da FULL custa R$849,90 e inclui WP Rocket, Perfmatters e mais quinze plugins premium ativados em um clique.

Diluído nos dez sites que o plano gerencia, isso dá cerca de R$85 por site, com o WP Rocket que normalmente custaria sozinho mais que isso por instalação. Veja o que está incluso em FULL.services/planos e ative o stack de performance completo sem comprar licença por licença.

Decisao rápida: Nativo, plugin ou CDN

A escolha entre lazy load nativo, plugin ou CDN depende de três variáveis: se a página tem vídeo, se há um banner grande na dobra e o quão pesadas são as imagens. A árvore abaixo cruza esses três sinais e aponta a configuração de lazy load imagens vídeos certa para cada caso, da mais simples à mais completa.

• Se o site é um blog simples sem vídeos → o lazy load nativo do WordPress já basta, não instale plugin.
• Se a página tem banner grande na dobra → use plugin e exclua a imagem do LCP do lazy load.
• Se há vários vídeos do YouTube embutidos → ative facade no WP Rocket ou no Perfmatters.
• Se as imagens são pesadas e em PNG → some lazy load com CDN e conversão para WebP via Optimole.

Perguntas frequentes sobre lazy load imagens vídeos

Próximos passos para acelerar o site

O lazy load imagens vídeos é uma das alavancas mais baratas de performance, mas raramente trabalha sozinho: ele rende mais quando some com cache de página, conversão para WebP e redução de TTFB. Comece pelo recurso nativo, exclua a imagem da dobra e meça no PageSpeed antes de instalar qualquer plugin. Se o site tem vídeos ou banner grande, passe para o WP Rocket ou o Perfmatters e ative a facade. Para seguir otimizando ponta a ponta, o FULL Academy reúne todos os tutoriais de performance em um só lugar. E acompanhe o ganho real no painel de performance WordPress da FULL.

Legenda: o campo de exclusão protege a imagem da dobra do adiamento, preservando o LCP.