Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Web Performance: Não deixe o usuário desistir d...
Search
Amanda Vilela
December 14, 2019
Programming
1
190
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
Share
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
amandavilela
1
89
Como tornamos os sorteios da BrazilJS on the Road Sorocaba mais divertidos utilizando JS
amandavilela
0
65
Sobre Carreira e Comunidades
amandavilela
0
39
PWA beyond theory - How to create your progressive web app
amandavilela
0
68
Crie seu Próprio Plano de Carreira
amandavilela
0
57
Como otimizar a performance da sua aplicação JS
amandavilela
0
100
Você nem sempre precisa de um framework JS
amandavilela
0
81
Que tal usar CSS em vez de JS?
amandavilela
1
110
Front-end: o que é, mercado e como começar
amandavilela
1
89
Other Decks in Programming
See All in Programming
One Enishi After Another
snoozer05
PRO
0
160
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
2
810
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
260
なぜGoのジェネリクスはこの形なのか? - Featherweight Goが明かす設計の核心
qualiarts
0
250
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
1
130
マンガアプリViewerの大画面対応を考える
kk__777
0
260
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
240
Leading Effective Engineering Teams in the AI Era
addyosmani
7
620
Software Architecture
hschwentner
6
2.3k
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
160
チームの境界をブチ抜いていけ
tokai235
0
220
Developer Joy - The New Paradigm
hollycummins
1
370
Featured
See All Featured
The Invisible Side of Design
smashingmag
302
51k
GitHub's CSS Performance
jonrohan
1032
470k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
620
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
620
Rails Girls Zürich Keynote
gr2m
95
14k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
Embracing the Ebb and Flow
colly
88
4.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Build your cross-platform service in a week with App Engine
jlugia
233
18k
Transcript
Web Performance Não deixe o usuário desistir do seu site
Amanda Vilela Desenvolvedora front-end, freelancer na Toptal, organizadora de algumas
comunidades de Sorocaba. • amandavilela.com • @amandavilela___ Oi :) 2
Importância da performance
Usuários não gostam de coisas lentas
Como melhorar a performance?
None
None
First Contentful Paint (FCP)
Time To Interactive (TTI)
None
Carregar o mínimo e mostrar algo relevante para o usuário
1. Remova o que não tem importância
None
Minifique o código
None
- 12,4 KB
• 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
Revise a necessidade de certas libs
None
None
None
Só envie o código que o usuário precisa
None
None
None
- 7,5 KB
None
None
- 43,3 KB
None
None
None
Remova imagens desnecessárias
None
Otimize as imagens que restarem
None
None
None
None
• 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
Não redimensione imagens no HTML nem no CSS
Imagens responsivas
Antes: Depois:
2. Use Lazy Load
First-View e o Above the Fold
None
None
None
Cuidado com o reflow!
None
None
None
None
3. Evite carregar a fonte no CSS
None
None
None
Self host para melhor performance
None
4. Reduza a quantidade de requests
None
CSS Inline
sim, CSS Inline
Above the Fold
None
None
- 44,1 KB Antes: Depois:
Cuidado com o tamanho do DOM!
5. Ative o GZip
None
6. Reduza os scripts bloqueantes
Uma tag <script> que: • Está no <head> do documento;
• Não tem um atributo defer; • Não tem um atributo async;
Carregamento assíncrono de CSS
None
7. Lazy load no JS
None
None
None
None
Comparação
8. Adapte com base na qualidade da rede
None
None
None
None
9. Faça cache dos recursos estáticos
HTTP cache headers
None
Service Worker
None
None
10. Código transpilado e mais bytes
None
None
11. Use HTTP2
Monitorando Métricas
None
None
None
None
None
None
Performance Budgets
budget.json
None
None
None
Lighthouse Bot
None
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/
Slides: speakerdeck.com/amandavilela
Pull Request em: https://github.com/JSdayBR/recife
http://bit.ly/toptal-amanda
Obrigada!