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 do seu site
Search
Amanda Vilela
December 14, 2019
Programming
1
180
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
0
31
Como tornamos os sorteios da BrazilJS on the Road Sorocaba mais divertidos utilizando JS
amandavilela
0
50
Sobre Carreira e Comunidades
amandavilela
0
27
PWA beyond theory - How to create your progressive web app
amandavilela
0
45
Como melhorar seu trabalho remoto
amandavilela
0
45
Crie seu Próprio Plano de Carreira
amandavilela
0
46
Como otimizar a performance da sua aplicação JS
amandavilela
0
88
Você nem sempre precisa de um framework JS
amandavilela
0
61
Que tal usar CSS em vez de JS?
amandavilela
1
64
Other Decks in Programming
See All in Programming
AWS Application Composerで始める、 サーバーレスなデータ基盤構築 / 20240406-jawsug-hokuriku-shinkansen
kasacchiful
1
250
甘い香りに誘われてVanilla Extractを1年間運用してみた
miyahkun
1
110
Ruby GitHub Packages
bkuhlmann
0
620
HUIT新歓2024「競技プログラミング、やってみませんか?」
slephy2784
1
250
puregoの活用例
aethiopicuschan
0
220
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
330
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
870
入門 AWS Amplify Gen2 / Introduction to AWS Amplify Gen2
genkiogasawara
1
310
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
110
せっかくモデル図描くのなら、嬉しいことが多い方がいいよね!
kuboaki
1
3.1k
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
210
ログラスを支える設計標準について / loglass-design-standards
urmot
10
2.1k
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Facilitating Awesome Meetings
lara
40
5.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
Building a Scalable Design System with Sketch
lauravandoore
455
32k
A Philosophy of Restraint
colly
195
16k
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
29
6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
Code Review Best Practice
trishagee
54
15k
Fontdeck: Realign not Redesign
paulrobertlloyd
75
4.9k
Six Lessons from altMBA
skipperchong
19
3k
A Tale of Four Properties
chriscoyier
150
22k
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!