O documento discute técnicas para otimizar o desempenho de aplicativos web para dar a impressão de rapidez ao usuário, mesmo que a conexão seja lenta. Essas técnicas incluem minificar arquivos, usar CDNs, carregar estilos e scripts separadamente e pré-carregar componentes para reduzir tempos de resposta aparentes. O documento também discute como as expectativas do usuário influenciam a percepção de desempenho e a importância de fornecer feedback imediato.

1. Sua web app não precisa ser
necessariamente mais rápida,
mas tem que parecer que é!
Alexandre Magno
Front in Fortaleza

2. Quem sou eu
Alexandre Magno
WebDev
Autor
- Mobile Web
- Bootstrap
- UX
- SVG e Animação
+ Música
+ Arduino
+ Fotografia

3. Projeto open source github.com/alexanmtz
Letrilizar

4. O que fazemos para otimizar?
02
01
Minificar
arquivos
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
Gzip dos
componentes
JSlint e Minifying
02
Ser um Grade A
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
Yslow
Page speed
03
Minimizar
requests
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
Utilizar recursos
mínimos
Carregar em paralelo
CDN
04
StyleSheet on Top
Scripts in the bottom
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
Evitar o bloqueamento do
carregamento da página
JS é bloqueante
CSS não
https://developer.yahoo.com/performance/rules.html

5. Otimizar imagens
06
http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/
Imagens representam
no tráfego da
internet60%
payload

6. Carregamento progressivo, bom ou mal?
05
http://velocityconf.com/velocityny2014/public/schedule/detail/35658
Mostra algo imediato
Frustração

7. techniques that DON’T physically increase the ability of your
app to respond (since device’s connection speed is out of
your control) but instead can help to make your
app feel faster.
How is this possible? Well, the answer is simple: you give your
users the illusion of speed and responsiveness — even
under a slow connection.
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
13
http://www.sitepoint.com/3-tips-make-application-feel-faster/

8. 03
http://www.sitepoint.com/3-tips-make-application-feel-faster/
Studies have shown that human beings have
a “mental barrier” that means that we
perceive events that take more than
100ms as slow. while events under 100ms
is felt essentially instantaneous to the user.

9. 03
E para o usuário?
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
Rápido
Disponível
Responsivo

10. Fluidez na interação
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
Antecipar erros
10
Pontos de falha
Tempo de resposta

11. Sensação de rapidez
15
Pré carregar
componentes
Menos elementos no
DOM
Dê uma sensação
de página
carregada com
fluidez
Feedback instantâneo
Dicas
Componentes sob
demanda
Organização
simples
Reduzir
verificações
DNS

12. Você carregou mesmo Instagram?
04
http://www.cultofmac.com/164285/the-clever-trick-instagram-uses-to-upload-photos-so-quickly/
ex.

13. Escalas de tempo da
experiência do usuário
08
http://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/
tempo - aspectos da usabilidade em diferentes tempos de espera do usuário
10min
—————————————————————————————
Visita longa a um
site
Tempo de um
download
1m
—————————————————————————————
Espera por vídeos
transações
bancárias
10s
————————————————————Impaciente
Atenção dispersa
1s———————————————————————————-—
Navegação Livre
O usuário está
no controle
0.1s
————————————————————
Percepção

14. Percepção de uso do usuário no tempo
18
http://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/
10 anos1 ano1 mês1 semana
Geralmente
verificações
semanais
como
LinkedIn
1 dia
Esperar 1 dia
assume que há
alguma
intervenção
humana
para aprovação
Sites de
colaboração
e B2B podem
ter
transações
que levam
um maior
tempo
Sites que
requerem
campanhas
ou
engajamento
social
Conhecimento
profundo de
sistemas
complexos
ex: Unix

15. Quando a Interface é muito rápida
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
Tempo de resposta rápido nem
sempre é o mais eficiente
17
http://www.nngroup.com/articles/too-fast-ux/
Mudanças muito rápidas na
interface podem ser imperceptíveis
Mais rápido pode ser também mais
difícil

