Tempo e percepção na psicologia do elevador

— PSICOLOGIA DO TEMPO E PERCEPÇÃO
Alguma vez já se perguntaram por que elevadores tem espelhos?
- Uma das grandes invenções do século atual
- Permitia pessoas subirem 40 andares sem cansaço
- Quando introduzido - Pessoas encaravam a porta e ficavam
questionando a segurança enquanto
- A única coisa que pensavam era o medo de cair 40 andares, onde não
tinha nada além de cabos os segurando no meio do ar
- Além de tudo, também reclamavam que eram muito lentos
Tudo que precisava - era uma mudança de perspectiva, reduzindo a
percepção de demora.

PERDENDO
PESO NO
BROWSERBoas práticas para otimizar carregamento de sua página
PERDENDO PESO NO BROWSER - TWITTER.COM/WALLYNM

WALLYSSON
NUNES
Frontend Manager at Tiendanube
github..com/wallynm
twitter.com/wallynm

https://tiendanube-nuvemshop.workable.com

● Performance percebida
● Pré otimização e boas práticas
● O que precisamos medir?
● Oportunidades para otimizações
Iremos abordar detalhes técnicos e de UX ao longo da Talk!
O QUE IREMOS
ABORDAR

QUÃO RÁPIDO UM SITE
DEVE CARREGAR?

O tamanho médio das páginas
em 2010 tinham tamanho de
467kb comparado a 1711kb de
hoje em dia de acordo com
dados coletados no HTTP
Archive
TAMANHO MÉDIO
DAS PÁGINAS

VÍDEOS REPRESENTAM 65% DO CONTEÚDO
NOS WEBSITES - DE MODO GERAL

A forma com que apresentamos
nosso website aos usuários
pode passar uma ideia rápida
ou lenta.
Adição de animações e
placeholders mantém seus
usuários entretidos enquanto
sua aplicação carrega seus
dados.
https://uxplanet.org/how-
to-make-users-think-
your-app-loads-faster-
24052fe307bf
PERFORMANCE
PERCEBIDA

O usuário não percebe
nenhum delay - O
carregamento é
praticamente
instantâneo0.1s.

O delay é mais
perceptível, o usuário
sente uma pausa e
passa um sentimento
de travado.1s.

O usuário perde
atenção e o foco, ele
provavelmente irá
trocar para outra aba
ou simplesmente
fechar seu site, salve
alguns casos10s.
O usuário pode esperar mais tempo caso
ele tenha informado dados sensitivos
como cartão de crédito em um checkout

SIMULE ATÉ O COMPLETAR
O CARREGAMENTO
Fake it till make - https://kyusuf.com/post/fake-it-til-you-make-it-css/
Como?
● Indicadores progressivos - Loadings/Progressbars e Placeholders
● Carregamento dinâmico da cor (Pré armazenadas)
● Reserva do espaço o qual os elementos irão ocupar
● Font de fallback

PLACEHOLDERS

BACKGROUND PRÉ CARREGADO / RESERVA DE ESPAÇO

FALLBACK DE FONTES

Placeholders ajudam a dar
contexto do que será
carregado
A chance do usuário deixar
seu site diminui uma vez que
ele recebeu algum feedback
REVISANDO - OTIMIZE A PERCEPÇÃO DE SEU SITE
Uma vez com o conteúdo
carregado você pode,
carregar outros itens de
acordo com a necessidade do
usuário

PRÉ OTIMIZAÇÃO E
BOAS PRÁTICAS

—HIERARQUIA DE CSS/JS
"Sua aplicação deve ser otimizada
desde a primeira linha de código"

—IMPORT COST - VSCODE PLUGIN

—BUNDLEPHOBIA.COM

—WEBPACK BUNDLE ANALYSER

—ROLLUP PLUGIN ANALYSER

