O peso médio das páginas da web é de 3719 kB, sendo que imagens e vídeos chegam perto dos 78% do peso total, de acordo com o HTTP Archive. São muitos bytes para um navegador do visitante do website fazer download e renderizar e a tendência é ter páginas maiores e com maior uso de imagens no futuro. O WordPress é líder quando se trata de compartilhar mídia e incorporar arquivos de mídia no design do site. Com o WordPress é fácil integrar imagens e vídeos em posts, páginas e até no plano de fundo do tema.

Entretanto, todas aquelas ferramentas pesadas fazem do download da página uma experiência custosa, já que os usuários têm que esperar o download de arquivos grandes – incluindo arquivos que não são visíveis inicialmente – antes de visualizar a página da web. É aí que o Lazy Load no WordPress entra em ação.

O que é Lazy Loading e Como Ele Funciona?

Lazy loading é uma técnica de otimização que carrega conteúdo visível, mas retarda o download e renderização de conteúdo que aparece abaixo da dobra de página. É o tipo de coisa que deixa o Google empolgado e é uma técnica que você deve considerar se seus posts e páginas incluem muitos vídeos e imagens de alta resolução.

O Lazy loading funciona da seguinte forma:

  • O navegador constrói o Modelo de Objeto de Documento (DOM) da página da web, sem fazer o download das imagens e o pré-download dos vídeos.
  • O JavaScript é usado para determinar quais imagens baixar e quais vídeos fazer o pré-download, com base no conteúdo que está inicialmente visível quando a página carrega. Tais imagens e vídeos são baixados e pré-baixados conforme for apropriado.
  • O download e a renderização de vídeos adicionais não são feitos até um visitante do site descer a página e o conteúdo adicional aparecer na tela.

O resultado final é que as imagens não são baixadas e os vídeos não são carregados até que seja realmente necessário. Isso pode proporcionar uma melhoria significativa no desempenho de sites que adicionam muitas imagens de alta resolução e vídeos.

Lazy loading pode ter um impacto profundo na velocidade do site se você usa muitas imagens. 🚀 Click to Tweet

Lazy Load no WordPress

Assim como muitos outros problemas de desempenho de websites, quando estamos lidando com o lazy load no WordPress, há um plugin que você pode usar para consertar o problema. Na verdade, há muitos plugins gratuitos disponíveis no diretório de plugins do WordPress, que podem ser usados para realizar o processo de lazy load em imagens e vídeos. Depois de considerar uma dúzia de plugins e colocar muitos em andamento, nós identificamos cinco deles que produzem uma melhoria considerável na performance do website. Se você está pronto para implementar lazy loading, comece a considerar essas cinco opções.

Imagens e Vídeos Realmente Deixam os Websites Lentos?

Primeiramente, antes de você carregar qualquer imagem no WordPress, certifique-se de que você as otimizou.

Precisamos de uma pontuação de linha de base, assim podemos ver o impacto de adicionar imagens e vídeos. Não faz sentido consertar um problema se não há problema algum. Para testar como as coisas funcionam, preparei uma instalação padrão no WordPress em uma conta de hospedagem na Kinsta. TwentySixteen é o tema ativo e os plugins de otimização ou técnicas de cache foram implementados.

Aqui está como o teste de velocidade do Pingdom avalia o site antes de adicionar quaisquer imagens ou vídeos.

Teste de velocidade sem imagens ou vídeos

Teste de velocidade sem imagens ou vídeos

Como podemos ver, a página é bem leve, abaixo de 155 kb e carregada em menos de meio segundo. É difícil encontrar uma falha com essas pontuações. O que acontece se carregarmos a página com arquivos de imagens grandes e vídeos do YouTube?

Teste de velocidade sem plugin lazy loading

Teste de velocidade sem plugin lazy loading

O tamanho da página subiu para 1.7 MB e o tempo de carregamento da página quase triplicou, ficando um pouco abaixo de 1,3 segundos. O TwentySixteen é um tema leve e bem escrito, então, mesmo com meia dúzia de imagens e vídeos do YouTube adicionados, esse site ainda é bem leve e carrega rápido. Entretanto, podemos ver que adicionar imagens e vídeos tornou o tamanho da página muito maior e diminuiu a velocidade de carregamento consideravelmente.

Melhorando a Velocidade de Carregamento da Página com Plugins de Lazy Loading

Quatro plugins que aceleram a entrega dessa página consideravelmente são BJ Lazy Load, Lazy Load XT, a3 Lazy Load e Lazy Load. Vamos olhar como é a performance de cada um deles. Muitos plugins adicionais também foram testados, mas não produziram melhorias mensuráveis no desempenho do site. Conforme você experimenta os plugins de lazy load, certifique-se de fazer um teste antes e um depois para garantir que eles estão produzindo os resultados que você está procurando.

