Vídeo de carregamento lento no WordPress

Publicados: 2022-04-28

Precisa carregar lentamente o vídeo no WordPress?

A mídia é uma estratégia tão impactante para tornar seu conteúdo interessante.

Coisas como imagens e vídeos podem realmente dar vida ao que você tem a dizer em seu site.

A única desvantagem disso é que os arquivos de mídia são grandes e demoram mais para carregar do que apenas texto.

Se você usa o WordPress há algum tempo e colocou alguma ênfase na otimização de velocidade e em garantir que todas as suas páginas da web sejam carregadas o mais rápido possível, provavelmente já ouviu falar de carregamento lento.

O que no mundo é Lazy Loading?

O carregamento lento é o processo de atrasar o carregamento real do conteúdo até que ele se torne visível na janela de visualização do visitante. A janela de visualização é a área no navegador que o visitante está visualizando enquanto percorre sua página da web.

Existem muitos plugins do WordPress disponíveis que permitem que você carregue as imagens com preguiça em todas as páginas do seu site. Isso significa que, se você tiver imagens mais abaixo em uma página da Web, elas não serão totalmente carregadas até que o visitante entre em contato com essa área da página.

Esse processo é extremamente poderoso para acelerar o tempo de carregamento de uma URL em seu site.

Existem dois fatores principais quando uma página da web está carregando em relação ao tempo real que leva. Este é o tempo de carregamento e o tempo de carregamento completo.

Por favor, veja a explicação abaixo de qual é a diferença entre cada um.

O que é o tempo de carregamento?

O Onload Time calcula a velocidade quando o processamento da página é concluído e todos os recursos dessa página específica, como imagens, CSS e outras funcionalidades, terminam o download.

Depois de concluída, a página acionará window.onload para concluir os resultados de velocidade. Onload Time é uma representação verdadeira de quão rápido seu site carregará corretamente.

No entanto, uma grande falha encontrada com o Onload Time é que alguns elementos do carregamento da página podem não chegar a tempo antes que o evento de disparo seja disparado, como arquivos Javascript, carrosséis de imagens ou funcionalidade/conteúdo definido com um atraso de tempo, portanto, cargas em uma determinada ordem.

Essas variáveis ​​causarão tempos de carregamento de página inconsistentes e podem até informar falsamente que seu site é mais rápido/lento do que realmente é.

O que é tempo totalmente carregado?

Tomando o que aprendemos sobre 'Onload Time', 'Fully Loaded Time' adota exatamente o mesmo processo para registrar a velocidade da página, mas adicionará mais dois segundos após o disparo do gatilho 'Onload' para garantir que não haja mais atividade de rede. O raciocínio por trás disso é garantir mais consistência com os testes.

Um possível problema com o teste de tempo de carregamento total é que esse evento é acionado somente quando uma página para completamente de carregar conteúdo, incluindo anúncios e outras funcionalidades.

Portanto, se o seu site foi carregado antes do ponto de corte e ainda pode ser usado, a ferramenta de teste ainda aguardará que todo o site pare de carregar os dados, o que novamente pode levar a resultados de teste de velocidade inconsistentes.


Você está no controle total do seu tempo de carregamento?

Abaixo está um gráfico simples e agradável para ilustrar as coisas que você precisa considerar quando um site é visitado e todas as peças que se juntam para decidir a rapidez com que ele carrega.

LazyLoad Video on WordPress

Como você pode ver nesta imagem acima, existem algumas coisas que estão fora do seu controle. Por exemplo, a velocidade do provedor de serviços de Internet da pessoa que visita seu site está completamente fora de seu controle.

Se você deseja extrair o máximo de velocidade possível do seu site WordPress, você precisa se concentrar nas coisas sobre as quais você tem controle.


Otimização de velocidade do WordPress Coisas sobre as quais você tem controle

WordPress Speed Optimization
  1. Ambiente de hospedagem
  2. Atualizações de software
  3. Tema ativo
  4. Plug-ins ativos
  5. Otimização de Conteúdo

Vamos voltar ao vídeo de carregamento lento no WordPress

Então, na lista acima sobre as coisas de otimização de velocidade do WordPress que você tem controle sobre o último item da lista é a otimização do conteúdo.

Isso significa garantir que todo o conteúdo do seu site foi otimizado para carregar o mais rápido possível sem alterar nenhuma funcionalidade ou exibição do conteúdo.

Vamos ver isso em detalhes e nos permitir mostrar a diferença de velocidade de um vídeo que foi tradicionalmente incorporado como a maioria das pessoas faz em seu site e um vídeo que foi configurado para carregamento lento.

A experiência começa aqui

Seguimos em frente e criamos uma instalação padrão do WordPress e dentro dela para separar as páginas.

Uma página tem um vídeo do YouTube incorporado que foi incorporado usando a opção de incorporação nativa do WordPress, simplesmente colocando o link para o vídeo do YouTube no editor Gutenberg. Isso gera o vídeo do YouTube incorporado na página.

A segunda página é o mesmo vídeo, mas configura um carregamento muito lento, o que significa que o código do vídeo real não será ativado e começará a ser executado até que o visitante pressione o botão play.

