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

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

3ab1d4a265ad9289afe10956a78271df?s=47 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

3ab1d4a265ad9289afe10956a78271df?s=128

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
3ab1d4a265ad9289afe10956a78271df?s=48 amandavilela
0
42
Sobre Carreira e Comunidades
3ab1d4a265ad9289afe10956a78271df?s=48 amandavilela
0
17
PWA beyond theory - How to create your progressive web app
3ab1d4a265ad9289afe10956a78271df?s=48 amandavilela
0
31
Como melhorar seu trabalho remoto
3ab1d4a265ad9289afe10956a78271df?s=48 amandavilela
0
37
Crie seu Próprio Plano de Carreira
3ab1d4a265ad9289afe10956a78271df?s=48 amandavilela
0
37
Como otimizar a performance da sua aplicação JS
3ab1d4a265ad9289afe10956a78271df?s=48 amandavilela
0
79
Você nem sempre precisa de um framework JS
3ab1d4a265ad9289afe10956a78271df?s=48 amandavilela
0
38
Que tal usar CSS em vez de JS?
3ab1d4a265ad9289afe10956a78271df?s=48 amandavilela
1
39
Front-end: o que é, mercado e como começar
3ab1d4a265ad9289afe10956a78271df?s=48 amandavilela
1
39

Other Decks in Programming

See All in Programming
FargateとAthenaで作る、機械学習システム
2e7553bdade564572b26060b4a58b98e?s=48 nayuts
0
190
Amazon SageMakerでImagenを動かして猫画像生成してみた
5426a03f740cd61fa5e0d4bfdb7a6cc8?s=48 hotoke_neko
0
120
夕食断食にTRY!/for-lt-12th
82492720940b57cec5072e190213ba3a?s=48 pachikuriii
0
250
WindowsコンテナDojo: 第4回 Red Hat OpenShift Localを使ってみよう
E5eb221d34d4ffbe973f8542b4c3a00e?s=48 oniak3ibm
PRO
0
190
ExplainableAIの概要とAmazon SageMaker Clarifyでの実装例
227382dbd5e033db211c159edf32853c?s=48 hacarus
0
110
OSS貢献を気軽にしたい Let's Go Talk #1
Aa0368c69701536321af9db1ae552b45?s=48 yuyaabo
2
240
ストア評価「2.4」だったCOCOARアプリを1年で「4.4」になんとかした方法@Cloud CIRCUS Meetup #2
3518f5ec9ebb241abc3569eb5cfc7d2a?s=48 1901drama
0
190
Agile Tech EXPO_2022／カケハシ
79d1f8ec70d4c77a2eb30052bef0fe35?s=48 kakehashi
0
110
kintoneでランダム取得を作ってみた（imoniCamp 2022-07-27)
F9904a15202c8ead8e638fc6fa659e33?s=48 shokun1108
0
150
How to Test Your Compose UI (Droidcon Berlin 2022)
E8168a08862631072b2e82e7b662dc07?s=48 stewemetal
1
130
atama plusの開発チームはどのように「不確実性」に向き合ってきたか〜2022夏版〜
F0a8d07597a19192791bf663504d2a17?s=48 atamaplus
3
640
Rに管理されてみる
154699a2e3d8b497494a5ee118f211a5?s=48 kazutan
0
260

Featured

See All Featured
GraphQLの誤解/rethinking-graphql
3cb4e761dbdb7aebd1ffd85f752e1e3e?s=48 sonatard
31
6.8k
Fight the Zombie Pattern Library - RWD Summit 2016
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
226
15k
Designing on Purpose - Digital PM Summit 2013
7653c7c449918ff6542880a8c284f5e7?s=48 jponch
106
5.7k
Raft: Consensus for Rubyists
B6a8f005f39d23ffc930508ac9da68b9?s=48 vanstee
127
5.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
269
12k
How to train your dragon (web standard)
053e75a5b48b44d6dd0612795dfb326d?s=48 notwaldorf
60
3.9k
Why Our Code Smells
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
324
55k
Making the Leap to Tech Lead
32de0bd2ba869609d26fd052a4622778?s=48 cromwellryan
113
7.4k
What the flash - Photography Introduction
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
63
10k
Building Your Own Lightsaber
Fe6b81005d1553accd6b2a28f6a2bef1?s=48 phodgson
95
4.7k
Three Pipe Problems
11c84dff30266b907714802088852677?s=48 jasonvnalue
89
8.7k
Facilitating Awesome Meetings
245cee81a9c424266e5e401d844ea881?s=48 lara
29
4.1k

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!