Performance em-front-end-luiz-tanure

Performance em front end

LUIZ TANURE@tanure github.com/letanure

https://github.com/letanure

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.


O QUE ESTAMOS FAZENDO?

Existem várias técnicas que podemos usar, em várias áreas do desenvolvimento


O QUE FALTA FAZER?

Técnicas mais avançadas geram: !

•Maior complexibilidade

•Maior esforço na manunteção !Ou seja, mais trabalho.


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


MAS EU NÃO QUERO MAIS TRABALHO!!

POR QUE DEVO ME PREOCUPAR COM PERFORMANCE?Impacto no resultado e importância

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


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.


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


EMPRESAS

!

•Sa/sfação do usuário é cada vez mais importante.

•Velocidade de carregamento É um fator de ranking


GOOGLE (A.K.A MECANISMOS DE BUSCA)

REGRA DE OURO DA PERFORMANCE NO

FRONT-END

20% DO TEMPO É BACK-‐END, 80% É FRONT-‐ENDNa realidade, várias vezes, a culpa o percentual do front-‐end é ainda maior.

WATERFALL

Back-end

Front-end

github.com

http://github.com

COMO MELHORAR A PERFORMANCE NO FRONT-‐END?Existem várias técnicas e medidas, mas todas basicamente dizem: •Menos coisas

•Coisas menores

•Comece cedo

MENOS COISAS!

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 CSS

•Evite @import: gera uma requisição a mais

MENOS COISAS

CSS

•Combine seus arquivos Javascript

•Evite @import: gera uma requisição a mais

MENOS COISAS

JAVASCRIPT

•U/lize CSS Sprites

•U/lize imagens como data URI

MENOS COISAS

IMAGENS

•Use ou crie sua própria CDN

•Configure os Expire Headers

•U/lize local storage

MENOS COISAS

CACHE

•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

COISAS MENORES

•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

•Comprima seus arquivos CSS

•Remova seletores e propriedades sem uso

COISAS MENORES

CSS

•A/ve GZIP no seu servidor

•Remova seletores e propriedades sem uso

COISAS MENORES

GERAL

COMECE CEDO

•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

PERFORMANCE É MEDIDA PELA PERCEPÇÃO DO USUÁRIO

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


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!


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


HTML, ETC

E O QUE MAIS?

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

FERRAMENTAS

•Frameworks que já u/lizam boas prá/cas

•Sprockets, Asse/c

•Taks-‐runner: Grunt, GULP

•Soxwares: Prepros, CodeKit

FERRAMENTAS

PREPOS

CODEKIT

FINITO

• 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

http://browserdiet.com/

http://googlewebmastercentral.blogspot.com.br/2010/04/using-site-speed-in-web-search-ranking.html

https://developers.google.com/speed/docs/best-practices/rtt?hl=sv#AvoidCssImport

Performance em-front-end-luiz-tanure

Documents

Transcript of Performance em-front-end-luiz-tanure