Técnicas de Como Melhorar a Performance de uma Página com Vídeo!

Que sou fissurado por otimização de sites e páginas, isso praticamente todo mundo sabe, afinal já compartilhei diversas técnicas sobre como otimizar a performance de uma página.

Porém, na última semana, enquanto auxiliava um cliente que abrir o carrinho de vendas de seu programa de coach, pude perceber um item que nunca antes tinha pensado que pudesse ser performado.

Se você ainda não otimiza a performance de sua página de vendas, está perdendo dinheiro, e MUITO, se duvida olha isso artigo sobre o 1,6 bilhão que Amazon perdia por causa de 1 segundo de atraso de suas páginas.

Então enquanto realizava a otimização da página de vendas dele percebi que o Video era o que mais estava atrapalhando e atrasando o carregamento da página.

O pior que não era um atraso de alguns segundos mínimos, eram 22,3 segundos de atrasos, só o vídeo.

Técnicas de Como Melhorar a Performance de uma Página com Vídeo! | Como Melhorar a Performance de uma Pagina com Video Imagem Supresa

Como Fiquei ao Descobrir Isso.

Logo, o que tinha a fazer era ficar a madrugada inteira em testes, até finalizar a otimização da página e deixar ela carregando em 3,1 segundos.

Foi então que me toquei que até o vídeo da página pode ser otimizado, e que nunca antes tinha ouvido falar sobre tal necessidade.

Então me internei um dia inteiro a estudar sobre vídeo online e tudo que envolvia o tempo de carregamento na página. E me deparei com uma lista do tamanho da música Faroeste Caboclo de elementos que fazem parte no momento de colocar o vídeo em uma página.

Sendo que hoje trago a você os resultados dessa minha pesquisa de forma simples, prática e resumida.

O Conceito

Quando comecei a estudar sobre videos, a primeira coisa que descobri é que existe 3 fatores que se relacionam no momento de carregar o video na página.

Esses 3 fatores são:

  1. Hospedagem de Video, aonde eles se encontra, o local que foi feito o upload (Exemplo: YouTube, Vimeo ou outro Video Host).
  2. Tempo de Resposta do Servidor do Video, o tempo que demora a requisição que sua página faz até ser retornado o conteúdo, que no caso é o seu video lindo.
  3. Player de Reprodução do Video, o código que estará interpretando o arquivo do video para ser reproduzido na página.

Claro que existe vários outros fatores antes, no meio e depois desses três, porém esses são em tese os principais fatores que influenciam no momento de usar um video.

Logo estarei explicando e apresentando a você os dados que obtive nesses fatores.

1º Hospedagem de Video – Video Host

Existem diversas plataformas e empresas que trabalham com hospedagem de videos, lógico que a mais conhecida e popular é o pequeno garoto do Google chamado YouTube.

Que é uma rede social de vídeos, mas que na real é um site de hospedagem de video gratuita também, existe várias outras tais como VimeoDailyMotion e etc.

Então resolvi começar testando justamente primeiramente as hospedagens de videos, juntamente com seus players padrões (um pouco do 3º fator).

Para isso busquei as principais empresas de hospedagem de videos que com alguns pequenos testes foram plausível de ser testadas e também as que tem foco em marketing e/ou serviço empresarial.

E nisso escolhi então os seguintes sistemas:

Existe infinitas outras, tanto que se você conhecer algum e quiser contribuir para edificar esse conteúdo, deixe nos comentário o nome que será um prazer testar.

Todos os testes foram executados no mesmo ambiente e mesmo site, sendo uma página em branco, contendo somente um video de 18 segundos com o tamanho de 7,6 mb.

Bom, para facilitar a visualização fiz uma tabela com os testes, e logo após estarei explicando os dados que contem na tabela.

PlataformaTeste 1 (s)Teste 2 (s)Teste 3 (s)Média (s)
FlowPlayer3,84,33,73,93
JWPlayer7,74,43,15,07
Vimeo5,52,51,43,13
YouTube4,21,72,32,73

 

Como pode ver na tabela, executei 3 vezes o mesmo teste em cada plataforma, para que pudesse tirar como base uma média por segundo para ser usada considerada real.

Sendo assim, de inicio me surpreendi com o YouTube sendo o grande campeão, afinal ele obteve quase a metade do pior que até então é o JWPlayer.

Mas espere ae, antes de sair correndo para o YouTube, pois após realizar esse teste me toquei de um tópico muito importante.

