Como carregar lentamente no WordPress (imagens e vídeos)

Se você é proprietário de um site, provavelmente já pensou na velocidade do site pelo menos uma vez no passado. Afinal, o Google considera a velocidade ao determinar onde colocar os sites nos resultados de pesquisa. Então, se o seu site está lento para carregar, você está em desvantagem quando se trata de classificação. E todos sabemos que classificações mais altas levam a mais tráfego.

Então, como você garante que seu site WordPress esteja carregando o mais rápido possível? Uma maneira é carregar lentamente suas imagens.

Lazy loading é uma técnica que atrasa a renderização de imagens e vídeos até que sejam necessários. Implementar isso pode acelerar consideravelmente o seu site, e a boa notícia é que você não precisa ser um desenvolvedor para fazer isso funcionar.

Hoje, mostraremos como carregar lentamente imagens e vídeos no WordPress usando dois métodos: com um plug-in e sem.

O que é carregamento lento?

Lazy loading é uma técnica comum usada para melhorar a velocidade da página. A ideia é simples: em vez de carregar todas as imagens em uma página quando um visitante chega pela primeira vez, ele apenas renderiza as imagens que estão visíveis. Então, conforme o visitante rola a página, mais imagens são carregadas conforme necessário.

Isso significa que, se um visitante nunca rolar até a parte inferior de uma página, as imagens abaixo da área da página visualizada nunca serão carregadas. Assim, o carregamento lento pode economizar preciosos milissegundos (ou até mesmo segundos) no tempo de carregamento da página.

Além disso, o carregamento lento também pode ajudar a economizar largura de banda. Isso é especialmente importante se você tiver pessoas que visitam seu site em um dispositivo móvel. Ao adiar o carregamento de imagens e vídeos que não são visíveis, você pode diminuir a quantidade de dados usados.

Como funciona o carregamento lento?

Em geral, o carregamento lento funciona de duas maneiras. O WordPress, começando com a versão 5.5, adiciona um atributo HTML5 chamado “carregamento”. Nesse caso, o navegador lida com todas as partes do processo de carregamento lento sem a necessidade de nenhum JavaScript extra.

Outro método, desenvolvido antes do atributo do HTML5, é por meio de algum JavaScript criativo. Nesse caso, um espaço reservado vazio é exibido no carregamento da página e, em seguida, o JavaScript é usado para carregar as imagens conforme elas entram na janela de visualização.

De qualquer forma, apenas as imagens necessárias ao navegador são carregadas. Outras imagens são carregadas assim que o visitante rola a página.

Existem algumas maneiras diferentes de fazer isso, que discutiremos com mais detalhes abaixo. Mas essa é a essência de como o carregamento lento funciona.

Quais são os benefícios do carregamento lento?

Existem três benefícios principais no carregamento lento de imagens:

• Maior velocidade do site
• Uso de largura de banda reduzido
• Melhor experiência do usuário

O aumento da velocidade do site geralmente é a principal motivação para implementar o carregamento lento. Ao esperar para renderizar imagens desnecessárias, você pode diminuir o tempo de carregamento da página. Isso é especialmente verdadeiro se você tiver muitas imagens em uma página ou se suas imagens forem grandes.

Em seguida, o carregamento lento pode ajudá-lo a economizar largura de banda. Se os visitantes nunca se aventurarem na página, não haverá perda de largura de banda carregando imagens que eles nunca verão.

Por fim, o carregamento lento pode melhorar a experiência do usuário. Isso ocorre porque os visitantes não precisam esperar que todas as imagens em uma página carreguem antes de começar a interagir com seu site.

O carregamento preguiçoso do WordPress é padrão?

Sim, a partir do WordPress 5.5, o carregamento lento é ativado por padrão automaticamente na instalação. No entanto, existem algumas maneiras de personalizar a experiência que são bastante diretas e intuitivas. Discutiremos esses métodos com mais detalhes a seguir.

Devo carregar minhas imagens com preguiça? Existem desvantagens?

