Lazy Load no WordPress

Lazy Load

Compartilhe:

Facebook
Pinterest
Conteúdo

Lazy load (ou lazy loading), para imagens, passou a ser uma prática necessária para sites ou lojas virtuais que procuram melhorar o desempenho.

Esta técnica é uma das formas de melhorar as métricas do Core Web Vitals.

Além disso, é uma recomendação do Google Lighthouse. Sendo considerada uma boa prática de desenvolvimento.

O que é lazy load?

Podemos traduzir livremente, “lazy load” por “carregamento preguiçoso” ou “carregamento lento” de imagens.

Ao contrário do que o nome sugere, este recurso permite aumentar a velocidade do site, durante o seu carregamento.

Primeiramente, vamos entender como funciona o carregamento normal das imagens, sem lazy load.

Como funciona o carregamento sem lazy load?

Por padrão, quando acessamos um site, todas as imagens presentes na página, são baixadas pelo navegador.

Isso ocorre, mesmo com imagens que não são visíveis sem a rolagem da página, pois estão na parte inferior.

Por exemplo, se em uma página tem 20 imagens, todas elas serão baixadas durante o acesso.

Porém, a grande maioria delas estão na parte abaixo da página, não estão visível “acima da dobra”, (na tela visível, sem rolar a página).

Veja este exemplo:

Carregamento Preguiçoso

Esta página tem um total de 20 imagens, mas na tela visível, sem rolar a página, só tem uma única.

Ou seja, somente uma é prioritária para a visualização do conteúdo, quando o site é acessado.

Mas, sem o carregamento preguiçoso, todas as 20 são carregadas, durante o acesso, mesmo que não apareça na tela.

Como funciona o carregamento com lazy load?

As imagens carregam quando realmente são necessárias.

Quando uma página é acessada, primeiramente, são baixadas somente as que estão acima da dobra (na tela de visualização sem rolagem de página).

Imagens Acima da Dobra Lazy Load

Neste outro exemplo acima, somente duas imagens são prioritárias para a visualização do conteúdo: 1) a logomarca e 2) a do lado esquerdo.

Todas as demais, que estão abaixo da tela de visualização inicial, não são prioritárias para visualizar o conteúdo.

Assim, com o lazy load, as demais (não prioritárias), não são carregadas até que se role a página.

Em outras palavras, elas carregam gradualmente, conforme a rolagem da página.

Elas carregam na medida em que são necessárias para a visualização do conteúdo.

Na última parte eu vou fornecer um exemplo visual para o melhor entendimento.

Definição de lazy load

Considerando a explicação acima, podemos definir lazy load como: “adiar imagens que estão fora da tela de visualização, antes da rolagem da página”.

Ou, em outras palavras, adiar imagens que estão abaixo da dobra da tela.

Por que o lazy load é importante?

Existem alguns motivos, mas o principal está ligado à melhoria da velocidade do site.

Principalmente em dispositivos móveis torna-se uma técnica bastante importante para a melhoria do carregamento.

Mas, também não podemos esquecer de otimizar imagens em nossos websites e lojas virtuais.

Os dois recursos utilizados em conjuntos, permitem melhorias mais efetivas.

É uma recomendação do Google

A recomendação do Google é a seguinte: “adiar imagens fora da tela”.

E a forma que temos para cumprir essa recomendação é utilizar o lazy load.

Muitas solicitações geram lentidão

Quando acessamos um site muitos arquivos são carregados para o perfeito funcionamento.

São carregados arquivos CSS, Java Script, imagens, fontes etc. Podemos chamar cada um desses arquivos de “requisição”.

Quanto mais forem as requisições, mas exigirá recursos do seu servidor, e isso é um dos fatores que tornam os sites lentos durante o carregamento.

Nesse sentido, vamos comparar duas situações:

Requisições sem Lazy Load

Requisições

Os dois gráficos, mostram as requisições de uma mesma página de um site, sem e com lazy load.

Assim, no primeiro gráfico (sem lazy load), podemos verificar que foram 47 requisições de arquivos de imagens.

Porém, com lazy load funcionando, foram apenas 6 requisições de arquivos.

