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

Web Performance: Não deixe o usuário desistir d...

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Amanda Vilela Amanda Vilela
December 14, 2019
Programming
210
1

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

Talk apresentada no JS Day Recife 2019

Avatar for Amanda Vilela

Amanda Vilela

December 14, 2019

More Decks by Amanda Vilela

See All by Amanda Vilela
Construindo sua primeira página web: Sua porta de entrada para uma carreira de front-end
Avatar for Amanda Vilela amandavilela
1
120
Como tornamos os sorteios da BrazilJS on the Road Sorocaba mais divertidos utilizando JS
Avatar for Amanda Vilela amandavilela
0
97
Sobre Carreira e Comunidades
Avatar for Amanda Vilela amandavilela
0
70
PWA beyond theory - How to create your progressive web app
Avatar for Amanda Vilela amandavilela
0
110
Crie seu Próprio Plano de Carreira
Avatar for Amanda Vilela amandavilela
0
76
Como otimizar a performance da sua aplicação JS
Avatar for Amanda Vilela amandavilela
0
120
Você nem sempre precisa de um framework JS
Avatar for Amanda Vilela amandavilela
0
100
Que tal usar CSS em vez de JS?
Avatar for Amanda Vilela amandavilela
1
130
Front-end: o que é, mercado e como começar
Avatar for Amanda Vilela amandavilela
1
110

Other Decks in Programming

See All in Programming
過去最大のMCPアップデート! 2026-07-28 RC版の謎に迫る
Avatar for matsukada licux
6
350
Lessons from Spec-Driven Development
Avatar for Simon Martinelli simas
PRO
0
210
TSKaigi Night Talks 2026_TypeScriptでサプライチェーンの整合性を型に閉じ込める
Avatar for ギークプラス ソフトウェア事業部 geekplus_tech
0
350
ローカルLLMでどこまでコードが書けるか -拡張版 /　How much code can be written on a local LLM Extended
Avatar for Naoki Kishida kishida
11
4.2k
肥大化するレガシーコードに立ち向かうためのインターフェース分離と依存の逆転 / JJUG CCC 2026 Spring
Avatar for hirokuni-maeta hirokunimaeta
0
560
dRuby over BLE
Avatar for makicamel makicamel
2
340
The ROI of Quarkus for Spring Boot Applications
Avatar for Holly Cummins hollycummins
0
120
メソッドのジェネリクスでGoの夢は広がるか？ / Kyoto.go #65
Avatar for utagawa kiki utgwkk
3
790
気圧・高度・GPSを記録&可視化するアプリ「Koudo」を作った話
Avatar for Hajime Kato hjmkth
1
270
Java × distroless で 軽量なコンテナイメージを / Java on Distroless
Avatar for Daisuke Garaike contour_gara
0
550
Snowflake Summitでの新機能 CoCo / CoWork / snowflake-summit-2026-overall-what-new-coco
Avatar for Tatsuhiro tatsuhiro
1
140
作って学ぶ、 JSX (TSX) ランタイムの基本
Avatar for syumai syumai
7
1.6k

Featured

See All Featured
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
18k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
470
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
2
400
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
1
350
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
11k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
640
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
410
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
210

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?

  6. None
  7. None

  8. First Contentful Paint (FCP)

  9. Time To Interactive (TTI)

  10. None

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

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

  13. None

  14. Minifique o código

  15. None

  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

  19. None
  20. None
  21. None

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

  23. None
  24. None
  25. None

  26. - 7,5 KB

  27. None
  28. None

  29. - 43,3 KB

  30. None
  31. None
  32. None

  33. Remova imagens desnecessárias

  34. None

  35. Otimize as imagens que restarem

  36. None
  37. None
  38. None
  39. None

  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

  46. None
  47. None
  48. None

  49. Cuidado com o reflow!

  50. None
  51. None
  52. None
  53. None

  54. 3. Evite carregar a fonte no CSS

  55. None
  56. None
  57. None

  58. Self host para melhor performance

  59. None

  60. 4. Reduza a quantidade de requests

  61. None

  62. CSS Inline

  63. sim, CSS Inline

  64. Above the Fold

  65. None
  66. None

  67. - 44,1 KB Antes: Depois:

  68. Cuidado com o tamanho do DOM!

  69. 5. Ative o GZip

  70. None

  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

  74. None

  75. 7. Lazy load no JS

  76. None
  77. None
  78. None
  79. None

  80. Comparação

  81. 8. Adapte com base na qualidade da rede

  82. None
  83. None
  84. None
  85. None

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

  87. HTTP cache headers

  88. None

  89. Service Worker

  90. None
  91. None

  92. 10. Código transpilado e mais bytes

  93. None
  94. None

  95. 11. Use HTTP2

  96. Monitorando Métricas

  97. None
  98. None
  99. None
  100. None
  101. None
  102. None

  103. Performance Budgets

  104. budget.json

  105. None
  106. None
  107. None

  108. Lighthouse Bot

  109. None

  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!