1. BJ Lazy Load

BJ Lazy Load é um plugin muito popular. Ele está ativo em mais de 70 mil sites do WordPress e é avaliado em 4,1 entre 5 estrelas possíveis, com um total de mais de 60 avaliações.

Plugin BJ Lazy Load

Plugin BJ Lazy Load

A instalação e a configuração não precisam de esforço. Apenas encontre o plugin usando o instalador embutido de plugin no WordPress, instale e ative. Após a instalação, um novo item no menu é adicionado em Configurações > BJ Lazy Load. Todas as opções de lazy loading são selecionados por padrão e você provavelmente vai querer deixar as configurações do jeito que estão, a menos que encontre problemas no front-end do site depois de ativar o plugin.

Uma opção habilitada por esse plugin, e que não é pelos outros, é a capacidade de adicionar uma URL em uma imagem para ser usada como placeholder para fazer o lazy load de imagens e vídeos, até que os recursos de imagens e vídeos reais sejam baixados. Claro que se você utilizar essa opção, deve usar um arquivo muito pequeno e não uma imagem em alta resolução.

Para obter resultados mais claros e sem “emendas”, eu recomendaria criar uma imagem colorida sólida da mesma cor de fundo do seu site e salvá-la em formato png.

Você também pode especificar uma classe HTML que será excluída do lazy loading. Em seguida, pode aplicar essa classe para qualquer imagem ou vídeo que você desejar excluir do lazy loading. Finalmente, basta especificar o quão perto uma imagem ou vídeo deve chegar da janela de exibição antes de serem baixados e renderizados.

Vamos ver o quão rápido nossa página carrega com a configuração do BJ Lazy Load.

Teste de velocidade com o plugin BJ Lazy Load

Teste de velocidade com o plugin BJ Lazy Load

É muito rápido. O site foi testado uma meia dúzia de vezes em horas variadas durante o dia e o tempo de carregamento da página ficou consistentemente entre 300 e 400 milissegundos.

Esse resultado rápido do teste não é uma exceção.

Embora a página carregue incrivelmente rápido com esse plugin instalado, a verdade é que seu tamanho aumentou. Qual o problema disso? Na teoria, com o lazy loading ativado, o tamanho da página deveria diminuir, já que nem todas as imagens estão sendo baixadas com o carregamento inicial da página.

Após investigar sobre a situação, aqui está o que eu encontrei.

Como o WordPress Trata as Imagens?

O comportamento padrão do WordPress é apresentar uma variedade de tamanhos de arquivos para o navegador utilizando o atributo srcset do elemento img usado para carregar a imagem. O navegador procura através da lista de tamanhos disponíveis e carrega a menor versão da imagem que encaixará no espaço disponível.

Isso significa que se você carregar um arquivo de imagem muito grande, o WordPress automaticamente oferecerá muitas versões menores daquela mesma imagem para os visitantes do seu website. O navegador do seu visitante vai escolher a menor imagem adequada, baseado no estado real de quantidade de pixels disponível para a imagem ocupar.

Como o BJ Lazy Load Muda o Comportamento do WordPress?

BJ Lazy Load se sobrepõe ao comportamento padrão do WordPress. O atributo srcset é substituído com um atributo data-lazy-srcset, que funciona em conjunto com o script do plugin. Entretanto, o resultado final é que, ao invés de fazer o download da versão reduzida, a imagem em resolução completa acaba sendo baixada e renderizada.

Isso não é o ideal, mas assim que você otimizar os arquivos de imagem antes de carregá-los no WordPress — algo que eu não fiz — você não terá o mesmo problema.

Página carregando com BJ Lazy Load

Página carregando com BJ Lazy Load

O teste do globo ocular — simplesmente carregar o site e aguardar para ver o que acontece — demonstra que se você usa o BJ Lazy Load e o seu site possui um fundo colorido, você precisará adicionar um tipo de atributo placeholder de imagem. O comportamento padrão sem qualquer placeholder de imagem é renderizar um placeholder de gif em branco no lugar da imagem.

2. Lazy Load XT

Lazy Load XT teve uma boa performance nos nossos testes e é outro bom plugin de lazy load no WordPress que vale a pena considerar. Com um pouco mais de quatro mil instalações ativas, esse plugin não é tão popular quanto o BJ Lazy Load. Entretanto, ele chamou minha atenção com uma avaliação impressionante de 4,9 entre 5 estrelas possíveis. Somente uma das 22 avaliações publicadas é menor do que 5 estrelas.