Na maioria dos casos, o carregamento lento de suas imagens é uma ótima ideia se você deseja melhorar a velocidade da página ou economizar largura de banda. No entanto, existem algumas desvantagens potenciais a serem consideradas também.

Mudança de layout

Se você carregar suas imagens com preguiça, o layout da sua página pode mudar. Por exemplo, se você tiver uma barra lateral no lado direito da página e carregar lentamente uma imagem localizada dentro dela, a barra lateral pode mover-se para baixo para liberar espaço. Isso pode ser muito desorientador para seus visitantes.

Como regra geral, o uso de espaços reservados é recomendado para evitar esse problema.

Potencial golpe para SEO

Se você não fizer isso corretamente, o carregamento lento de imagens pode fazer com que os mecanismos de pesquisa, como o Google, tenham problemas para indexá-las. O conteúdo é rei quando se trata de classificações e, nesse caso, você pode perder pedaços valiosos.

Suas imagens podem não aparecer mais nos resultados de pesquisa e, dependendo da importância das imagens em relação ao restante do conteúdo da página (como imagens de produtos para uma listagem de comércio eletrônico), também podem prejudicar suas classificações de pesquisa regulares.

Dito isso, se você configurar o carregamento lento corretamente, isso não será um problema. É por isso que, a menos que você seja um desenvolvedor confiante, seu melhor curso de ação é usar um plug-in de carregamento lento ou manter o carregamento lento padrão incluído no WordPress.

Conflitos de plugins

Além disso, o carregamento lento pode causar problemas com alguns plug-ins do WordPress – como plug-ins que usam imagens para gerar visualizações de mídia social.

Sempre que fizer alterações em seu site, você deve testá-las minuciosamente para garantir que tudo esteja funcionando como deveria.

E, caso algo dê errado, tenha um backup do seu site WordPress à mão para uma recuperação rápida.

Como ativar o carregamento lento no WordPress

O carregamento lento agora está ativado por padrão no WordPress. Se você não estiver usando uma iteração moderna do WordPress (embora recomendemos que você use) ou se quiser um controle mais granular sobre o processo de carregamento lento, poderá fazê-lo usando um dos dois métodos distintos: usando um plug-in ou adicionando código ao seu site.

1. Carga lenta com um plug-in

Se você não é um desenvolvedor experiente, recomendamos o uso de um plug-in, pois sempre que você edita o código do seu site, corre o risco de ter problemas. Mesmo se você tiver backups em mãos, caso quebre alguma coisa, ainda pode ser melhor simplesmente usar um plug-in respeitável.

O Jetpack Boost é um plug-in gratuito dedicado a ajudá-lo a avaliar e melhorar o desempenho do site. Oferece funcionalidades como:

• Adiando JavaScript não essencial
• Otimizando o carregamento de CSS
• Carregamento lento de imagem
• Teste de desempenho do site

Para começar a usar o Jetpack Boost, baixe-o gratuitamente no diretório de plugins do WordPress.

Ou, no painel do WordPress, vá para Plugins → Adicionar novo, procure por “Jetpack Boost” e clique em Instalar agora . Depois de instalado, clique em Ativar .

Em seguida, vá para a nova opção de menu do painel intitulada Boost . Em seguida, clique em Iniciar gratuitamente .

Na próxima página, role para baixo até a grande alternância que diz Lazy Image Loading e ative-a. Agora, dê uma olhada em seu site e certifique-se de que tudo está sendo renderizado corretamente e com boa aparência. É isso! O carregamento lento é bom com apenas alguns cliques.

Se quiser dar um passo adiante e personalizar o carregamento lento do seu site, você pode fazer isso usando snippets de código, que você pode adicionar ao seu arquivo functions.php . Ou você pode inseri-los com um plug-in de funcionalidade.

Aqui estão apenas algumas tarefas que você pode realizar:

1. Desative o carregamento lento em determinadas páginas
2. Defina um espaço reservado para ser exibido até que a imagem seja carregada
3. Desative o carregamento lento para imagens específicas
4. Desative o carregamento lento para uma classe CSS específica

