Aumente o tráfego qualificado no seu site.
Email info@fredericolopes.com

Como atrasar o carregamento das imagens no WordPress

Home > Blog > Performance > Como atrasar o carregamento das imagens no WordPress

Precisa atrasar o carregamento de imagens em WordPress? Esta técnica pode ser útil, para melhorar a velocidade de um site, porque as imagens não serão carregadas todas ao mesmo tempo, o chamado Lazy Loading permite que o seu site carregue apenas imagens quando um utilizador se desloca para a imagem específica. Pode ver esta técnica em ação em muitos sites populares tais como o Buzzfeed. Neste artigo, vou mostrar então como atrasar o carregamento de imagens em WordPress.

Porquê atrasar o carregamento das imagens no WordPress?

Ninguém gosta de sites lentos. Chegam até a haver estudos que dizem comprovar que um atraso de 1 segundo no tempo de carregamento da página pode levar a uma perda de 7% nas conversões, 11% menos visualizações de página e uma redução de 16% na satisfação do cliente.

Curioso, não é?

As imagens são o que mais contribuem para prejudicar o tempo de carregamento de um site. Então se adicionar muitas imagens aos seus artigos, cada imagem aumentará o tempo de carregamento da sua página.

Uma maneira de lidar com essa situação é otimizar as imagens para a web e usar um serviço CDN, como a Cloudflare ou o MaxCDN. Isso permite que os usuários visualizem várias imagens de uma vez, não a partir do site, mas sim dos servidores localizados por perto.

No entanto, todas as imagens continuam ainda a serem carregadas de uma só vez, e isso ainda afetará o tempo total de carregamento da página.

Para superar esse problema,

Podemos atrasar o carregamento de imagens, implementando essa configuração no site.

Como funciona o atraso no carregamento de imagens?

Em vez de carregar todas as suas imagens ao mesmo tempo, o carregamento lento carrega apenas as imagens que serão visíveis no browser dos utilizadores. Substituindo todas as outras imagens por um espaço reservado.

À medida que o leitor vai percorrendo a página, o site carrega as imagens à medida que estão a visíveis no navegador.

Dito isto, vamos ver como configurar facilmente um atraso de carregamento para imagens no WordPress.

Configurar o atraso de carregamento para imagens no WordPress

A primeira coisa que precisa fazer é instalar e ativar o plugin BJ Lazy Load. Após activar, precisa navegar até Configurações »BJ Lazy Load para configurar o plugin.

Pode aplicar esta técnica ao conteúdo, widgets de texto, miniaturas de post, gravatars, imagens e iframes. Também pode carregar uma imagem personalizada para ser usada como uma imagem de espaço reservado.

Este plugin também possui uma opção para mostrar uma versão de baixa resolução da imagem em vez da imagem do espaço reservado. Para usar este recurso, precisará regenerar os tamanhos das imagem, para que o plugin consiga gerar uma versão de baixa resolução para todos os seus uploads anteriores.

Não esqueça de clicar no botão Salvar alterações para guardar suas configurações.

Agora pode voltar a visualizar o site para ver o carregamento lento de imagens em ação.

Espero que este artigo o ajude a aprender como atrasar o carregamento de imagens no WordPress. Aguardo os seus comentários!

 

Como atrasar o carregamento das imagens no WordPress
5 (100%) 2 voto[s]

About the author

Faço parte de uma das principais agências digitais em Portugal. Desenhamos experiências para a web ajudando marcas a falar em linguagem digital.

Leave a Reply

Frederico Lopes

Frederico Lopes é um Freelancer de Lisboa, Especializado em WordPress e E-Commerce. Apaixonado por SEO e Conversões é também obcecado por novas ideias, e tecnologias, que tragam mais clientes para seu negócio.
Como criar loja online: Guia Completo
6 Agosto, 2019
7 Melhores Plugins de Dropshipping para WooCommerce
7 Melhores Plugins de Dropshipping para WooCommerce
29 Julho, 2019
Os Métodos de Pagamento Online mais populares para E-commerce
Os Métodos de Pagamento Online mais populares para E-commerce
22 Julho, 2019
Certificado Google
fechar

Copie e cole este código para exibir a imagem no seu site