PERFORMANCE WEB
PERFORMANCE WEB
O desempenho da Web refere-se à velocidade na qual as páginas da Web são baixadas e exibidas no navegador da web do usuário. Otimização de desempenho da Web ou otimização de site é o campo de conhecimento sobre o aumento do desempenho da Web.
PERFORMANCE WEB
O desempenho da Web refere-se à velocidade na qual as páginas da Web são baixadas e exibidas no navegador da web do usuário. Otimização de desempenho da Web ou otimização de site é o campo de conhecimento sobre o aumento do desempenho da Web.
Foi demonstrado que velocidades de download de sites mais rápidas aumentam a retenção e a fidelidade do visitante [1] [2] e a satisfação do usuário, especialmente para usuários com conexões de internet lentas e aqueles em dispositivos móveis . [3] O desempenho da Web também leva a menos dados viajando pela Web, o que, por sua vez, reduz o consumo de energia e o impacto ambiental de um site. [4]
3
s
5
10
3
50%
Acessos
Tempo
.min
3s
2.97s
20%
1%
O que fazer para aumentar a velocidade da nossa aplicação?
D
(
O esperar quando meu
usuári está esperand ?
Quem sou eu?
João
Batista
Diretor Comercial na CEOS
4º Semestre
Desenvolvedor React JS & Native
JS
JsBatista
Fernanda Bernardo
bit.ly/ppsac2019
Rapidez
Fluidez
Polidez
EZ
X
E
U
U
x
ser
perience
E
UX
Design UX não é só
um Design Bonito
Design Confortável
Você se sente confortável...
Por que?
Em pé?
Fuga da rotina?
Más notícias?
Esperar
Geração da Pressa
Jovens não gostam de esperar
NINGUÉM gosta de esperar
O que fazer para aumentar a velocidade da nossa aplicação?
Precisamos fazer nosso usuário parar de esperar
A aplicação deve ser
mais rápida
A aplicação deve ser
mais rápida para o usuário
Precisamos fazer nosso usuário parar de esperar
O usuário não precisa saber que está esperando!
Mentir para o usuário
Seu usuário pode estar
esperando do jeito errado!
esperar
verbo
...
2.
não agir, não tomar decisões, não desistir de algo, até a efetuação de um evento que se tem por certo, ou provável, ou desejável.
Ativa
Espera
Passiva
Espera
Espera
Passiva
Espera
Ativa
Espera
Ativa
Espera Passiva
Espera Ativa
Usuário sabe que espera
Tudo que ele faz é esperar
Usuário "não sabe" que espera
Faz algo enquanto espera
A aplicação deve ser
mais rápida para o usuário
A espera do usuário deve ser
majoritariamente ativa
Como podemos realizar isso?
Indicar a espera
Distrair
Evitar a espera
Manipular a espera
Spinners
Não use
Não são bonitos?
Não são minimalistas?
Hitler usava?
Infinitos
Sinalizam a espera passiva
0.5s
1s
3s
30min
Espera Infinita
Como sinalizar a
espera então?
Barras de Progresso
Bonitos
Criativos
Finitos
Usuário sabe o quanto
ele vai esperar
Indicar a espera
Distrair
Evitar a espera
Manipular a espera
Distração
Tempo do
Tempo da
Ensuring dankest memes
This isn't tennis!
Mashing Buttons
CONNECTING
Tudo demais é
veneno
Indicar a espera
Distrair
Evitar a espera
Manipular a espera
Loading...
?
Não haviam loading
screens no jogo!
Mas e para começar o jogo?
Não haviam pausas para carregamento
Dinamicamente
Como fazer isso?
0.7 - 1.0s
2 - 3s
...
5 - 10s
Ah, a culpa não é minha se você tem uma internet da Xuxa.
Minha aplicação é perfeita com uma internet decente.
Seu usuário não tem culpa
da sua aplicação ser mal otimizada
Um ou dois segundos não fazem diferença.
$1,6
$1,600,000,000
1,454,545,454
123,076
117,647
Indicar a espera
Distrair
Evitar a espera
Manipular a espera
/|\
/\
Eu
/|\
/\
DEV
|>
/\
Projeto
/|\
/\
APP
X
Y
Z
X
Y
Z
...
...
Economia
Só solicito o que eu
estou usando
0 desperdício de dados
X
X
X
X
X
Y
Z
.
.
.
1s
Troca
de
tela
X
X
X
X
1s
Trocar de tela
*tap*
...
...
...
X
<|>
/\
?
Economia
Só solicito o que eu
estou usando
Fazer várias requisições pequenas
Fazer várias requisições pequenas
Fazer uma requisição grande
X
X
Y
Z
...
X
X
Y
Z
...
Fazer uma requisição grande
1 - 2s
E nunca mais
9 s
1.5 s
Feedback
Imediato
Otimismo
Espere que dê certo
*click*
Request
Response
*click*
Request
Response
indicar que o usuário esperar
distrair o usuário da espera
evitar que o usuário espere
manipular a espera do usuário
Aprendemos a:
ao carregar algo
ao distrair o usuário
ao indicar a espera
Cuidado:
Você
Seu usuário
=
$
Seu
Usuário
=
brigad !