Ao otimizar sites de clientes, frequentemente descobrimos que vídeos incorporados são uma causa principal de lentidão no carregamento de páginas. O problema é que os navegadores carregam todo o player de vídeo imediatamente, mesmo que um visitante nunca clique no botão de reproduzir, o que pode prejudicar o desempenho do seu site.
A solução é o carregamento preguiçoso de vídeos (video lazy loading). Essa técnica simples substitui embeds de vídeo pesados por uma imagem de pré-visualização leve. Descobrimos que isso pode melhorar os tempos de carregamento de página em até 30% em páginas com muitos vídeos.
Se você deseja acelerar seu site WordPress sem remover seu conteúdo de vídeo, então você está no lugar certo. Mostraremos as maneiras mais fáceis e eficazes de adicionar carregamento preguiçoso para seus vídeos.
O que é Carregamento Preguiçoso para Vídeos e Como Funciona?
Carregamento preguiçoso é uma técnica que impulsiona o desempenho, atrasando o carregamento de partes não essenciais de uma página da web até que elas sejam realmente necessárias.
Normalmente, quando você incorpora um vídeo de um site como YouTube ou Vimeo, seu navegador precisa carregar todo o player de vídeo e todos os seus scripts associados. Isso adiciona peso extra à sua página e pode realmente diminuir o desempenho do seu site.
O carregamento preguiçoso de vídeos resolve esse problema substituindo o player de vídeo pesado por uma imagem de pré-visualização leve e clicável (uma miniatura). O player de vídeo completo só carrega depois que um visitante clica no botão de reproduzir na imagem.
Como as imagens são muito menores em tamanho do que os vídeos, a técnica de carregamento preguiçoso melhora significativamente a velocidade da página.
Dica de Especialista: Quer acelerar seu site, mas não tem certeza de como? Nossa equipe de especialistas pode lidar com tudo, desde auditorias completas de desempenho até configurações de cache, configuração de uma CDN e muito mais. Confira nossos Serviços de Otimização de Velocidade do Site hoje mesmo!
Agora que você conhece as vantagens, vamos ver como carregar vídeos do YouTube e Vimeo sob demanda no WordPress.
Tutorial em Vídeo
Se você prefere instruções escritas, continue lendo.
Como Adicionar Carregamento Preguiçoso para Vídeos no WordPress
Para adicionar carregamento preguiçoso para vídeos, a primeira coisa que você precisa fazer é instalar e ativar o plugin Lazy Load for Videos.
Este plugin funciona imediatamente, e você não precisará tocar em uma única linha de código.
E para ver se o seu carregamento preguiçoso está funcionando, tudo o que você precisa fazer é visualizar um post ou página que contenha um vídeo do YouTube ou Vimeo. Você notará que uma miniatura do vídeo e um botão de reprodução substituem os players padrão.
Quando você clicar na imagem, ela carregará o vídeo e o reproduzirá.
Você pode notar um pequeno atraso de um segundo quando o vídeo carrega, mas isso é totalmente normal. Não se preocupe; o carregamento preguiçoso está funcionando perfeitamente.
Agora, note que, embora este plugin funcione imediatamente, ainda existem configurações que você pode configurar com base em suas necessidades. Na tela do editor de posts, você pode escolher a qualidade da miniatura para incorporações de vídeo do YouTube.
Além da qualidade da miniatura, há outras opções de personalização disponíveis.
Você pode acessar Configurações » Lazy Load para Vídeos para verificar e reajustar essas opções.
Na aba ‘Geral/Estilo’, você pode personalizar a aparência das miniaturas de vídeo. Você pode ativar o modo responsivo, escolher o estilo do botão de reprodução, usar CSS personalizado e até mesmo ativar a marcação schema.org.
Este plugin suporta tanto YouTube quanto Vimeo. Você pode encontrar configurações específicas do provedor clicando nas respectivas abas.
Na aba ‘YouTube’, você pode escolher uma cor para a barra de progresso, desativar cookies, ocultar anotações e muito mais. Você pode até desativar o lazy load para vídeos do YouTube.
Da mesma forma, na aba de configurações do Vimeo você pode escolher as cores dos controles, ocultar ou exibir o título do vídeo e desativar o lazy load para vídeos do Vimeo.
Se você fez alguma alteração nestas configurações, não se esqueça de clicar no botão ‘Salvar Alterações’ na parte inferior para não perder seu progresso.
O WordPress possui carregamento preguiçoso (lazy loading) integrado para vídeos?
Você pode estar se perguntando se precisa de um plugin para isso, e essa é uma ótima pergunta. Desde a versão 5.5, o WordPress adiciona automaticamente uma forma básica de carregamento preguiçoso para vídeos. Ele instrui o navegador da web a esperar até que o vídeo esteja próximo da tela antes de carregá-lo.
No entanto, o método com plugin ainda é muito mais eficaz para velocidade. O plugin impede que o player de vídeo pesado seja carregado até que um visitante realmente clique no botão de reproduzir. O método integrado do WordPress ainda carrega o player inteiro, apenas um pouco mais tarde.
Para o maior aumento de velocidade, usar um plugin que substitui o vídeo por uma miniatura de pré-visualização é a melhor abordagem. 👍
Bônus: Sempre incorpore vídeos, nunca os carregue
Antes de mergulharmos no porquê você deve evitar carregar vídeos em seu site WordPress, vamos esclarecer a diferença entre uploads e incorporações.
Carregar um vídeo significa armazenar os arquivos de vídeo diretamente em seu site, semelhante a como você armazena imagens na biblioteca de mídia do WordPress. Desaconselhamos fortemente isso.
Por outro lado, incorporar um vídeo envolve primeiro carregá-lo em um site de terceiros como o YouTube. Em seguida, você incorpora o vídeo em seu blog, permitindo que ele seja visualizado em seu site enquanto é armazenado em outro lugar. Recomendamos fortemente incorporar vídeos sempre que possível.
Para saber mais sobre os benefícios de incorporar em vez de carregar vídeos no WordPress, você pode consultar nosso guia sobre por que você nunca deve carregar um vídeo para o WordPress.
Perguntas Frequentes sobre Carregamento Preguiçoso de Vídeos
Aqui estão algumas das perguntas mais comuns que nossos leitores têm sobre como adicionar carregamento preguiçoso para vídeos no WordPress.
1. O WordPress carrega vídeos preguiçosamente por padrão?
Sim, desde a versão 5.5, o WordPress inclui carregamento preguiçoso nativo para vídeos. No entanto, ele apenas espera para carregar o player de vídeo até que ele esteja perto da tela. Usar um plugin que substitui o vídeo por uma miniatura é muito mais eficaz para melhorar a velocidade.
2. O carregamento preguiçoso é bom para SEO?
Sim, o carregamento preguiçoso é excelente para SEO. A velocidade do site é um fator chave de classificação do Google. Ao acelerar suas páginas, o carregamento preguiçoso ajuda a melhorar suas pontuações de Core Web Vitals, o que pode levar a melhores classificações nos mecanismos de busca.
3. O carregamento preguiçoso de vídeos afetará minhas visualizações no YouTube ou Vimeo?
Não, isso não afetará suas contagens de visualização. Quando um visitante clica no botão de reprodução na imagem de pré-visualização, o player de vídeo oficial é carregado. A visualização é então contada pelo YouTube ou Vimeo como normalmente seria.
4. Qual é o melhor plugin para carregamento preguiçoso de vídeos?
Recomendamos o plugin 'Lazy Load for Videos' pela sua simplicidade e eficácia. Muitos plugins populares de desempenho, como o WP Rocket, também incluem excelentes recursos de carregamento preguiçoso de vídeo como parte de suas ferramentas de otimização de desempenho.
Recursos Adicionais para Acelerar Seu Site
Esperamos que este artigo tenha ajudado você a adicionar carregamento preguiçoso para vídeos no WordPress. Se você quiser aprender mais maneiras de tornar seu site mais rápido, recomendamos conferir estes guias:
- O Guia Definitivo de Velocidade e Desempenho do WordPress – Este guia abrangente cobre tudo o que você precisa saber sobre a otimização da velocidade do seu site, desde o cache até a compressão de imagens.
- Como configurar corretamente uma CDN do WordPress – Saiba como uma Rede de Distribuição de Conteúdo (CDN) pode melhorar drasticamente os tempos de carregamento do seu site para visitantes em todo o mundo.
- Por que você nunca deve enviar um vídeo para o WordPress – Uma análise mais aprofundada das razões pelas quais incorporar vídeos é sempre melhor para o desempenho do seu site e a experiência do usuário.
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Matt
Please update this article! I’m having a lot of trouble finding up to date information on how to achieve this
WPBeginner Support
Certamente daremos uma olhada em atualizar o artigo
Admin
Mike
O que acontece se você quiser reproduzir seus vídeos do YouTube em pop-ups em vez de na própria página. Você ainda pode usar este plugin?
Ferret do caos
Estou usando o Chrome com o plugin do Pinterest no Linux e o vídeo não está sendo reproduzido. Mesmo carregando a imagem em uma segunda aba não funciona. Vou desativar o plugin e ver se o vídeo funciona. E negativo, o vídeo ainda não está sendo reproduzido.
Rabbi Khan
Olá, tenho uma pergunta sobre a tag condicional do WordPress. No meu template, estou exibindo tags no rodapé das postagens na página inicial do WordPress. Então, como ocultar as tags na página inicial? E exibi-las apenas na página de postagem. Agradeço desde já.
John
Tenho um problema com este plugin. Quando clico na imagem, o vídeo começa a tocar na miniatura e também abaixo da miniatura.
DebG.
Então este plugin é responsivo? Ele funciona com temas responsivos?