lazy load xt plugin wordpress

Plugin Lazy Load XT

Depois da ativação, o plugin é configurado através do menu encontrado em ConfiguraçõesLazy Load XT. Você irá perceber rapidamente que esse plugin faz mais do que baixar imagens e vídeos na forma lazy load. Você também pode usar esse plugin para reduzir arquivos JS e CSS, carregar bibliotecas JavaScript e CSS usando a CDN Cloudflare e mover o script para o rodapé do site.

Há muitas opções adicionais que você pode usar para ajustar o desempenho do site. Entretanto, como estamos apenas testando lazy loading nesse ponto, eu deixei as configurações padrão, não mexi com diminuição ou movimentação de CCS e JavaScript, limpei o cache do servidor e rodei a página teste através do teste de velocidade do site Pingdom

Teste de velocidade com Lazy Load XT

Teste de velocidade com Lazy Load XT

A página ainda está pesando 2 MB e o tempo de carregamento não é tão rápido quanto era com o BJ Lazy Load, mas ainda assim atingimos uma redução de 50% no tempo de carregamento da página comparado ao tempo necessário para carregá-la sem lazy loading.

Uma rápida olhada na árvore de arquivos nos resultados do teste mostra que a mesma coisa está acontecendo com o Lazy Load XT ativado, assim como vimos com o BJ Lazy Load. Ao invés de carregar uma versão otimizada da imagem, a versão com resolução completa da imagem é baixada e renderizada com o plugin ativado.

Embora o plugin não tenha produzido a mesma melhoria de velocidade que o BJ Lazy Load, o teste do globo ocular está a em favor do Lazy Load XT. Diferente do BJ Lazy Load, o placeholder usado pelo Lazy Load XT é transparente. Como resultado, não há caixas brancas indesejáveis enquanto as imagens e vídeos são carregados e você não tem que se preocupar em criar e carregar uma imagem como placeholder.

3. a3 Lazy Load

a3 Lazy Load é outra opção popular no repositório do WordPress para lazy load. Esse plugin está ativo em mais de 50 mil websites WordPress e ganhou uma avaliação muito forte de 4,7 entre 5 estrelas possíveis, tendo recebido aproximadamente 40 avaliações de usuários.

Plugin A3 Lazy Load

Plugin A3 Lazy Load

Ativando o plugin, temos a adição do menu de configurações em Configurações > a3 Lazy Load. Para os propósitos do teste, eu deixei as configurações padrão com uma exceção. Eu usei a opção Carregando a Cor de Fundo (Loading Background Colour) para associar a cor do placeholder com a cor de fundo da página. Com essa mudança feita e as configurações padrão aplicadas, o site obteve um desempenho muito bom.

Teste de velocidade com o plugin A3 Lazy Load

Teste de velocidade com o plugin A3 Lazy Load

Voltamos para um tempo de carregamento de página abaixo de meio segundo. Isso é notável, considerando o número de imagens e vídeos incluídos nessa página.

Resultados dos testes comparados

Sem dúvida, você perceberá que o tamanho da página e o número de solicitações diminuíram consideravelmente. O que está criando essa diferença dramática? O site Pingdom fornece um panorama instantâneo sobre o tamanho do conteúdo e uma comparação rápida fornece a resposta. Primeiro, aqui está como o panorama instantâneo do tamanho do conteúdo se parece com o a3 Lazy Load ativado.

Tamanho do conteúdo com o plugin A3 Lazy Load

Tamanho do conteúdo com o plugin A3 Lazy Load

O tamanho da imagem é pequeno, ultrapassando um pouco 150 kb. Tanto o BJ Lazy Load quanto o Lazy Load XT produziram uma página de 2.0 MB. Aqui está como o conteúdo da tela se parece com uma carga útil total de 2.0 MB.

Tamanho do conteúdo com o plugin Lazy Load XT

Tamanho do conteúdo com o plugin Lazy Load XT

O script, HTML, CSS e outros tamanhos de conteúdo são quase idênticos. Entretanto, o tamanho da imagem é de 1.86 MB — basicamente, o tamanho da versão com resolução completa da primeira imagem na página — ao invés de somente 150 kb. Então, o que está acontecendo? Como mencionei anteriormente, o WordPress automaticamente fornece uma variedade de tamanhos de imagens e o navegador seleciona e renderiza a menor versão possível, baseado no tamanho em que a imagem será renderizada na tela.

Ambos o BJ Lazy Load e o Lazy Load XT sobrepõem esse comportamento e acabam exibindo a imagem de resolução completa. Entretanto, o a3 Lazy Load deixa o comportamento padrão do WordPress intacto e o resultado é que uma imagem muito menor é exibida.