Esses dados são os tempos de carregamento da página com o video, ou seja é o tempo de carregamento do player com o video, e não do video em si.

Como assim?

Bom, deixa eu te explicar melhor, sempre que um video é carregado, ele apenas está na página, porém existe o tempo do play, ou seja, o video é realmente carregado somente após clicar no play (ou ativo pelo autoplay), e passar o primeiro segundo do video em reprodução.

Se você não entendeu ainda o que seria, segue um rápido video abaixo com um exemplo e explicação em cada passo.

Então, como pode ver, antes mesmo da reprodução tem o tempo de play que também deve de ser considerado, logo, fui então fazer o cálculo do tempo de play de cada plataforma.

PlataformaMédia de Carregamento (s)Tempo do Play (s)Tempo Final (s)
FlowPlayer3,930,043,97
JWPlayer5,070,025,09
Vimeo3,131,014,14
YouTube2,732,084,81

E assim então termina o nosso primeiro teste do quanto tempo demora para que um video seja carregado e exibido para o visitante na página, e como pode ver, aqui temos que o nosso suposto 3º colocado anteriormente, na real no final foi o 1º no carregamento.

Sendo assim, se você pensar na performance da sua página, e não quer brigar com o video, a melhor opção é o FlowPlayer.

Massss, hehe espera ae, vamos mais a fundo nisso, resolvi buscar entender o por que ele foi primeiro, e assim cai no segundo fator, que é…

Tempo de Resposta do Servidor do Video

Esse teste é o mais simples de executar, pois basta você fazer o download do video diretamente do servidor que está hospedado, e verificar qual é a velocidade com o qual ele faz o download.

Mas você pode pergunta “Mas isso não depende da velocidade da internet da pessoal”.

E a resposta é sim e não, mas calma vamos lá.

A resposta é sim, pois isso pode ser afetado realmente devido a velocidade da internet, porém, o não vem por que estamos utilizando como base, sendo assim, mesmo que tenha uma certa variação da velocidade de download, é aceito.

Uma coisa é fato, sendo em um 3g ou em um fibra ótica de 100mb o teste, a velocidade com a qual o arquivo será baixado depende mais da velocidade do servidor de hospedagem de video do que de sua conexão.

Logo, sendo assim, testando o download dos videos, o que baixa antes no 3g será o mesmo que será baixo antes na fibra, com a diferença de tempo com o qual foi feito o download.

Para entender melhor aqui vai um exemplo, se você baixar um arquivo de 10mb de 3 servidores diferentes no 3g, digamos que você tenha os tempos de:

Servidor 11 minuto e 8 segundos
Servidor 259 segundos
Servidor 32 minutos e 15 segundos

(Valores Hipotéticos)

Logo se você baixar pela fibra, ainda assim o servidor 2 será o campeão, com a diferença que poderá baixar em 2 ou 3 segundos invés de 59 segundos.

Sei que pode parecer um pouco difícil ou até mesmo confuso de inicio de entender, por isso se você teve algum dificuldade, deixa seu comentário que será um prazer responder você.

Bom, continuando, novamente testando agora o tempo de download dos videos, eu descobri que enquanto o FlowPlayer baixou o arquivo em 2,6 segundos o JWPlayer baixou em 1,3 segundos (não vou comentar o Vimeo e YouTube por que foi constrangedor de certa forma o tempo deles).

Técnicas de Como Melhorar a Performance de uma Página com Vídeo! | %name

Como isso se o JWPlayer foi o com pior resultado anteriormente.

Coisa de louco isso né, pois esses são os tipos de coisas que gosto de brincar, e ir a fundo (devo ter algum problema, só pode rsrs).

Bom, deixa eu te explicar agora o que houve, é que agora entra em consideração um pouco do terceiro fator para entender como o primeiro pode ser pior que o último.

Player de Reprodução do Video

Logo de cara percebi então que o problema da demora para carregar o video do JWPlayer não era o servidor que está hospedado o video e sim o seu player que era muito pesado e demorava a carregar.

E logo o player do FlowPlayer era mais rápido, que compensava a demora do tempo de resposta, o que tornaria supostamente ele o primeiro da nossa tabela anteriormente.

Ao chegar aqui, então busquei os principais player de reprodução de video na internet para testa-los juntamente com o arquivo do video hospedado no JWPlayer.

Para descobrir se teria alguma relação realmente o player com a performance com que um video era carregado na página.

E os que achei de maior relevância e utilizados foram:

