O carregamento lento é uma das melhores maneiras de tornar seu site mais rápido.
O que o carregamento lento faz é evitar o carregamento de objetos como imagens até um pouco antes de eles se tornarem visíveis na janela do navegador.
Isso faz com que seu site responda muito mais rápido, e o visitante pode rolar para baixo e interagir com a página muito mais cedo.
Dessa forma, o carregamento lento pode causar uma melhoria significativa na velocidade do site e um grande aumento no usuário experiência.
O Google acaba de lançar um novo plug-in WordPress chamado Native Lazyload , que é provavelmente o melhor plugin de carregamento lento atualmente disponível.
O plug-in Native Lazyload permite um novo tipo de carregamento lento que é integrado ao o navegador da web, tornando-o muito mais eficaz do que as soluções anteriores.
O que é carregamento lento?
O carregamento lento é um método de otimização da velocidade do site que atrasa o carregamento de objetos até que o visitante precise deles.
Por exemplo, faz com que as imagens e os vídeos não carreguem no navegador até que o visitante role para baixo até onde estão na página.
Com o carregamento lento, todo o conteúdo visível na parte superior da página (acima da dobra) é carregado imediatamente.
Mas o conteúdo que está mais abaixo na página (abaixo da dobra) não é carregado até que se torne visível na janela do navegador conforme o visitante rola para baixo.
Isso não apenas torna o carregamento inicial da sua página da web muito mais rápido. Ele também economiza largura de banda, memória e uso de dados porque muitos usuários não visualizam a página inteira.
O carregamento lento é mais comumente usado para imagens, mas também pode ser usado para vários outros ativos da web-incluindo vídeos, iframes, anúncios, comentários e outros.
Como o carregamento lento é implementado
Costumava ser necessário usar javascript para habilitar o carregamento lento em um site.
No entanto, a partir de 30 de julho de 2019, a versão mais recente do Google Chrome navegador da web (Chrome 76) oferece suporte a carregamento lento nativo. Nesse caso, “nativo” significa que está integrado no próprio navegador da web.
Ao adicionar um atributo HTML simples (carregando=”preguiçoso”) a imagens e iframes, o navegador Chrome agora só os carrega antes que se tornem visíveis na janela do navegador.
Você pode ler tudo sobre o carregamento lento nativo no blog web.dev do Google .
Native Lazyload, um plug-in do Google
Native Lazyload é um novo plug-in WordPress do Google que permite o carregamento lento nativo. Ele foi criado pelo engenheiro do Google Felix Arntz .
Ele adiciona o atributo loading=”lazy” às imagens e iframes, fazendo com que não carreguem até que sejam necessários.
loading="preguiçoso"/>
Este atributo HTML simples faz com que as imagens e iframes em navegadores de suporte tornem-se carregados lentamente. Atualmente, ele é compatível apenas com a versão mais recente do Chrome (Chrome 76).
Mecanismo de carregamento lento de backup
Para navegadores que ainda não oferecem suporte ao carregamento lento nativo, o plug-in tem uma função de fallback com um mecanismo baseado em javascript.
Este mecanismo usa um pequeno arquivo javascript (cerca de 1 KB), mas só carrega quando o navegador não oferece suporte a carregamento lento nativo.
Por causa disso, o plug-in permite o carregamento lento em todos os navegadores da web comuns, não apenas aqueles que oferecem suporte ao carregamento lento nativo.
Se quiser desativar o mecanismo JavaScript substituto por algum motivo, você pode colar o snippet de código abaixo em seu arquivo functions.php ou Plug-in de snippets de código :
add_filter ('native_lazyload_fallback_script_enabled','__return_false')
Como instalar e configurar Native Lazyload
Você pode obter Native Lazyload gratuitamente no diretório de plug-ins do WordPress .
Vá para o painel de administração do WordPress-> Plug-ins-> Adicionar novo e pesquise “nativo lazyload”-clique em “Instalar agora” e depois em “Ativar”.
Não há configurações-basta instalar e ativar o plug-in e ele funciona imediatamente.
Depois de instalar, você pode visualizar seu código-fonte ou clicar com o botão direito e inspecionar o HTML de uma imagem para ter certeza de que o atributo loading=”lazy” está lá.
Suporte do navegador para carregamento lento nativo
Você pode ver quais navegadores suportam atualmente o carregamento lento nativo nesta página .
No momento em que este artigo foi escrito, o carregamento lento nativo só funcionava no Chrome 76.
Terá suporte em todas as versões futuras do Chrome, o que é significativo porque o Chrome é o navegador da web mais popular no mundo .
No entanto, você também pode esperar que outros navegadores populares comecem a oferecer suporte ao carregamento lento nativo em um futuro próximo.
Desative o carregamento lento para certas imagens e iframes
Se você deseja desativar o carregamento lento para imagens ou iframes individuais, pode adicionar a classe CSS “skip-lazy” para fazer com que o plug-in os ignore.
class="skip-lazy"/>
Efeitos do Lazyload nativo no desempenho
Depois de instalar o plugin Native Lazyload neste site, obtive uma melhoria imediata na velocidade.
Minha pontuação do Google PageSpeed no celular aumentou de 90 para 92 para 96-98 e meu tempo de interação diminuiu 1,5 segundos. Minha pontuação do PageSpeed no desktop agora é 100.
Aqui estão os resultados mais recentes ao testar minha página de plug-ins de velocidade do WordPress :
Especificamente, o carregamento lento ajuda você a se livrar do aviso “adiar imagens fora da tela” na ferramenta PageSpeed.
Teste de velocidade nativo Lazyload
Para o propósito deste artigo, decidi executar alguns testes de velocidade com e sem o plugin Native Lazyload em um site de teste.
Esta era uma cópia de teste do meu próprio site, então estava executando o leve GeneratePress tema e hospedado com Kinsta , uma empresa de hospedagem na web muito rápida. O cache de página foi desativado e nenhum CDN foi usado.
A página de teste foi uma postagem em WordPress com quase 3.000 palavras e 18 imagens, incluindo muitas capturas de tela.
Aqui estão as pontuações para celular e desktop no Google PageSpeed Insights :
A pontuação do PageSpeed para celular aumentou de 82 para 97, e a pontuação para computador aumentou de 97 para 99. Ambas terminaram muito perto de uma pontuação”perfeita”de 100.
Também houve uma melhoria notável na métrica “Tempo para interação”:
O Tempo para a interação no celular diminuiu de 6,8 segundos para 2,6 segundos, o que é uma redução de 62%.
O tempo de interação é a quantidade de tempo que leva para as primeiras partes da página carregarem, de modo que o visitante possa rolar para baixo na página e interagir com os elementos nela.
É uma das métricas de velocidade do site mais importantes e tem um efeito significativo na experiência do usuário. Um TTI baixo significa que seu site deve parecer muito rápido para os usuários.
Eu também queria ver quanta largura de banda o plug-in economiza durante o carregamento inicial da página. Para isso, usei outra ferramenta de medição de velocidade do site chamada GTMetrix .
De acordo com GTMetrix, o carregamento inicial da página foi de 1000 KB para 143 KB, uma redução de 85,7%.
O número de solicitações HTTP no carregamento inicial da página também passou de 29 para 13, uma redução de 55%.
Grande aumento de desempenho
Se você tiver muitas imagens em suas páginas, o plug-in Native Lazyload pode levar a um grande aumento no desempenho.
Também deve levar a uma melhoria significativa se você tiver muitos iframes, como incorporações de vídeos do YouTube ou anúncios baseados em iframes.
No momento, tenho o plug-in instalado neste site, então você pode vê-lo em ação clicando ao redor.
Outros bons plug-ins de carregamento lento
Se você não quiser o plug-in Native Lazyload por algum motivo, existem vários outros plug-ins de carregamento lento disponíveis:
Então você pode ver uma lista de plug-ins poderosos para melhorar o desempenho do WordPress de forma mais geral aqui: 11 WordPress Speed Plugins para otimizar o desempenho .
Como fazer suas imagens parecerem mais rápido
Talvez o maior problema com o carregamento lento seja quando os objetos não carregam rápido o suficiente.
Por exemplo, quando você rola para baixo uma página com relativa rapidez e há um atraso perceptível antes que as imagens apareçam.
Esse atraso pode distrair muito e às vezes faz com que o texto salte na página.
Você pode evitar isso de alguma forma se suas imagens forem bem otimizadas e carregarem rapidamente. Existem três maneiras principais de fazer isso:
- Tamanhos de imagem: salve suas imagens em dimensões que se ajustem às suas páginas antes de carregá-las. Imagens de 1000 px de largura carregam muito mais rápido do que imagens de 6000 px. Photopea é uma excelente ferramenta online gratuita para isso.
- Plug-in de otimização de imagem: use um plug-in de otimização de imagem como Imagify para compactar suas imagens sem reduzir a qualidade.
- CDN: forneça suas imagens a partir de uma rede de entrega de conteúdo (CDN) para que os visitantes as baixem de um servidor da web rápido localizado próximo a eles. Cloudflare é uma ótima opção gratuita.
Ao veicular imagens bem otimizadas de um CDN rápido, elas devem aparecer tão rápido que seus visitantes nem percebem que estão carregados lentamente.