Desempenho e Otimização no Frontend

Na web a experiência do usuário vai além da interface: tempo de carregamento, interatividade e estabilidade são alguns dos pilares que podem definir seu sucesso ou ruína!

Nesta apresentação faremos uma jornada intensa pelo frontend, falando sobre problemas clássicos, como detectá-los e as técnicas e boas práticas para um site incrível independente de framework!

Transcript

1. Desempenho e Otimização no Frontend Aplicações incríveis independente de frameworks
2. About + Empreendedor de sucesso + Físico teórico + Viajante + Escritor + Músico + DJ + Cabeleireiro + Dev Maromba
4. Beto empreendimentos
5. About + ErreJota <3 Bangu + Ciência da Computação (NaN/8) + Dev Fullstack na Suzano + Tech In Rio + Praia + Rave / Rock
6. O que é site bom?
7. Um site bonito
8. Um site que carrega rápido
9. Um site simples e funcional
10. Trade Offs +Funcionalidades +Desempenho +Acessibilidade +SEO
11. A coisa começa a ficar feia….
12. Menos é mais
13. Análise
14. Core Web Vitals
15. Web Vitals
24. Lighthouse
26. Lighthouse como dependêcia
27. Performance budgets
28. Performance budgets
29. Performance budgets
30. Lighthouse no seu CI
31. Automações do fluxo do usuário
32. Automações do fluxo do usuário
33. Automações do fluxo do usuário
34. Automações do fluxo do usuário
35. Outras métricas do Lighthouse
36. Outras métricas do Lighthouse
37. Acessibilidade
38. Componentes da Acessibilidade Web
39. Ciclo de implementação
40. Quando um componente é fraco…
41. Guidelines de Acessibilidade
43. Search Engine Optimisation
44. Tudo de antes importa +Performance +Acessibilidade +Boas práticas
45. Pilares +Conteúdo +Technical SEO +On-site SEO +Off-site SEO
46. Técnicas de otimização
48. Quando você roda npm install
54. Passando a faca no JavaScript
55. Tree Shaking
56. Tree Shaking
57. Tree Shaking
58. Bundle size
69. Preloading / Prefetching
70. Preloading / Prefetching
75. Drawbacks +Custo de infra +Complexidade de deploy +Pontos de falha
76. Reidratação
79. Server Components
82. Island Architecture
84. Resumability
85. DevTools
86. Performance
87. Performance
90. React DevTools Components
91. React DevTools Profiler
92. Referências + Addy Osmani - The Cost Of JavaScript in 2018 + Addy Osmani - The Cost Of JavaScript in 2023 + William Grasel - O custo do JavaScript para sua aplicação Web + Jessica Felix - Otimização e análise de desempenho de aplicações Javascript + W3C Accessibility Standard + Riccardo Andreatta - What is the Server- Side Rendering and how it works
93. Fim