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
88
Como tornamos os sorteios da BrazilJS on the Road Sorocaba mais divertidos utilizando JS
amandavilela
0
64
Sobre Carreira e Comunidades
amandavilela
0
38
PWA beyond theory - How to create your progressive web app
amandavilela
0
65
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
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
1
720
ててべんす独演会〜Flowの全てを語ります〜
tbsten
1
220
ABEMAモバイルアプリが Kotlin Multiplatformと歩んだ5年 ─ 導入と運用、成功と課題 / iOSDC 2025
akkyie
0
310
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
0
350
CSC509 Lecture 03
javiergs
PRO
0
320
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
natmark
0
480
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
160
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
900
フロントエンド開発に役立つクライアントプログラム共通のノウハウ / Universal client-side programming best practices for frontend development
nrslib
7
3.8k
Reduxモダナイズ 〜コードのモダン化を通して、将来のライブラリ移行に備える〜
pvcresin
2
670
メモリ不足との戦い〜大量データを扱うアプリでの実践例〜
kwzr
1
740
iOSアプリの信頼性を向上させる取り組み/ios-app-improve-reliability
shino8rayu9
0
140
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
27
2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
For a Future-Friendly Web
brad_frost
180
9.9k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Designing for humans not robots
tammielis
254
25k
RailsConf 2023
tenderlove
30
1.2k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Become a Pro
speakerdeck
PRO
29
5.5k
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!