Por exemplo, se você deseja excluir uma classe CSS do processo de carregamento lento, use este código:

 function mysite_customize_lazy_images( $blocked_classes ) {    $blocked_classes[] = 'my-header-image-classname';    return $blocked_classes; } add_filter( 'jetpack_lazy_images_blocked_classes', 'mysite_customize_lazy_images' );

Para mais detalhes, confira a documentação completa de carregamento lento.

2. Como carregar imagens lentamente no WordPress sem um plugin

Como mencionamos anteriormente, o WordPress, por padrão, permite o carregamento lento para todas as imagens com dimensões definidas. Você não precisa ativar nada ou adicionar nenhum código para fazer isso. No entanto, pode haver momentos em que você deseja personalizar como essa funcionalidade funciona.

Por exemplo, digamos que você não deseja incluir imagens de modelo. Você adicionaria este código ao seu arquivo functions.php :

 function disable_template_image_lazy_loading( $default, $tag_name, $context ) { if ( 'img' === $tag_name && 'wp_get_attachment_image' === $context ) { return false; } return $default; } add_filter( 'wp_lazy_loading_enabled', 'disable_template_image_lazy_loading', 10, 3 );

Ou talvez você queira ser super granular e desativar o carregamento lento para imagens específicas. Você pode fazer isso atribuindo uma classe de imagem extra a cada imagem quando adicionada a uma página ou postagem e, em seguida, adicionando essa classe ao seguinte código em seu arquivo functions.php :

 function skip_loading_lazy_image_48_large( $value, $image, $context ) { if ( 'the_content' === $context ) { $image_url = wp_get_attachment_image_url( 48, 'medium' ); if ( false !== strpos( $image, ' src="' . $image_url . '"' )) { return false; } } return $value; } add_filter( 'wp_img_tag_add_loading_attr', 'skip_loading_lazy_image_48_large', 10, 3 );

Para adicionar a classe de imagem skip-lazy no exemplo acima a uma imagem:

1. Adicione a imagem à página ou poste por meio da Biblioteca de mídia.
2. Depois de adicionar a imagem, encontre suas configurações de imagem. Isso pode aparecer de forma diferente dependendo se você estiver usando o editor Gutenberg Blocks, o editor clássico ou um plug-in do construtor de sites. A capacidade de adicionar uma nova classe CSS geralmente é encontrada na área de configurações avançadas (Gutenberg e editores clássicos) ou na parte inferior das opções de configurações de imagem (a maioria dos outros criadores de sites).
3. Adicione a classe skip-lazy à imagem e salve sua atualização.

Você pode aprender mais sobre as possibilidades na documentação do WordPress.

Como carregar vídeos lentamente no WordPress

Se você deseja carregar lentamente seus vídeos, pode fazê-lo adicionando código ao próprio vídeo na postagem ou na página. Este código deve se parecer com isto:

 <video controls preload="none" poster="one-does-not-simply-placeholder.jpg"> <source src="one-does-not-simply.webm" type="video/webm"> <source src="one-does-not-simply.mp4" type="video/mp4"> </video>

Perguntas frequentes sobre carregamento lento no WordPress

Quer saber mais sobre o carregamento lento do WordPress? Respondemos algumas perguntas frequentes abaixo:

O carregamento lento e o adiamento de imagens fora da tela são a mesma coisa?

Adiar as imagens fora da tela significa esperar para carregar as imagens até que o restante do conteúdo crítico acima da dobra seja carregado. Existem várias maneiras de fazer isso, mas os sites WordPress geralmente usam carregamento lento.

Essencialmente, o carregamento lento é um método de adiar imagens fora da tela.

Posso carregar imagens de plano de fundo preguiçosamente no WordPress?

Sim, você pode carregar imagens de plano de fundo preguiçosamente, se desejar. O Jetpack Boost ativa o carregamento lento para imagens de plano de fundo. No entanto, dependendo de como suas imagens estão configuradas, pode não ser possível identificar todas elas. Por exemplo, se a imagem for carregada através da propriedade background:url, o plug-in não a lerá como uma imagem e, portanto, não habilitará o carregamento lento para ela.