Dê uma olhada abaixo nas diferenças impressionantes entre os dois processos de exibição de um vídeo em seu conteúdo do WordPress.

Exemplo de página de vídeo incorporado

Lazy Load Video on WordPress
VÍDEO TRADICIONAL INCORPORADO

A imagem abaixo é o teste de visualização de velocidade feito no GTmetrix da página que tinha o vídeo tradicional do YouTube incorporado.

Por favor, preste muita atenção ao tempo de carregamento e ao tempo de carregamento completo abaixo.

LazyLoad Video on WordPress Embedded Video
TESTE DE CARGA DE VELOCIDADE
Lazy Load 2
TESTE DE CARGA DE VELOCIDADE

A imagem abaixo é uma lista de processos que aconteceram durante o carregamento desta página. Por favor, tome nota da quantidade total de pedidos.

LazyLoad Video on WordPress Embedded Video Waterfall
CACHOEIRA DE TESTE DE VELOCIDADE

Exemplo de página de vídeo de carregamento lento

Lazy Load Video on WordPress
VÍDEO TRADICIONAL INCORPORADO

A imagem abaixo é o teste de visualização de velocidade feito no GTmetrix da página que tinha o vídeo embutido de carregamento lento.

Por favor, preste muita atenção ao tempo de carregamento e ao tempo de carregamento completo abaixo. Isso é menos de 1 segundo para o tempo de carregamento e comparação com mais de 1 para o vídeo tradicionalmente incorporado.

O tempo de carregamento total também é inferior a 1 segundo em comparação com o tempo de carregamento total de mais de 3 segundos do vídeo tradicionalmente incorporado.

LazyLoad Video on WordPress Video
TESTE DE CARGA DE VELOCIDADE
Lazy Load
TESTE DE CARGA DE VELOCIDADE

Você pode ver na cascata de teste de velocidade abaixo que há 21 solicitações a menos sendo chamadas quando a página está carregando porque carregamos a incorporação de vídeo com preguiça.

Uma das melhores coisas que você pode fazer para acelerar qualquer página da Web é diminuir a solicitação. Quanto mais solicitações uma página precisar para carregar significa que levará mais tempo.

Os scripts e os estilos necessários para carregar o player de vídeo ainda ocorrerão, mas não até que o visitante aperte o botão play no vídeo.

Isso é extremamente poderoso, pois imagine se um visitante acessar sua página e nem mesmo reproduzir o vídeo, significa que você está carregando recursos que nunca serão usados ​​pelo visitante.

LazyLoad Video on WordPress Video Waterfall 1
CACHOEIRA DE TESTE DE VELOCIDADE

Agora você sabe que o Lazy Load Video no WordPress é bom… E A SEGUIR?

Já explicamos anteriormente que existem muitos plugins do WordPress que permitem que você carregue as imagens em seu site com preguiça, mas não há muitos plugins que permitem fazer isso para vídeos.

Os únicos plugins GRATUITOS reais focados no carregamento lento de vídeos em seu site WordPress são o plugin Lazy Load for Videos e o a3 Lazy Load, sobre os quais você pode aprender mais clicando nas imagens abaixo.

Lazy Load for Videos
Lazy Load for Videos 1

Existem alguns plugins adicionais de otimização de velocidade que incluem essa funcionalidade que permitirá que você carregue vídeos do YouTube ou iFrames com preguiça. Veja os nomes desses plugins abaixo.

  1. Swift Performance Pro
  2. WP Foguete

Plugins não fazem vídeo de carregamento preguiçoso no WordPress

Na maioria dos casos, você poderá usar um desses plugins mencionados acima para carregar o vídeo lentamente no WordPress. No entanto, existem situações em que o que você está tentando carregar lentamente não é compatível com as funções do que esses plugins oferecem.

Esses plugins WordPress de carregamento lento para vídeos geralmente se integram apenas ao YouTube e ao Vimeo. Existem muitas outras soluções de hospedagem de vídeo por aí que você pode estar usando.

É aqui que temos uma solução alternativa que permitirá que você pegue qualquer trecho de código iFrame e o transforme em uma obra-prima de carregamento lento em seu site.


Ferramenta GRATUITA SUPER LEGAL para carregar vídeo com preguiça no WordPress

Existe uma ferramenta on-line super legal, fácil e gratuita, onde você pode pegar qualquer URL habilitado para iFrame e configurar um trecho de código que será carregado lentamente.

Esse pedágio se chama IFRAMELY e pode ser usado gratuitamente em https://iframely.com/embed

A imagem abaixo é uma captura de tela da ferramenta de incorporação a IFRAMELY que ajudará você a gerar o código de incorporação necessário para colocar em seu site e carregar o vídeo no WordPress.

Lazy Load Video on WordPress
FERRAMENTA IFRAMELY LAZY LOAD INCORPORADA

Apenas Encerrando

Esperamos que este post tenha sido útil e tenha ajudado você a entender o aumento de velocidade que pode ser alcançado em seu site WordPress quando você decide carregar com preguiça qualquer vídeo que esteja usando em seu conteúdo.

Se você tiver alguma dúvida sobre o que foi discutido aqui, sinta-se à vontade para comentar abaixo.