O documento discute como otimizar o desempenho do front-end de uma aplicação real. Ele fornece dicas como carregar inicialmente apenas o necessário, não bloquear o caminho crítico de renderização e conhecer a aplicação para ajudar o navegador. Apresenta métricas para medir cada mudança e obter mais performance economizando recursos.

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

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

8. 1M+ de requests
~3 segundos

9. 10M+ de requests
~2 segundos

11. Responsividade

12. Usabilidade

15. PERCEPÇÃO HUMANA

16. Tempo de primeira resposta

17. Tempo de primeira resposta

18. Tempo de primeira resposta

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

20. MELHOR ENGAJAMENTO

21. MAIOR RETENÇÃO
DE USUÁRIOS

22. MAIS CONVERSÕES

23. Performance é a feature
mais importante.

25. MÉTRICAS

26. REAL USER
MONITORING (RUM)

27. DEFINIR METAS

28. FIRST RENDER
~600ms

29. Requisição http

30. Requisição http

31. Requisição http

32. Requisição http

33. ~80% do tempo
é gasto no Front-end.

34. Critical Rendering Path

35. Critical Rendering Path

36. Requisição http

37. Requisição http

38. DO NOT BLOCK!

39. REDES LENTAS

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

43. INLINE CRITICAL CSS

44. CARREGUE SOMENTE
O NECESSÁRIO

45. CARREGUE TODO O RESTO
ASSINCRONAMENTE

46. <script />

47. <script async />

49. REDUZIR REQUESTS
AO SERVER

50. IMAGENS EM SPRITE

51. MINIFICAR/CONCATENAR
JAVASCRIPT/CSS

52. GZIP

53. Net flix gain

54. USE CONTENT DELIVERY
NETWORK (CDN)

55. Cuidado com JS de
terceiros.

56. HTTP 2.0/SPDY

57. Processo de
renderização.

58. Janky Free

59. 60 FPS
~16ms por frame

61. Requisição http

62. Requisição http

66. Don't stop.

67. FERRAMENTAS

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

70. REFERÊNCIAS

72. RESUMO

73. Carregue inicialmente somente
o que você precisa

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

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

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

77. Tenha métricas de
cada mudança

78. BÔNUS

79. Confreaks

80. Confreaks

81. Confreaks

82. Confreaks

83. Confreaks

84. Confreaks

85. 9to5mac

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