Nesse momento descartei o player do próprio JWPlayer, justamente por que no teste anterior já percebemos que ele era pesado.

Todos esses player são de fácil aplicação, coisa de poucas linhas de HTML, que até mesmo quem não tem conhecimento algum pode usar tranquilamente.

Para realizar os testes dos players, segui o mesmo processo que utilizei anteriormente, porém com a diferença que agora invés de usar cada plataforma com seu player, estou usando o arquivo hospedado no JWPlayer em cada um deles.

E os resultados foram surpreendentes, confira a tabela abaixo:

PlayerTeste 1 (s)Teste 2 (s)Teste 3 (s)Média (s)
Clappr2,72,11,62,13
FlowPlayer11,11,51,2
Plyr1,521,92,1
VideoJS2,122,32,13

 

Show de bola os resultados, ae vem aquele momento felizão, pô achei o melhor jeito colocar um vídeo em uma página, basta usar o JWPlayer como hospedagem com o FlowPlayer como reprodutor.

Mas novamente, não vá se precipitando, lembra do item predominantes para fazer o YouTube ir de primeiro para penúltimo??

Exatamente, o tempo do play hehe, aqui ele também se aplica, então vamos lá para os resultados.

PlayerMédia de Carregamento (s)Tempo do Play (s)Tempo Final (s)
Clappr2,130,022,15
FlowPlayer1,22,123,32
Plyr2,10,032,13
VideoJS2,130,022,15

Agora sim você pode comemorar, aqui está o resultado final da melhor forma de colocar um video em uma página focado na performance.

Técnicas de Como Melhorar a Performance de uma Página com Vídeo! | Como Melhorar a Performance de uma Pagina com Video Imagem Comemoracao

O Grande Vencedor

Como pode ver, o FlowPlayer que até então estava indo bem, foi para último.

Por ser cada vez mais comum esses tipos de reviravoltas quando estou fazendo testes de performance, que só deixo para realmente comemorar após analisar todos os dados definitivos.

Pois aqui vemos então que para obter os melhores resultados focado em otimização da performance de uma página em consideração do elemento de video.

É recomendado você utilizar o seu video hospedado no JWPlayer sendo usado com o player Plyr, que ae sim você terá os melhores resultados.

Revisão do Conteúdo

Esse post foi um pouco mais técnico, por mais que tentei torna-lo o mais descontraído possível, sei que ainda assim terá algumas pessoas que possam ter dúvidas, logo aqui vai um resumão.

Hospedagem de Video

Plataforma a qual você faz o upload de seu video, que com os testes tivemos como vencedor o FlowPlayer, sendo utilizado com o player deles, é possível obter bons resultados.

Tempo de Resposta do Servidor

Tempo que leva para o servidor de hospedagem retornar o arquivo do video, aqui tivemos como vencedor o JWPlayer, com o tempo de 1,3 segundo ao solicitar o video na página.

Player de Video

O script que irá interpretar o video e tornar possível assisti-lo. Aqui para encerrar vemos que a utilização do player Plyr é a melhor opção, levando em consideração que seu tempo de play junto ao carregamento são mínimos.

O Grande Vencedor

Para obter a melhor performance utilizando um video em uma página, basta usar o JWPlayer hospedando o video juntamente ao Plyr como player.


Espero realmente ter ajudado você com todas essas informações da pesquisa que fiz sobre otimização de performance para video em paginas.

Qualquer dúvida que tenha, será sempre um prazer te responder pelos comentários ou então por email, se preferir.

Um grande abraço e nos encontramos por ae.

Técnicas de Como Melhorar a Performance de uma Página com Vídeo! | email
QUER APRENDA COMO COMEÇAR UM NEGÓCIO DIGITAL DO ZERO?
Preencha seu email e receba um ebook com os
4 Elementos Essenciais para Começar do ZERO!
Sim, Eu Quero!

Comentários

  1. Tu é foda Alan (no bom sentido). Parabéns. Agradeço por compartilhar e fico feliz de poder trabalhar com pessoas como você.

  2. Excelente artigo, só não sei se eu poderia colocar um vídeo de vendas no JwPlayer e usar o Plyer como player tem como fazer isso? se tem como eu poderia fazer?

6 Mais Comentários
QUER APRENDA COMO COMEÇAR UM NEGÓCIO DIGITAL DO ZERO?
Preencha seu email e receba um ebook com os
4 Elementos Essenciais para Começar do ZERO!
Sim, Eu Quero!