3. PORQUE MAIS UMA TALK
SOBRE PERFORMANCE?
Já adotamos algumas prá/cas no nosso dia-‐a-‐dia, mas ainda
falta muito!
4. Usamos (copiamos e colamos) frameworks que já possuem
algumas boas prá/cas
PORQUE MAIS UMA TALK SOBRE PERFORMANCE?
FRAMEWORKS
5. Conhecemos algumas técnicas, mas não temos idéias de como
funcionam ou porque funcionam.
PORQUE MAIS UMA TALK SOBRE PERFORMANCE?
O QUE ESTAMOS FAZENDO?
6. Existem várias técnicas que podemos usar, em várias áreas do
desenvolvimento
PORQUE MAIS UMA TALK SOBRE PERFORMANCE?
O QUE FALTA FAZER?
7. Técnicas mais avançadas geram:
!
•Maior complexibilidade
•Maior esforço na manunteção
!
Ou seja, mais trabalho.
PORQUE MAIS UMA TALK SOBRE PERFORMANCE?
PORQUE NÃO FAZEMOS?
8. Por isso é importante aprender novas conhecimentos:
!
•Novas técnicas
•Novas ferramentas
•Entenda como funciona um navegador
•Entenda como o usuário se comporta
PORQUE MAIS UMA TALK SOBRE PERFORMANCE?
MAS EU NÃO QUERO MAIS TRABALHO!!
9. POR QUE DEVO ME PREOCUPAR
COM PERFORMANCE?
Impacto no resultado e importância
10. Performance afeta todos:
!
•Usuários
•Empresas
•Google, etc.
POR QUE DEVO ME PREOCUPAR COM PERFORMANCE?
QUEM SE IMPORTA COM PERFORMANCE?
11. Velocidade média no Brasil é de 2.7 Mbps.
!
•Usuários esperam que a página carregue em 2s ou menos
•Só perde para segurança, na ordem de prioridades
•8 de 10 não retornam depois de uma experiência ruim
•30% abandonam um site depois de 5s
POR QUE DEVO ME PREOCUPAR COM PERFORMANCE?
USUÁRIOS
12. Performance afeta o número de pageviews, conversões e
sa/sfação do usuário.
!
•Demora de 1 segundo a mais, 11% a menos page views,
16% a menos na sa/sfação, e menos 7% de conversões.
POR QUE DEVO ME PREOCUPAR COM PERFORMANCE?
EMPRESAS
13. Exemplos:
•Yahoo: a cada 400ms a menos, 9% a mais de tráfego
•Mozilla: 2.2s a menos, 15% a mais de downloads
•Amazon: 100ms a menos, 1% a mais de faturamento
•Google: 30 resultados em vez de 10, de 0.4s para 0.9s,
tráfego caiu 20%
•Bing: 2s a mais, queda de 4.3% no faturamento
POR QUE DEVO ME PREOCUPAR COM PERFORMANCE?
EMPRESAS
14. !
•Sa/sfação do usuário é cada vez mais importante.
•Velocidade de carregamento É um fator de ranking
POR QUE DEVO ME PREOCUPAR COM PERFORMANCE?
GOOGLE (A.K.A MECANISMOS DE BUSCA)
18. COMO MELHORAR A
PERFORMANCE NO
FRONT-‐END?
Existem várias técnicas e medidas, mas todas basicamente
dizem:
•Menos coisas
•Coisas menores
•Comece cedo
20. Obviamente:
•Navegadores modernos fazem até 6 conexões simultâneas
por domínio, considerando todas as abas
•menos arquivos = menos requisições = menos demora
MENOS COISAS
POR QUE?
COMO?
Várias técnicas, no CSS, JS, Imagens e HTML
24. •Use ou crie sua própria CDN
•Configure os Expire Headers
•U/lize local storage
MENOS COISAS
CACHE
25. •Carregue apenas o que precisa
•Não desperdice requests com 404s e redirects
•Post-‐load: carregue componentes depois do onload
•U/lize Etags: nomes únicos para arquivos
MENOS COISAS
GERAL
27. •Sprites horizontais são menores que ver/cais
•Agrupe as imagens por cores
•O/mize as imagens
•Comprima as imagens, remova informações
•Atenção ao formato e finalidade de cada /po de imagem
•JPEG / PNG / GIF
•Evite imagens muito grandes
COISAS MENORES
IMAGENS
31. •lazy-‐load: pré-‐carregue componentes
•o/mize a ordem de carregamento
•carregamento assíncrono do javascript com async
•atenção à ordem e dependências
•Pré-‐carregue componentes u/lizados em outras seções
•rel=“prefetch”: carrega e cacheia
•rel=“prerender”: carrega e renderiza
COMECE CEDO
GERAL
33. Existem melhorias a serem feitas além do simples
carregamento rápido da página.
Outros fatores influenciam a percepção do usuário e podem
ser melhorados
PERFORMANCE PERCEBIDA
CARREGOU, E AÍ?
34. CSS mal estruturado ou uma página com muitos elementos,
podem ter problemas na exibição
•evite aninhamentos grandes no CSS
•CSS é no topo do HTML
•conheça peso de performance de seletores e propriedades
•Não u/lize abuse de filtros e propriedades complexas
PERFORMANCE PERCEBIDA
CSS
35. Javascript é o que mais interfere no funcionamento.
•evite muitos acessos ao DOM
•JS no final do HTML, evitando block
•aprenda JS e suas su/lezas!
PERFORMANCE PERCEBIDA
JAVASCRIPT
36. •Evite muitos elementos no DOM
•evite elementos pesados (iframe/object)
•O/mize o primeiro fold da página
•Não redimensione imagens no html
•Dispare o evento onload mais cedo
•ADs no fim do HTML, posicionados depois do onload
•Mantenha suas libraries atualizadas
PERFORMANCE PERCEBIDA
HTML, ETC
38. As melhorias de performance são cada vez mais necessárias,
principalmente no JS.
•webcomponents, Polymer, X-‐tags, etc
•shadow DOM
•encapsulamento
•templates
JÁ SEI TUDO ISSO.
PRESENTE & FUTURO
