Palestra sobre dicas e lições aprendidas da ResultadosDigitais sobre performance no frontend no desenvolvimento do RDStation.

1. Otimizando a
performance do front-end
em uma aplicação real

2. ANDRÉ JUNIOR
Full stack engineer
@andrehjr
andre.junior@resultadosdigitais.com.br

5. 1.52M+ de requests
~3 segundos

6. 3.5M+ de requests
~2 segundos

7. Net flix gain

8. Performance é a feature
mais importante.

9. NO FRONT-END?

10. PERCEPÇÃO HUMANA

11. Tempo de primeira resposta

12. Tempo de primeira resposta

13. Tempo de primeira resposta

14. https://developers.google.com/web/fundamentals/performance/critical-rendering-path/

15. MELHOR ENGAJAMENTO

16. MAIOR RETENÇÃO
DE USUÁRIOS

17. MAIS CONVERSÕES

18. Como eles se sentem?

19. SPEED MATTERS

20. MÉTRICAS

21. REAL USER
MONITORING (RUM)

22. DEFINIR METAS

24. Requisição http

25. Requisição http

26. Requisição http

27. Requisição http

28. Critical Rendering Path

29. Critical Rendering Path

30. DO NOT BLOCK!

31. FIRST RENDER
~600ms

32. CARREGUE SOMENTE
O NECESSÁRIO

33. CARREGUE TODO O RESTO
ASSINCRONAMENTE

34. <script />

35. <script async />

37. INLINE CRITICAL CSS

39. REDES LENTAS

40. JÁ TESTOU SEU SITE EM UMA 3G?

42. REDUZIR REQUESTS
AO SERVER

43. MINIFICAR
JAVASCRIPT / CSS

44. IMAGENS EM SPRITE

45. GZIP

46. USE CONTENT DELIVERY
NETWORK (CDN)

47. PRE-FETCH / DNS-PREFETCH
/ PRE-RENDER

48. Quick wins

49. UNCSS

50. NGX_PAGESPEED

51. HTTP 2.0/SPDY

52. FERRAMENTAS

53. Page speed Insights
NewRelic
Google Analytics
http://stevesouders.com/cuzillion/
> performance.timing
Google Web tools

54. REFERÊNCIAS

56. HANDS-ON!

61. RESUMO

62. Carregue inicialmente somente
o que você precisa

63. Não bloqueie o critical rendering path
(usuários não gostam de ver uma tela em branco)

64. Conheça a sua aplicação, ajude o browser!

65. Mais performance, economizando recursos!
(R$$$$)

66. Tenha métricas de
cada mudança

68. QUESTIONS?
@andrehjr
andre.junior@resultadosdigitais.com.br
shipit.resultadosdigitais.com.br
We're hiring! ;)