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
Perceived Performance
Search
Fernanda Bernardo
July 14, 2018
Technology
1
640
Perceived Performance
Fernanda Bernardo
July 14, 2018
Tweet
Share
More Decks by Fernanda Bernardo
See All by Fernanda Bernardo
De frontend à People & Culture
fernandabernardo
0
77
De Frontend à Tech Community Manager
fernandabernardo
1
120
Vamos falar sobre palestrar?
fernandabernardo
0
32
O mágico mundo de Houdini
fernandabernardo
2
230
Como é palestrar?
fernandabernardo
1
44
Monitoramento de uma diabética
fernandabernardo
2
140
UX para aumentar a liberdade de diabéticos
fernandabernardo
1
96
Jogos: indo além do simples CSS!
fernandabernardo
1
150
Você realmente sabe JS?
fernandabernardo
0
510
Other Decks in Technology
See All in Technology
Create Inquiry via Bedrock / 生成 AI で問い合わせ品質は変わるのか?思いついてぱっと作ったものを供養してみる
kazzpapa3
1
190
たった一人で始めた音楽制作が気がついたら会社公認の部活動になっていた話〜組織の垣根を超えるコラボレーションを実現するには〜 / On-KAG-bu
piyonakajima
0
140
Causal Impactを用いたLINE Pay UIの効果検証とABテスト実施への貢献
lycorptech_jp
PRO
2
470
Authenticator のエミュレーションによる パスキーのログインテスト/nikkei-tech-talk-25
nikkei_engineer_recruiting
0
140
ITエンジニアとして知っておいてほしい、電子メールという大きな穴
logica0419
1
300
Product Utilization of Large Language Models Starting Today
ymatsuwitter
2
450
Renovate ではじめる運用レスなライブラリ更新 / 令和最新版 他人に自慢したいヤバいCI/CD LT会 @ yabaibuki.dev #2
ponkio_o
PRO
1
130
【shownet.conf_】多様化するネットワーク環境を柔軟に統合するルーティングテクノロジー
shownet
PRO
0
280
Report of JAWS PANKRATION 2024, a global online event using Amazon IVS
yoshimi0227
1
130
10Xでのデータ基盤の変遷とこれから: データマネジメントのリアル 〜BtoB企業3社の歩みとこれから〜
10xinc
6
1.2k
LINEヤフー新卒採用 コーディングテスト解説 実装問題編
lycorp_recruit_jp
1
12k
Rubyはなぜ「たのしい」のか? / Why is Ruby a programmers' best friend? #tqrk15
expajp
4
1.7k
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
327
21k
How to train your dragon (web standard)
notwaldorf
87
5.6k
What the flash - Photography Introduction
edds
67
11k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
663
120k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Building an army of robots
kneath
302
42k
WebSockets: Embracing the real-time Web
robhawkes
59
7.3k
The Art of Programming - Codeland 2020
erikaheidi
50
13k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.3k
Building Your Own Lightsaber
phodgson
102
6k
Atom: Resistance is Futile
akmur
261
25k
Transcript
Perceived Performance Fernanda Bernardo
O que é Perceived Performance?
O que é Perceived Performance?
async PWA lazy loading HTTP2 fonts AMP prefetch CDN .min
critical rendering path images
DESEMPENHO!
O que é Perceived Performance?
None
Nossa Fê! Você está em TODOS os eventos
FERNANDA BERNARDO Engenheira de Software @Elo7 @help4papers Mentora http://fernandabernardo.com.br @Feh_Bernardo
Nossa Fê! Você está em TODOS os eventos
3 palestras 2014
None
https://www.youtube.com/watch?v=PB_825k8dI4
3 palestras 2014 1 palestra 2015 5 palestras 2016 16
palestras 2017 11ª palestra 2018 + 4 palestras
None
4 anos ~33 palestras
ÓBVIO que eu não participei de todos os eventos
None
None
None
PARECER mais rápido
Porque nos preocupamos tanto com performance?
None
“1 second of load lag time would cost Amazon $1.6
billion in sales per year” - Amazon “An extra 0.5 seconds in each search page generation would cause traffic to drop by 20%” - Google
Demora apenas 3s para um usuário abandonar o seu site!
Demora apenas 3s para um usuário abandonar o seu site!
None
O que é Perceived Performance?
None
Tempo é algo legal!
1987 2017
None
tempo relógio vs tempo da mente
None
None
None
JUST NOTICEABLE DIFFERENCE diferença apenas perceptível
“ Time differences of 20% or less are imperceptible -Steve
Show, Microsoft
Como percebemos o tempo?
ATIVO e PASSIVO
None
“ Humans tend to overestimate passive time by 36%. -Richard
Larson, MIT
None
None
EVITE O ESTADO PASSIVO
None
None
Evite usar o spinner
None
None
avisa o usuário que ele tem que esperar coloca em
estado passivo SPINNER
None
None
não podemos colocar em todas as situações #1
0,2s 1s 2s instantâneo (0,1 - 0,2s) imediato (0,5-1s) ponto
de abandono (>2s) Jakob Nielsen, 1993
não dá noção de tempo #2
None
Como fazer o usuário sofrer menos com o tempo?
Feedback Imediato
SEJA OTIMISTA
None
REQUEST REQUEST
REQUEST REQUEST
Usuário demora ~1s para entrar em um estado passivo
Reagir o quanto antes!
REQUEST ABRE MODAL
PREVER A AÇÃO DO USUÁRIO
REQUEST ABRE MODAL
desaceleração https://github.com/SamKnows/futurelink
None
paginação infinita
None
reação rápida…
click: button up vs mousedown: button down
CLICA AQUI! mousedown click
mousedown click CLICA AQUI!
mousedown te dá uma vantagem de 100-150ms
aproveitando os botões ainda…
O ESTADO :active
None
Lições aprendidas
técnicas para lidar com feedback imediato
None
usuário desiste do seu site depois de 3s de espera
None
O que eu uso no lugar?
PROGRESS BA R
MENTIRA!
None
None
None
None
None
mantem o usuário OCUPADO
None
None
‘
None
None
os jogos fazem isso muito bem!
None
None
None
Precisamos manter a atenção do usuário e dar a sensação
de um feedback mais rápido O que aprendemos?
WARNING
None
None
None
None
None
Portanto, como tudo na vida…
Tome uma decisão! Teste! Valide! Recomece o ciclo!
https://www.youtube.com/watch?v=USH4iPQ44LQ http://blog.teamtreehouse.com/perceived-performance http://dev.mobify.com/blog/beginners-guide-to-perceived-performance/ https://www.nngroup.com/articles/website-response-times/ https://www.keycdn.com/blog/perceived-performance/ https://www.smashingmagazine.com/2015/09/why-performance-matters-the-perception-of-time/ https://blog.marvelapp.com/a-designers-guide-to-perceived-performance/ https://medium.com/@vikigreen/impact-of-slow-page-load-time-on-website-performance-40d5c9ce568a Referências
http://fernandabernardo.com.br @Feh_Bernardo
bit.ly/front-basico 40% desconto