Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Amanda Vilela
December 14, 2019
Programming
1
170

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

Talk apresentada no JS Day Recife 2019

Amanda Vilela

December 14, 2019
Tweet

More Decks by Amanda Vilela

See All by Amanda Vilela
Como tornamos os sorteios da BrazilJS on the Road Sorocaba mais divertidos utilizando JS
amandavilela
0
45
Sobre Carreira e Comunidades
amandavilela
0
21
PWA beyond theory - How to create your progressive web app
amandavilela
0
35
Como melhorar seu trabalho remoto
amandavilela
0
38
Crie seu Próprio Plano de Carreira
amandavilela
0
42
Como otimizar a performance da sua aplicação JS
amandavilela
0
83
Você nem sempre precisa de um framework JS
amandavilela
0
40
Que tal usar CSS em vez de JS?
amandavilela
1
45
Front-end: o que é, mercado e como começar
amandavilela
1
43

Other Decks in Programming

See All in Programming
新社会人でも活躍したい！〜新卒1年目で活躍するためのコツ〜
ogijun2018
1
270
一緒にスクラム開発___GPT-4と人間が共創するプロダクトの進化.pdf
itohiro73
5
4.7k
Compose で手に入れた UI の Unit test
mkeeda
2
340
mrubyでマイコンの世界に足を踏み入れる
yuuu
0
470
Learning PHP with PHP Parser
inouehi
0
150
結合テストの自動化にQAはどうかかわっていったか
nagworld
0
130
スクラムマスターの採用事情 / scrum fest fukuoka 2023
daiksy
0
540
Lightweight Architectures With Angular's Latest Innovations
manfredsteyer
PRO
0
200
Prompt Engineering 勉強会 / 2023.03.21 GPT-4 Prompt 報告会
smiyawaki0820
2
680
Kubernetes as a Service の利用者を支える機能 - Platform Engineering Meetup #1 / pfem01-amsy810-k8s
masayaaoyama
0
1k
Jakarta EE 10 - Simplicity for Modern and Lightweight Cloud
ivargrimstad
0
170
コルーチンのエラーをテストするためのTips / Tips for testing Kotlin Coroutine errors
tkmnzm
0
150

Featured

See All Featured
For a Future-Friendly Web
brad_frost
166
7.9k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
197
11k
Designing the Hi-DPI Web
ddemaree
273
33k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
182
15k
Fireside Chat
paigeccino
16
2k
Learning to Love Humans: Emotional Interface Design
aarron
263
38k
How to name files
jennybc
48
76k
Atom: Resistance is Futile
akmur
256
24k
We Have a Design System, Now What?
morganepeng
37
6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
44
14k
Agile that works and the tools we love
rasmusluckow
321
20k
From Idea to $5000 a Month in 5 Months
shpigford
374
44k

Transcript

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

    View Slide

  2. Amanda Vilela
    Desenvolvedora front-end, freelancer na Toptal, organizadora de algumas
    comunidades de Sorocaba.
    ● amandavilela.com
    ● @amandavilela___
    Oi :)
    2

    View Slide

  3. Importância da performance

    View Slide

  4. Usuários não gostam de coisas lentas

    View Slide

  5. Como melhorar a performance?

    View Slide

  6. View Slide

  7. View Slide

  8. First Contentful Paint (FCP)

    View Slide

  9. Time To Interactive (TTI)

    View Slide

  10. View Slide

  11. Carregar o mínimo e mostrar algo
    relevante para o usuário

    View Slide

  12. 1. Remova o que não tem
    importância

    View Slide

  13. View Slide

  14. Minifique o código

    View Slide

  15. View Slide

  16. - 12,4 KB

    View Slide

  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

    View Slide

  18. Revise a necessidade de certas
    libs

    View Slide

  19. View Slide

  20. View Slide

  21. View Slide

  22. Só envie o código que o usuário
    precisa

    View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. - 7,5 KB

    View Slide

  27. View Slide

  28. View Slide

  29. - 43,3 KB

    View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  33. Remova imagens desnecessárias

    View Slide

  34. View Slide

  35. Otimize as imagens que restarem

    View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  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

    View Slide

  41. Não redimensione imagens no
    HTML nem no CSS

    View Slide

  42. Imagens responsivas

    View Slide

  43. Antes:
    Depois:

    View Slide

  44. 2. Use Lazy Load

    View Slide

  45. First-View e o Above the Fold

    View Slide

  46. View Slide

  47. View Slide

  48. View Slide

  49. Cuidado com o reflow!

    View Slide

  50. View Slide

  51. View Slide

  52. View Slide

  53. View Slide

  54. 3. Evite carregar a fonte no CSS

    View Slide

  55. View Slide

  56. View Slide

  57. View Slide

  58. Self host para melhor
    performance

    View Slide

  59. View Slide

  60. 4. Reduza a quantidade de
    requests

    View Slide

  61. View Slide

  62. CSS Inline

    View Slide

  63. sim, CSS Inline

    View Slide

  64. Above the Fold

    View Slide

  65. View Slide

  66. View Slide

  67. - 44,1 KB
    Antes:
    Depois:

    View Slide

  68. Cuidado com o tamanho do DOM!

    View Slide

  69. 5. Ative o GZip

    View Slide

  70. View Slide

  71. 6. Reduza os scripts bloqueantes

    View Slide

  72. Uma tag que:<br/>● Está no <head> do documento;<br/>● Não tem um atributo defer;<br/>● Não tem um atributo async;<br/>

    View Slide

  73. Carregamento assíncrono de CSS

    View Slide

  74. View Slide

  75. 7. Lazy load no JS

    View Slide

  76. View Slide

  77. View Slide

  78. View Slide

  79. View Slide

  80. Comparação

    View Slide

  81. 8. Adapte com base
    na qualidade da rede

    View Slide

  82. View Slide

  83. View Slide

  84. View Slide

  85. View Slide

  86. 9. Faça cache dos recursos
    estáticos

    View Slide

  87. HTTP cache headers

    View Slide

  88. View Slide

  89. Service Worker

    View Slide

  90. View Slide

  91. View Slide

  92. 10. Código transpilado e mais
    bytes

    View Slide

  93. View Slide

  94. View Slide

  95. 11. Use HTTP2

    View Slide

  96. Monitorando Métricas

    View Slide

  97. View Slide

  98. View Slide

  99. View Slide

  100. View Slide

  101. View Slide

  102. View Slide

  103. Performance Budgets

    View Slide

  104. budget.json

    View Slide

  105. View Slide

  106. View Slide

  107. View Slide

  108. Lighthouse Bot

    View Slide

  109. View Slide

  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/

    View Slide

  111. Slides: speakerdeck.com/amandavilela

    View Slide

  112. Pull Request em: https://github.com/JSdayBR/recife

    View Slide

  113. http://bit.ly/toptal-amanda

    View Slide

  114. Obrigada!

    View Slide