Netflix: entenda como a empresa voltou às origens da internet para decolar em performance

Publicado em 08/11/2018

Netflix: entenda como a empresa voltou às origens da internet para decolar em performance


Diferente dos contos de fada, na internet, não há balas de prata relacionadas à performance. 

Simplesmente porquê servir páginas estáticas ao usuário sempre terá uma grande diferença na performance para àquelas que são servidas dinamicamente.

Isto quer dizer que, quando você entra no site, ele já está carregado. E não precisa ficar toda hora "atualizando" para você, dependendo de servidor e banco de dados. 

É justamente isto que o Netflix fez: a empresa voltou às origens da internet para decolar em performance e manter o seu marketing e acessibilidade incrível.

Quer saber como a empresa fez isso e por que está apostando neste modelo?

Então você não vai perder nosso post abaixo!

Resultados

Vamos começar este post pelo fim: o que a empresa conseguiu inovando ao publicar o netflix.com?

Ao realmente refinar e minificar os arquivos utilizados no processo de inscrição no Netflix, a equipe de desenvolvedores da empresa conseguiu oferecer uma experiência melhor ao usuário (tanto desktop quanto mobile) ao oferecer várias melhorias como:

  • O carregamento e o tempo de interatividade diminuíram em 50% (na página inicial da área de trabalho desconectada no Netflix.com)
  • Diminuiu em 200kB o carregamento dos arquivos do site ao mudar de bibliotecas utilizadas, utilizando só o lado do cliente (sem servidor)
  • A pré-busca de HTML, CSS e JavaScript reduziu o tempo de interação em 30% para futuras navegações

O que isto quer dizer? 

O que a empresa fez

Para renderizar rapidamente o seu site, o Netflix utiliza uma biblioteca chamada React, criada pelo time de desenvolvedores do Facebook. 

Para quem não conhece, é uma biblioteca em javascript que permite criar interfaces de usuários com foco na performance para sites na internet. A empresa utiliza do lado servidor para entregar páginas HTML dependendo da ação que o usuário realiza no site.

A página que mais demandava da equipe de desenvolvimento os desafios da performance é esta (que todo mundo conhece):

1_T_bJaPmnB7Muy1Vw67CBqg.png

Analisando com ferramentas do próprio navegador (como o Chrome Dev Tools), os desenvolvedores descobriram que os usuários estavam levando mais de 7 segundos em uma conexão 3G para "desconectar" da página principal

O que era tempo demais (na opinião deles) para apenas uma página de destino simples.

A empresa, então, tentou tirar toda a "interatividade" que entrega para os usuários, através de scripts e requisições, mantendo só a origem da internet: HTML, CSS e (muito pouco) Javascript.

Ao fazer isto, a empresa percebeu que as ações primordiais como:

  • Interações básicas (guias na metade da página inicial)
  • Idiomas
  • Banner de cookies (para visitantes não americanos)
  • Logs 
  • Medição de desempenho e registro
  • Ferramentas de anúncio

Ainda estavam funcionando!

Mesmo que o site já estivesse otimizado, removendo várias bibliotecas e mantendo só o essencial, a empresa conseguiu uma redução de mais de 50% no tempo de interatividade da Netflix, ou seja, agora o site carrega em 3.5 segundos em uma conexão 3G!

Para melhorar ainda mais o desempenho ao navegar na página inicia, o Netflix ainda resolveu entender o comportamento dos usuários: os engenheiros começaram a analisar o que os clientes mais acessavam quando iam para outra página.

Entender este comportamento foi crucial para chegar em sua segunda grande tática de performance: carregar antecipadamente o que a próxima página iria mostrar.

Redução do tempo em 30% na primeira interação

Isto a empresa conseguiu utilizando duas técnicas: acesso ao navegador e fazendo a pré-busca de HTML, CSS e JS do que o usuário iria acessar na próxima página. 

Adicionado alguns links com o código <link rel=prefetch>, portanto, o tempo para a primeira interação diminuiu em 30%. Essa implementação também não exigia nenhuma complexidade técnica pesada e não afetou negativamente o desempenho da página inicial desconectada e, portanto, oferecia uma ferramenta valiosa para melhorar o desempenho da página com um risco muito baixo.

Pontos interessantes sobre esta descoberta:

  • A empresa não utilizou nenhuma tecnologia do lado servidor para melhorar sua performance. Simplesmente diminuiu o número de arquivos carregados e já antecipou a ação do usuário pré-carregando recursos que ele iria acessar, otimizando a sua próxima busca.

  • A página inicial do Netflix é muito interativa e utiliza poucos recursos que realmente exigem que seja "dinâmico" no lado do servidor, o que ajuda a empresa escalar o número de usuários e acessos facilitando a interatividade e entrega de qualidade para todos.

Conclusão

No post de hoje mostramos como o Netflix voltou às origens da internet para decolar em performance.

Gostou do conteúdo? Então compartilhe com seus amigos e colegas.

Ficou com alguma dúvida? Deixe um comentário abaixo que ficarmos felizes em respondê-lo.

Sobre a Netzei

A Netzei é um SaaS CMS que reúne em um só lugar o gerenciamento de conteúdo e publicação completa de todas suas soluções digitais, como sites, blogs ou landing pages, descentralizando o gerenciamento de conteúdo e publicando-a em uma CDN global para times, empresas e agências.

Utilizamos o poder da API e integrações para escalar sua estratégia digital, economizando milhares de horas com a instalação de ambiente para produção de sites, servidor de hospedagem, escalabilidade, performance e segurança. 

Quer saber mais? Acesse: https://netzei.com


Inscreva em nossa newsletter

Acompanhe todos nossos conteúdos!

Enviamos os melhores conteúdos para o seu e-mail

Periodicamente realizamos um sorteio para quem nos acompanha!

Periodicamente realizamos um sorteio para quem nos acompanha!