Melhora o desempenho do LCP

O lazy load, traz melhoria para a métrica de velocidade de carregamento do Core Web Vitals.

O LCP, mede o aparecimento do conteúdo mais importante na tela.

Conforme pode ser visualizado abaixo, com a implementação do carregamento lento, temos uma melhora expressiva neste importante indicador de velocidade do site Desempenho

Lazy load no WordPress

A versão 5.5 do WordPress, implementou nativamente este recurso.

Ou seja, dessa versão em diante, o carregamento lento das imagens é realizado por padrão.

Em tese, não é mais necessário utilizar um plugin para implementar o lazy load.

Além disso, não é necessária nenhuma ação, pois o recurso já vem implementado no WordPress.

Sem dúvida é uma grande melhoria realizada, mas vamos entender um pouco sobre esse recurso nativo e suas limitações.

Uma limitação do lazy load nativo do WordPress

Eu realizei um teste em uma página com 47 imagens, com o mesmo número de requisições dos arquivos.

Com o recurso nativo do lazy load ativado, somente 23 delas foram solicitadas inicialmente, uma redução significativa na quantidade de imagens carregadas na abertura da página.

Porém, em ferramentas de testes como PageSpeed Insights e GTmetrix, você ainda poderá ver a recomendação para “adiar imagens fora da tela”.

Adie Imagens fora da Tela

Isso ocorre porque há uma limitação neste recurso nativo do WordPress e nem todas as imagens fora da tela são realmente adiadas.

Não vou entrar nos detalhes técnicos deste recurso, mas você pode consultar este artigo.

Todavia, existem imagens que não são adiadas, devido serem excluídas propositalmente para a melhor compatibilidade.

Limitação geral dos plugins para Lazy Load

Da mesma forma, que o recurso nativo do WordPress, os plugins existentes também têm lista de imagens que não são adiadas para a compatibilidade.

Dessa forma, pode existir exclusões diferentes de um plugin para outro.

Mas, devo utilizar um plugin do WordPress?

Este tema pode causar dúvida, então vou procurar esclarecer melhor.

De um lado, já existe o recurso para adiar imagens fora da tela, nativamente no WordPress.

Por outro lado, no meu teste, 23 imagens não foram adiadas com o recurso nativo.

Com certeza, muitas dessas 23 não eram absolutamente importantes para o conteúdo acima da dobra (tela visível sem rolagem).

Assim, uma situação mais perfeita, seria ter menos imagens carregadas inicialmente.

Além disso, conforme mostrei, eu ainda recebi a recomendação do GTmetrix de adiar as que estão fora da tela.

Eu também realizei testes com outros plugins para lazy load.

O resultado foi o seguinte: somente 6 imagens não foram adiadas, ou seja, os plugins para esta finalidade, adiam mais imagens que o recurso nativo do WordPress.

Então, a resposta para a pergunta inicial é: sim, é melhor utilizar um plugin.

Pois a quantidade de imagens adiadas é maior, o que permite melhorar ainda mais o desempenho.

Existem formas para personalizar o recurso nativo do WordPress, mas exigirá mais trabalho e algumas linhas de código.

Possíveis problemas com o lazy load

Existem alguns problemas que podem acontecer quando implantamos o adiamento de imagens fora da tela.

Quebra de conteúdo

Há alguns anos, implementar o lazy load frequentemente “quebrava o conteúdo”.

Ou seja, o design do site e o posicionamento correto das imagens ficavam desconfigurados.

Isso ocorria, pois os temas WordPress mais antigos não eram totalmente compatíveis.

Por outro lado, os plugins parecem ter aprimorado a funcionalidade.

Porém, hoje os temas mais modernos e mais utilizados são completamente compatíveis.

Por fim, se ocorrer alguma quebra no seu site, certifique-se de que o seu tema está atualizado.

Vale a pena também testar o funcionamento com outro plugin.

Se o problema persistir, é necessário contatar o suporte do seu tema.

Aumento do TBT (Tempo Total de Bloqueio)

Eu percebi, em algumas situações, que o lazy load pode aumentar o tempo do TBT (métrica do Google Lighthouse).

