PORQUE MAIS UMA TALK SOBRE PERFORMANCE?Já adotamos algumas prá/cas no nosso dia-‐a-‐dia, mas ainda falta muito!
Usamos (copiamos e colamos) frameworks que já possuem algumas boas prá/cas
PORQUE MAIS UMA TALK SOBRE PERFORMANCE?
FRAMEWORKS
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?
Existem várias técnicas que podemos usar, em várias áreas do desenvolvimento
PORQUE MAIS UMA TALK SOBRE PERFORMANCE?
O QUE FALTA FAZER?
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?
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!!
Performance afeta todos: !
•Usuários
•Empresas
•Google, etc.
POR QUE DEVO ME PREOCUPAR COM PERFORMANCE?
QUEM SE IMPORTA COM PERFORMANCE?
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
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
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
!
•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)
20% DO TEMPO É BACK-‐END, 80% É FRONT-‐ENDNa realidade, várias vezes, a culpa o percentual do front-‐end é ainda maior.
COMO MELHORAR A PERFORMANCE NO FRONT-‐END?Existem várias técnicas e medidas, mas todas basicamente dizem: •Menos coisas
•Coisas menores
•Comece cedo
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
•Combine seus arquivos Javascript
•Evite @import: gera uma requisição a mais
MENOS COISAS
JAVASCRIPT
•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
•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
•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
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Í?
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
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
•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
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
•Frameworks que já u/lizam boas prá/cas
•Sprockets, Asse/c
•Taks-‐runner: Grunt, GULP
•Soxwares: Prepros, CodeKit
FERRAMENTAS
• http://developer.yahoo.com/performance/
• http://stevesouders.com/
• http://browserdiet.com/
• http://googlewebmastercentral.blogspot.com.br/2010/04/using-site-speed-in-web-search-ranking.html
• http://googlewebmastercentral.blogspot.com.br/2010/04/using-site-speed-in-web-search-ranking.html
• http://www.html5rocks.com/en/tutorials/performance/mystery/?redirect_from_locale=pt
• https://speakerdeck.com/ahomu/high-performance-web-frontend
• https://speakerdeck.com/ahomu/high-performance-web-frontend-2013-qiu ++
• https://speakerdeck.com/ahomu/web-frontend-performance-tuning-tips-star-n ++
• https://speakerdeck.com/ahomu/web-frontend-rendering-performance-knowledge-and-tips ++
• https://speakerdeck.com/danielvlopes/frontend-performance
• https://speakerdeck.com/ericsk/tuning-website-performance-in-frontend-perspective
• https://speakerdeck.com/mattfarina/faster-front-end-performance
• https://speakerdeck.com/pornel/front-end-performance
• https://speakerdeck.com/urbanetter/frontend-performance-where-it-matters
• http://wesleyhales.com/blog/2013/02/18/Adventures-With-the-Skia-Debugger/
• https://sites.google.com/site/skiadocs/developer-documentation/skia-debugger
• http://browserdiet.com/
• https://github.com/zenorocha/browser-diet/wiki/Impact-of-performance
• https://developers.google.com/speed/docs/best-practices/rtt?hl=sv#AvoidCssImport
REFERÊNCIAS