Portuguese, Brazilian subtitles

← Camerons Netflix Optimizations - Website Performance Optimization

Get Embed Code
6 Languages

Showing Revision 12 created 06/20/2016 by Udacity Robot.

  1. Então decidi olhar um dos meus sites favoritos,
  2. o Netflix. Vou abrir as ferramentas
  3. do desenvolvedor pressionando Cmd+Option+I. Ativar Emulation.
  4. E ir para a timeline. Farei uma atualização forçada
  5. pressionando Cmd+Shift+R. Podemos ver os eventos que acontecem enquanto
  6. a página é carregada. Vamos dar uma olhada nos primeiros.
  7. Enviamos uma requisição para a página inicial aqui. Este
  8. é o arquivo HTML necessário para carregar a página.
  9. Vamos rolar para baixo. Quando o arquivo HTML
  10. termina de ser carregado, analisamos o HTML. Vamos abri-lo.
  11. E vemos uma requisição para dois arquivos diferentes, ambos chamados include.
  12. Clicar no primeiro abre este arquivo CSS.
  13. Vou rolar para baixo, acho que podemos escolher duas otimizações
  14. bem óbvias apenas olhando este arquivo. A primeira otimização é
  15. para minimizar o CSS ou tirar todo o espaço
  16. em branco. O espaço em branco no arquivo apenas ajuda
  17. em sua leitura. Ele não ajuda o navegador a analisar o arquivo. Então,
  18. na verdade, se tirarmos todo o espaço em branco,
  19. removeremos uma quantidade significativa de bytes dos dados.
  20. A segunda otimização é embutir CSS crítico, e não é necessário
  21. enviar outra requisição para este arquivo CSS para definir o estilo desta página.