O adiamento de imagens fora da tela, melhora o LCP (como vimos), mas parece piorar o TBT.

Como podemos contornar isso?

Em tese, os plugins para tal finalidade, deveriam adiar somente as imagens que estão abaixo da dobra. Mas, parece que em algumas situações isso não ocorre corretamente.

Dessa forma, podemos testar duas técnicas para resolver o aumento do TBT:

1) Exclua explicitamente todas as imagens acima da dobra do lazy load. Alguns plugins têm esta opção.

2) Utilize a rel “preload” para as imagens acima da dobra.

Compatibilidade do navegador

Nem todos os navegadores web, são compatíveis com o recurso lazy load.

Neste link, é possível conhecer quais são os navegadores compatíveis e inclusive testar em diferentes navegadores.

Plugins WordPress para lazy load

Existem diversos plugins especificamente para implantar o lazy load em seu site WordPress.

Porém, também existem plugins que servem para várias funções e ainda disponibilizam o recurso para adiar imagens.

Vamos abordar apenas alguns deles.

WP Rocket

O WP Rocket é um plugin premium de cachê mais utilizado em WordPress.

Ele, praticamente, é um daqueles plugins essenciais para o desempenho.

Além disso, o WP Rocket também disponibiliza a ferramenta para ativação do lazy load de imagens, de iframes e de vídeos.

Você também pode adicionar imagens que devem ser excluídas do lazy load.

Lazy Load do WP Rocket

Perfmatters

O Perfmatters também é um plugin premium que tem diversas funcionalidades importantes para a otimização da velocidade.

Ele disponibiliza um recurso de lazy load, bastante similar ao WP Rocket.

Lazy Load do Perfmatters

Smush

O Smush é um plugin de otimização de imagens.

Porém, ele tem uma ferramenta para lazy load bastante completa.

Smush

Mas, parece-me que se você desejar somente adiar as imagens e não utilizar os demais recursos do plugin, seria melhor você utilizar um plugin específico.

Lazy load

O lazy load é um plugin criado pela WP Rocket.

É bastante simples, com poucas opções de configurações.

Por outro lado, é bastante fácil a sua utilização.

Ele serve somente para esta finalidade específica.

a3 Lazy load

Este  plugin tem 200 mil instalações ativas.

Dentre os plugins com função específica de lazy load, parece ser o mais utilizado.

Esta popularidade, se deve ao fato de ser um plugin bastante completo, com diversas funcionalidades e capacidade de exclusão bastante ampla.

a3 Lazy Load

Como desabilitar o lazy load nativo do WordPress?

Eu não encontrei nenhum tipo de conflito utilizando um plugin para lazy load junto com o recurso nativo do WordPress.

Todavia, eu estou utilizando um tema específico e um conjunto de plugins específicos.

Porém, se você encontrar algum problema com a utilização de algum desses plugins, você pode desabilitar o recurso nativo do WordPress.

Além disso, o ideal é não utilizar recursos redundantes para as mesmas funcionalidades.

Para desativar, basta instalar este plugin.

Como saber se o lazy load está funcionando em seu site?

Existem duas formas de verificar se o recurso está funcionando.

Uma forma é visual e mais intuitiva, por outro lado, a ferramenta do desenvolver do Google Chrome, oferece uma forma de verificar o funcionamento de forma mais objetiva.

Todavia, explicar por texto talvez não seja a melhor maneira.

Por isso, eu gravei um vídeo rápido para mostrar.

Outras otimizações necessárias

“Adiar imagens fora da tela”, ajudam no desempenho.

Mas, precisamos lembrar que existem muitas outras otimizações para alcançar um desempenho excelente.

Para usuários de WordPress, nós criamos o Curso Acelera WP.

Neste curso é possível conhecer passo a passo de todos os processos e técnicas necessárias para tornar o seu site, verdadeiramente rápido. 

Espero que este artigo ajude você conseguir melhorias no desempenho do seu site ou loja virtual.

Artigos relacionados:

No Blog da Agência Ux Web você encontrará conteúdo indispensável para o crescimento do seu negócio online.

REDES SOCIAIS

CATEGORIAS DO BLOG