# Lazy load imagens videos: Ative em 5 passos no WordPress O lazy load imagens videos 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 videos é 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 videos 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 videos resolve O lazy load imagens videos 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 videos ataca numa instalação WordPress típica e o que cada uma valida na prática.
Lazy load imagens videos: frente, objetivo e check de validacao
Frente Objetivo Check de validacao
Imagens abaixo da dobra Adiar download ate a rolagem chegar perto Network do DevTools mostra request so ao rolar
Iframes de video Trocar embed pesado por facade leve YouTube carrega so apos o clique no play
Imagem do LCP Excluir do lazy load para pintar primeiro PageSpeed não acusa lazy no elemento LCP
--- ## 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 , 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 videos, 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 videos em 5 passos Ativar lazy load imagens videos 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 ja 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 exclusao 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 videos 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 videos 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 videos: Facade, iframe e o peso real do YouTube O lazy load imagens videos 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 videos piora o LCP O lazy load imagens videos 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 videos: O que cada um prioriza Os plugins de lazy load imagens videos 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 videos 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 videos com os plugins do bundle FULL No suporte da FULL a gente vê que o lazy load imagens videos 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 videos certa para cada caso, da mais simples à mais completa. --- ---

Perguntas frequentes sobre lazy load imagens videos

Por que o lazy load as vezes piora o LCP da página?

Porque ele adia a imagem que deveria pintar primeiro. Quando o lazy load é aplicado ao banner da dobra, que costuma ser o elemento de LCP, o navegador só baixa essa imagem depois de calcular o layout, atrasando a maior pintura em até 600 ms em 3G. A correção é excluir as 1 ou 2 primeiras imagens do adiamento e deixar só o restante com lazy load ativo.

E possível ativar lazy load de imagens e videos sem instalar plugin?

Sim, para imagens. O WordPress aplica `loading="lazy"` em `` e iframes automaticamente desde a versão 5.5, sem nenhum plugin. O que o nativo não faz é a facade de vídeo nem a exclusão da imagem da dobra. Para um blog simples sem vídeos pesados, o recurso nativo já entrega a maior parte do ganho; o plugin só vale quando você precisa de controle sobre o LCP ou de player adiado.

Qual a diferenca entre o lazy load nativo do WordPress e o de um plugin?

O nativo aplica `loading="lazy"` em tudo, sem exceção, e não trata vídeo. Um plugin como o WP Rocket adiciona campo de exclusão por classe, facade de iframe do YouTube e ajuste do elemento de LCP no mesmo painel. Na prática, o nativo resolve o básico de imagens em 80% dos blogs; o plugin existe para os 20% com banner na dobra, vídeos embutidos ou nota de Core Web Vitals exigente.

Quanto o lazy load economiza de dados no carregamento inicial?

Depende de quanta mídia fica fora da dobra, mas o potencial é alto. Páginas no percentil 90 enviam mais de 5 MB de imagens, segundo o HTTP Archive, e numa página longa boa parte está abaixo da primeira tela. Adiar esse download economiza vários MB no primeiro acesso. Em redes 4G, 97,5% das imagens adiadas ainda carregam em até 10 ms ao entrar na viewport, então o usuário quase não percebe o atraso.

O que e facade no lazy load de videos do YouTube?

Facade é a troca do player completo do YouTube por uma imagem de pré-visualização clicável, e é a opção certa para vídeo. Em vez de carregar mais de 1 MB de scripts do embed, a página mostra só a thumbnail; o iframe real sobe apenas no clique. A recomendação prática é ativar facade no WP Rocket ou no Perfmatters sempre que houver vídeo embutido, porque o `loading="lazy"` sozinho no iframe não evita o peso do player. Em páginas com vários vídeos, a facade corta dezenas de requests.

--- ## Próximos passos para acelerar o site O lazy load imagens videos é 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 exclusao protege a imagem da dobra do adiamento, preservando o LCP.