Nessa situação, você pode usar uma ferramenta como o Lazy Loader, que permitirá selecionar as imagens de fundo específicas que você deseja carregar lentamente.

Posso carregar lentamente um vídeo do YouTube?

Sim você pode! Para fazer isso, insira o seguinte trecho de código do WPOrbit no arquivo functions.php do seu tema. Se você não tiver certeza de como fazer isso, confira nosso guia para acessar e editar o arquivo functions.php .

 <?php // Do not include the above opening tag. // WPOrbit code for lazy loading youtube videos. Visit: https://wporbit.net function iframelazy($content) { if(is_single()) { $content = str_replace('src="https://www.youtube.com/embed/','class="klazyiframe" data-src="https://www.youtube.com/embed/',$content); ob_start(); ?> <script> var ytflag = 0; var myListener = function () { document.removeEventListener('mousemove', myListener, false); lazyloadmyframes(); }; document.addEventListener('mousemove', myListener, false); window.addEventListener('scroll', function() { if(ytflag == 0){ lazyloadmyframes(); ytflag = 1; } }); function lazyloadmyframes(){ var ytv = document.getElementsByClassName("klazyiframe"); for (var i = 0; i < ytv.length; i++) { ytv[i].src = ytv[i].getAttribute('data-src'); } } </script> <?php $jqueryappend = ob_get_contents(); ob_end_clean(); } return $content.$jqueryappend; } add_filter('the_content', 'iframelazy');

O carregamento lento afeta o SEO?

Sim, o carregamento lento pode ter um impacto positivo nas classificações do seu mecanismo de pesquisa. O Google considera a velocidade do site ao decidir a classificação das páginas nos resultados de pesquisa. E como o carregamento lento melhora o desempenho, ele também pode aumentar a percepção do Google sobre seu site.

Se você fizer isso manualmente, em vez de usar um plug-in de carregamento lento, e cometer um erro, isso pode ter um impacto negativo no SEO, dificultando a capacidade dos mecanismos de pesquisa de reconhecer suas imagens.

O carregamento lento afeta a experiência do usuário?

Sim, o carregamento lento pode melhorar a experiência do usuário porque reduz o tempo de carregamento do seu site, ao mesmo tempo em que garante que os visitantes possam visualizar seu conteúdo imediatamente. Isso, por sua vez, pode melhorar a percepção que eles têm da sua marca.

Preciso de um plug-in para carregar lentamente meu conteúdo?

Não, você não precisa de um plug-in para carregar lentamente seu conteúdo. O carregamento lento é ativado no WordPress por padrão. No entanto, se você deseja mais controle sobre o processo de carregamento lento, pode usar um plug-in. Aqui está uma seleção dos melhores plugins de carregamento lento para WordPress.

Existe uma desvantagem no carregamento lento de conteúdo?

Não há muitas desvantagens no carregamento lento de conteúdo. Ele melhora sua velocidade, experiência do usuário e classificação nos mecanismos de pesquisa. No entanto, ocasionalmente pode causar mudanças estranhas nos layouts de página. Portanto, você sempre deve testar seu site depois de habilitar o carregamento lento.

Preciso carregar lentamente todo o meu conteúdo?

Não, você não precisa carregar lentamente todo o seu conteúdo. Você pode optar por carregar lentamente apenas elementos específicos, como imagens, vídeos ou iFrames.

O que mais posso fazer para melhorar as velocidades de carregamento?

Além do carregamento lento, existem várias outras maneiras de melhorar a velocidade do seu site WordPress, incluindo:

• Usando uma rede de entrega de conteúdo (CDN)
• Concentrando-se em melhorar as mesmas coisas que também melhoram os Core Web Vitals.
• Otimizando suas imagens
• Ativando o cache do navegador
• Minimizando recursos

Acelere seu site com carregamento lento do WordPress

O carregamento lento de suas imagens é uma ótima maneira de otimizar o desempenho do seu site e melhorar a experiência geral do usuário. O Jetpack Boost oferece a maneira mais conveniente e robusta de permitir o carregamento lento, além de fornecer outras ferramentas de velocidade poderosas. Pronto para começar? Obtenha o Jetpack Boost!