Web Performance: Não deixe o usuário desistir do seu site

Talk apresentada no JS Day Recife 2019

Transcript

1. Web Performance Não deixe o usuário desistir do seu site
2. Amanda Vilela Desenvolvedora front-end, freelancer na Toptal, organizadora de algumas comunidades de Sorocaba. • amandavilela.com • @amandavilela___ Oi :) 2
3. Importância da performance
4. Usuários não gostam de coisas lentas
5. Como melhorar a performance?
8. First Contentful Paint (FCP)
9. Time To Interactive (TTI)
11. Carregar o mínimo e mostrar algo relevante para o usuário
12. 1. Remova o que não tem importância
14. Minifique o código
16. - 12,4 KB
17. • Minifier: An online tool minifies JavaScript or CSS via copy and paste. • Grunt: An NPM minification package that integrates into the Grunt workflow. • Gulp: An NPM minification package that integrates into the Gulp workflow. • Frameworks: Separe o modo desenvolvimento de produção
18. Revise a necessidade de certas libs
22. Só envie o código que o usuário precisa
26. - 7,5 KB
29. - 43,3 KB
33. Remova imagens desnecessárias
35. Otimize as imagens que restarem
40. • SVG no que for possível, mas não esqueça de otimizar também: svgomg • Substitua GIFs por vídeos: WebM e MP4, ffmpeg
41. Não redimensione imagens no HTML nem no CSS
42. Imagens responsivas
43. Antes: Depois:
44. 2. Use Lazy Load
45. First-View e o Above the Fold
49. Cuidado com o reflow!
54. 3. Evite carregar a fonte no CSS
58. Self host para melhor performance
60. 4. Reduza a quantidade de requests
62. CSS Inline
63. sim, CSS Inline
64. Above the Fold
67. - 44,1 KB Antes: Depois:
68. Cuidado com o tamanho do DOM!
69. 5. Ative o GZip
71. 6. Reduza os scripts bloqueantes
72. Uma tag <script> que: • Está no <head> do documento; • Não tem um atributo defer; • Não tem um atributo async;
73. Carregamento assíncrono de CSS
75. 7. Lazy load no JS
80. Comparação
81. 8. Adapte com base na qualidade da rede
86. 9. Faça cache dos recursos estáticos
87. HTTP cache headers
89. Service Worker
92. 10. Código transpilado e mais bytes
95. 11. Use HTTP2
96. Monitorando Métricas
103. Performance Budgets
104. budget.json
108. Lighthouse Bot
110. Referências • https://www.awwwards.com/brain-food-perceived-performance • https://developers.google.com/web/fundamentals/performance/why-performance-matters • https://developers.google.com/web/tools/chrome-devtools/coverage • https://developers.google.com/web/tools/chrome-devtools/evaluate-performance • https://web.dev/fast/ • https://www.filamentgroup.com/lab/inlining-cache.html • https://web.dev/using-lighthouse-bot-to-set-a-performance-budget/
111. Slides: speakerdeck.com/amandavilela
112. Pull Request em: https://github.com/JSdayBR/recife
113. http://bit.ly/toptal-amanda
114. Obrigada!