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.

Com o lançamento do WordPress 5.5, o carregamento preguiçoso tornou-se parte da versão principal e torna muito fácil a implementação desta técnica.

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 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 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.

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. 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. A3 Lazy Load deixa o comportamento padrão do WordPress intacto e o resultado é que um arquivo de imagem muito menor é entregue.

Lazy Load

E uma segunda 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.

Native Lazy Loading

Nos últimos anos, houve um impulso para integrar a funcionalidade de carregamento preguiçoso diretamente em navegadores web. Neste momento, o carregamento preguiçoso nativo está disponível em navegadores baseados em Chromium

O carregamento nativo preguiçoso é ótimo para o desempenho do site porque não depende de código Javascript em linha ou scripts externos. Para adicionar carregamento nativo preguiçoso ao seu site, basta adicionar um atributo loading=lazy às imagens e iframes que você deseja carregar preguiçosamente.

Plugin Native Lazyload do Google.
Plugin Native Lazyload do Google.

O Google desenvolveu o plugin Native Lazyload para ajudar a facilitar este processo. Após ativar o plugin, o WordPress inserirá automaticamente o atributo de loading em suas tags img e iframe.

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

Com um amplo suporte de carregamento preguiçoso no horizonte, recomendamos usar um plugin como o Native Lazy Load do Google para definir uma linha de base de carregamento preguiçoso para o seu site.

Com suporte Chrome e Firefox, e suporte Safari no futuro, o carregamento preguiçoso no navegador deve ser tudo que você precisa para carregar suas imagens e iframes preguiçosos. Dito isto, se você está procurando uma opção baseada em JavaScript que visa também navegadores mais antigos, a3 Lazy Load é uma ótima opção.

O carregamento preguiçoso é apenas uma técnica que você pode usar para otimizar seu site WordPress. Entretanto, tem o potencial de ter um impacto profundo na velocidade do site se você usar muitas imagens e vídeos. Ainda assim, uma vez implementado o carregamento preguiçoso, há várias técnicas adicionais que você pode considerar e implementar para oferecer o desempenho mais rápido possível do site.

Perdemos alguma outra boa solução de carga preguiçosa do WordPress? Se sim, informe-nos abaixo.

Jon Penland

Jon é o Diretor de Operações na Kinsta e está envolvido diariamente com as equipes de vendas, atendimento ao cliente e suporte técnico da Kinsta. Jon é um homem de família. Então, quando não está digitando freneticamente no laptop, geralmente está ajudando um de seus filhos a consertar uma bicicleta ou configurando a Netflix para uma criança impaciente.