16. Elementos que mudam automaticamente
04
Exemplo de como mudanças rápidas na interface podem dificultar o entendimento do usuário
Se um usuário precisa responder a seguinte pergunta:
http://www.nngroup.com/articles/auto-forwarding/
teste: A siemens tem ofertas especiais de máquinas de lavar? R: Não vi
Resultado: elementos que se auto rotacionam podem irritar o usuário e comprometer a
visibilidade
ex.
Neste caso um accordion que se rotaciona
automaticamente. exibindo ofertas,
esconde uma informação que poderia ser
importante. Não importa o quão rápido ele
carregar, ele pode não estar atendendo com
uma informação quando o usuário precisa e
pode distrair tua atenção

17. Páginas que carregam muito rápido
04
Exemplo de como um carregamento rápido nem sempre é o mais eficiente e pode frustar o
usuário
twitter.com
Se tentar utilizar a função de Tweet no momento que a página aparece e está carregando
não consigo
ex.

18. Como ser eficiente na interface?
12
Elementos
Pensar estrategicamente em cada elemento
+ Botões grandes o suficiente para interagir facilmente
+ Projetar elementos de interface de acordo com a função que ele desempenha
+ Atalhos para os usuários mais avançados executarem as tarefas mais rápido
+ Elementos cada vez mais interativos
+ Consistência entre ícones
+ Consistência entre duração de tarefas
+ Sugerir alternativas de forma inteligente
? $
otimizar carregamento
de 8s para 5s aumenta
18% do faturamento

19. Interações mais
eficientes
14
http://www.mobify.com/blog/beginners-guide-to-perceived-performance/
Interações mais eficientes também dão a sensação ao usuário de rapidez
Estados definidos de um botão
Botões precisam responder imediatamente ao
toque e dar a indicação de que algo está
acontecendo
Animações
performáticas
Animações não são firulas
São elas causadoras do
"Wow!"
Dialogue com o usuário
É necessário também passar uma
linguagem acessível ao usuário e que o
faça se sentir confortável

20. Don’t Prioritize
Efficiency Over
Expectations
http://www.nngroup.com/articles/efficiency-vs-expectations/
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
13
Expectations Are Based on Past Experiences
Practice Makes Perfect
Respect Mental Models
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
Help Users Become Masters
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

21. In mobile Design there are no
intuitive interfaces.
There are only interfaces that
are familiar, and once
familiar they become intuitive.
This brings us to the
conclusion that the concept
of obvious is arbitrary and
relative.
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
13
http://www.sitepoint.com/obvious-design-always-wins/
So obvious…
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

22. Interfaces intuitivas?
06
© Company Name 2015. All Rights Reserved

23. Uso de app vs mobile web
06
http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/

24. Uso dos celulares
06
© Company Name 2015. All Rights Reserved
Número de usuários
Que utilizam o
Facebook1,32
bilhões
Usam o Facebook
somente no celular30%
usuários

25. Fatores indiretos que afetam a
perfomance(desktop)
06

26. Fatores indiretos que afetam a
perfomance(mobile)
06
pouco tempo
Ocupado
menos foco
conexão lenta

27. O que devemos evitar
07
© Company Name 2015. All Rights Reserved
Algumas soluções de carregamento, apesar de serem úteis, podem não ser as soluções ideais
Spinners
Animaçòes demoradas e que travam a interface
Barra de progresso não indicada para o contexto
Susceptível a falha devido a uma situação adversa

28. Tripé da Perfomance da interface
16
Feedback instantâneo
Conteúdo temporário
Não deixe o usuário pensar!

29. When time is saved—or
appears to have been—
the complex feels
simpler.
(The laws of simplicity)
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
13

30. Obrigado
alexandremagno.net
alexandremagno.net
@alexanmtz