Curiosamente, apesar da diferença de tamanho de página, o site carrega mais rápido com o BJ Lazy Load ativado do que com o a3 Lazy Load ativado. O site foi testado múltiplas vezes com cada plugin instalado para garantir que os resultados mostrados aqui não sejam exceções. A diferença resume-se ao número de solicitações de HTTP  necessárias para carregar a página. Se olharmos rapidamente, parece que o BJ Lazy Load requer mais solicitações. Entretanto, se olharmos a árvore de arquivos, percebemos o que realmente está acontecendo.

Lazy Load Data URIs

Lazy Load Data URIs

O arquivo do site com o BJ Lazy Load ativado inclui mais ou menos vinte solicitações que começam com data:image/gif. Essas são URIs de dados ao invés de solicitações HTTP. Na verdade, elas falam para o navegador criar um gif localmente ao invés de solicitar o gif de um servidor. Como resultado, o BJ Lazy Load precisa somente de 17 solicitações HTTP para construir a página contra 27 solicitadas pelo a3 Lazy Load. Isso explica porque a página carrega mais rápido.

O Lazy Load XT adota uma tática similar, mas ainda necessita de um pouco mais de solicitações do que o BJ Lazy Load, o que explica porque ele não produz os mesmos resultados.

4. Lazy Load

E uma quarta opção é o Lazy Load, um plugin gratuito criado pelo time da WP Rocket. Atualmente, ele está ativo em mais de 10 mil instalações, com avaliação 4 entre 5 estrelas. Se você está procurando por uma opção simples de lazy load no WordPress com uma boa velocidade, esse é uma ótima escolha.

Plugin Lazy Load da WP Rocket

Plugin Lazy Load da WP Rocket

Esse plugin funciona em miniaturas, todas as imagens no conteúdo de um post ou em um texto em widget, avatares e smilies. A grande vantagem desse plugin é que não há biblioteca JavaScript, como jQuery, sendo usada e o script pesa menos do que 10 KB. Não há opções para configurar, simplesmente instale o plugin e o lazy loading vai começar a funcionar.

5. Lazy Load for Videos

Se você está preocupado apenas com lazy loading para vídeos, também recomendamos checar o plugin Lazy Load for Videos. Embora alguns dos plugins acima também façam isso, essa é uma ótima solução apenas para conteúdo de vídeo.

 Plugin Lazy Load para Videos

Plugin Lazy Load para Videos

O Impacto do Lazy Loading em SEO

Independente do plugin que você acabe usando para lazy loading no WordPress, é importante que você não prejudique seu SEO. Há duas coisas que precisam de dupla verificação:

  1. Certifique-se que o Google ainda consegue encontrar as imagens carregadas com lazy loading. Você pode verificar isso facilmente, usando a ferramenta “Pesquise como o Google” na seção de rastreamento do Google Search Console. Se você ainda consegue ver suas imagens no código fonte, então provavelmente está tudo certo.
  2. Certifique-se de que você ainda esteja usando textos alternativos nas suas imagens, já que isso é importante para o ranqueamento de pesquisas de imagens do Google.

Resumo e Recomendações

Onde isso nos leva? Todas essas quatro opções fizeram um ótimo trabalho para melhorar a velocidade de carregamento das páginas através de lazy loading de imagens e vídeos. A escolha de qual é o melhor se resume em sua preferência pessoal e como você prepara as imagens antes de carregá-las no seu site WordPress.

  • Se você não otimiza as imagens antes de carregá-las no seu site WordPress — e você realmente deveria fazer isso — então use o a3 Lazy Load, assim você ganha o benefício da otimização da imagem no WordPress.
  • Se você otimiza as imagens antes de carregá-las e quer a exibição mais rápida possível com o menor esforço, você não errará ao usar o BJ Lazy Load. O Lazy Load é outra boa opção.
  • Se você otimiza as imagens antes de carregá-las e quer opções de configuração adicionais que vão te permitir saber como recursos de CSS e JavaScript são exibidos e manipulados, use o Lazy Load XT.

Lazy loading é só uma técnica que você pode usar para otimizar seu site WordPress. Entretanto, ela tem o potencial de apresentar um impacto profundo na velocidade do site se você usa muitas imagens e vídeos. E mais: uma vez que você tenha implementado lazy loading, há muitas técnicas adicionais que podem ser consideradas e implementadas para exibir o desempenho mais rápido possível do seu website. Deixamos alguma solução de lazy load no WordPress de fora? Se sim, avise-nos abaixo.

17
Shares