2. 07/04/2019 - gzipped 360kb1. 12/07/2018 - gzipped 237kb 3. 20/09/2019 - gzipped 228kb
Project: Checkout Nuvemshop
Em nosso projeto utilizamos Webpack,
dessa forma utilizamos WebpackBundleAnalyzer
Configuramos para armazenar um arquivo de cada build
Assim podemos comparar como e por que nossa aplicação cresceu
Durante cada novo update.

Principais ganhos de performance:
- Remoção de bibliotecas não utilizadas de forma completa (MomentJS, YUP validation,
libphonenumber
- Otimização do arquivo de CommonJS gerado pelo bundle do NextJS
- Remoção de itens duplicados
12/07/2018 - gzipped 237kb (Início do projeto - poucas funcionalidades implementadas)
07/04/2019 - gzipped 360kb
20/09/2019 - gzipped 228kb (Fase final do projeto - Maiores componentes finalizados)
Project: Checkout Nuvemshop

MomentJS Analysis
https://medium.com/@k2u4yt/momentjs-vs-date-fns-6bddc7bfa21e

Análise cada plugin - muitos podem ser construído
com CSS puro sem adição de muitos KB's

O QUE PRECISAMOS
MEDIR?
Além de UX uma série de outras métricas
são importantes para metrificar e
compreender a velocidade de seu site

TIME TO FIRST BYTE
● TTFB: Time to First Byte - seen as the time
between clicking a link and the first bit of
content coming in.
● FP: First Paint - the first time any pixel
gets becomes visible to the user.
● FCP: First Contentful Paint - the time when
requested content (article body, etc)
becomes visible.
● TTI: Time To Interactive - the time at which
a page becomes interactive (events wired
up, etc).

FIRST PAINT
content coming in.
becomes visible.
up, etc).

FIRST CONTENTFUL PAINT
content coming in.
becomes visible.
up, etc).

TIME TO INTERACTIVE
content coming in.
becomes visible.
up, etc).

WEB.DEV/MEASURE

Cada aplicação possui suas próprias características - Vejam esses tópicos como guias mas
tentem encontrar outros pontos para melhoria
OPORTUNIDADES
PARA OTIMIZAÇÕES

STATIC VS SERVER RENDERED
https://twitter.com/wallynm/status/1174140662045917184

CDN - CONTENT DELIVERY NET

COMPRESSÃO DOS ARQUIVOS

● Lazy load de imagens
● Tratamento de imagens para otimizar qualidade
● Carregamento de Fonts e ícones
● Carregamento de Fonts Custom do próprio domínio
● Ícones custom para adicionar apenas os ícones necessários
● Análise de requisições feitas pela aplicação para prover seus recursos
● Imagens sob demanda para resoluções menores (Lambda functions)
● Análise de queryes no banco de dados através de profiling
● Execução de requests de forma Async quando possível
● CodeSplit (Já abordamos)
● Gzip para minificação

CRÉDITOS
◂ Presentation template by Slidesgo
◂ Icons by Flaticon
◂ Images & infographics by Freepik
◂ Reduzindo tamanho de seu website: https://wp-rocket.me/blog/best-practice-guide-reducing-website-page-weight/
◂ Performance percebida: https://wp-rocket.me/blog/perceived-performance-need-optimize/
◂ Imagem de introdução 1 slide: https://rogerwilkerson.tumblr.com/image/66312570479
◂ Boas práticas iamgem slide: https://dribbble.com/shots/5942429-PDFelement-wondershare-Partner-
Program?utm_source=Pinterest_Shot&utm_campaign=terrymota&utm_content=PDFelement/wondershare%20-
%20Partner%20Program&utm_medium=Social_Share
◂ O que medir? Imagem: https://br.pinterest.com/pin/363032419938902328/

Tempo e percepção na psicologia do elevador

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Tempo e percepção na psicologia do elevador

Semelhante a Tempo e percepção na psicologia do elevador (20)

Tempo e percepção na psicologia do elevador

Notas do Editor