performance front-end | front in maceió

38
PERFORMANCE FRONT-END Com resultado segunda-feira, 29 de outubro de 12

Upload: giovanni-keppelen

Post on 05-Dec-2014

1.701 views

Category:

Documents


4 download

DESCRIPTION

Por uma web mais rápida, mostrarei um pouco como é importante a performance em uma aplicação web e como isso pode retornar grande valor para você(profissional) e empresa. Grandes dicas bobas mas que bem usadas são de grande valor.

TRANSCRIPT

Page 1: Performance Front-end | Front In Maceió

PERFORMANCE FRONT-END

Com resultado

segunda-feira, 29 de outubro de 12

Page 2: Performance Front-end | Front In Maceió

GIOVANNI KEPPELEN

http://github.com/keppelen/talkssegunda-feira, 29 de outubro de 12

Page 3: Performance Front-end | Front In Maceió

http://braziljs.orgsegunda-feira, 29 de outubro de 12

Page 4: Performance Front-end | Front In Maceió

+20 Milhões usuários+22 Milhões acessos por mês

Presente em 4 países(Brasil, Argentina Chile, México)+75 Milhões pageviews mês

segunda-feira, 29 de outubro de 12

Page 5: Performance Front-end | Front In Maceió

“1 - FIRST AND FOREMOST, WE BELIEVE THAT SPEED IS MORE

THAN A FEATURE. SPEED IS THE MOST IMPORTANT FEATURE.”

Fred Wilson

http://www.businessinsider.com/10-golden-principles-successful-web-apps-2010-3segunda-feira, 29 de outubro de 12

Page 6: Performance Front-end | Front In Maceió

segunda-feira, 29 de outubro de 12

Page 7: Performance Front-end | Front In Maceió

segunda-feira, 29 de outubro de 12

Page 8: Performance Front-end | Front In Maceió

E AI? COMO FAZER MEUS USUÁRIOS FICAREM ASSIM?

segunda-feira, 29 de outubro de 12

Page 9: Performance Front-end | Front In Maceió

COMO ERA?ERA TRISTE MESMO.

* Load página em 9.5s* Vários e vários padrões* Pouca documentação (quase nenhuma)

* Código redundante* Crescimento muito acelerado* Novos Serviços

segunda-feira, 29 de outubro de 12

Page 10: Performance Front-end | Front In Maceió

PRECISAMOS FAZER ALGO!!!

MAS O QUE É MAIS IMPORTANTE?

segunda-feira, 29 de outubro de 12

Page 11: Performance Front-end | Front In Maceió

OTIMIZAR

DEFINIR PADRÕES

REUTILIZAR

DOCUMENTAR

AGILIZAR

segunda-feira, 29 de outubro de 12

Page 12: Performance Front-end | Front In Maceió

segunda-feira, 29 de outubro de 12

Page 13: Performance Front-end | Front In Maceió

OTIMIZAR

DEFINIR PADRÕES

REUTILIZAR

DOCUMENTAR

AGILIZAR

segunda-feira, 29 de outubro de 12

Page 14: Performance Front-end | Front In Maceió

O QUE CONSEGUIMOS COM ISSO?

segunda-feira, 29 de outubro de 12

Page 15: Performance Front-end | Front In Maceió

* Aumento de 70% na criação de novas páginas e manutenção do código* Com isso temos mais tempo para criar coisas novas.

O QUE CONSEGUIMOS COM ISSO?

segunda-feira, 29 de outubro de 12

Page 16: Performance Front-end | Front In Maceió

TANTAS REGRAS O QUE FAZER?

Habilite GZIP

Minifique Javascript

Minifique CSS

Comprima HTML

Não redimensione imagens no HTML

Otimize as imagens

Pense no formato das imagens

Diminua Cookies e headers

Junte arquivos Javascript

Junte arquivos CSS

Use Sprites

Coloque o Javascript no fim

Coloque o CSS no topo

Adie o carregamento do que puder

Otimize o First-View

Use ferramentas de diagnóstico

segunda-feira, 29 de outubro de 12

Page 17: Performance Front-end | Front In Maceió

ANALISANDO A APLICAÇÃOConcluimos que fazer os seguintes tópicos traria resultado, e

seria de grande importância.

1- Servir sempre o conteúdo estático, sem ir ao banco toda vez que um “usuário” entrasse ou desse F5 na página.

2 - Minificar e juntar arquivos CSS/JS/

3 - Diminuir requests (img)

segunda-feira, 29 de outubro de 12

Page 18: Performance Front-end | Front In Maceió

1 - SERVIR CONTEÚDO ESTÁTICOTecnologia usada NGINX

segunda-feira, 29 de outubro de 12

Page 19: Performance Front-end | Front In Maceió

1 - SERVIR CONTEÚDO ESTÁTICO

* Isso era o “pecado” de nossa aplicação.* Era necessário 20 a 45 servidores para dar conta dos acessos.

* Load da página em 8s a 10s. Inaceitável :-)

segunda-feira, 29 de outubro de 12

Page 20: Performance Front-end | Front In Maceió

1 - SERVIR CONTEÚDO ESTÁTICO

O que ganhamos com isso?

* Diminuimos requisições ao banco, agora ao invés de ir no banco toda hora que o usuário entra no site, vamos apenas de

5 em 5min, pois alguma coisa na oferta pode ter mudado.

* Dimuimos de 20/45 para apenas 5/10 servidores.

* Load da página em 6 - 7s, pois agora isso já está no cache, só precisamos chamar arquivos estáticos.

segunda-feira, 29 de outubro de 12

Page 21: Performance Front-end | Front In Maceió

2 - ARQUIVOS ESTÁTICOS

segunda-feira, 29 de outubro de 12

Page 22: Performance Front-end | Front In Maceió

2 - ARQUIVOS ESTÁTICOS

Nossa aplicação tinha mais de 4 arquivos JS na página para ser executado. Na maioria das vezes, eram chamados arquivos que

não estavam sendo utilizados.

segunda-feira, 29 de outubro de 12

Page 23: Performance Front-end | Front In Maceió

2 - ARQUIVOS ESTÁTICOS

SquishIt

REQUESTS CSS/JS

MAS..... PORQUE....

REQUESTS CSS/JS

segunda-feira, 29 de outubro de 12

Page 24: Performance Front-end | Front In Maceió

2 - ARQUIVOS ESTÁTICOSREQUESTS CSS/JS

YUI Compressor

Compiler (Google)

UglifyJS LESS Compiler

segunda-feira, 29 de outubro de 12

Page 25: Performance Front-end | Front In Maceió

2 - ARQUIVOS ESTÁTICOSREQUESTS CSS/JS

FÁCIL, ÁGIL, FÁCIL INSTALAÇÃO, FUNCIONA PERFEITAMENTE

REQUESTS CSS/JS

segunda-feira, 29 de outubro de 12

Page 26: Performance Front-end | Front In Maceió

2 - ARQUIVOS ESTÁTICOSREQUESTS IMAGENS

segunda-feira, 29 de outubro de 12

Page 27: Performance Front-end | Front In Maceió

2 - ARQUIVOS ESTÁTICOSREQUESTS IMAGENS

Problema!!!

segunda-feira, 29 de outubro de 12

Page 28: Performance Front-end | Front In Maceió

2 - ARQUIVOS ESTÁTICOSREQUESTS IMAGENS

Problema!!!

Problema!!!

segunda-feira, 29 de outubro de 12

Page 29: Performance Front-end | Front In Maceió

2 - ARQUIVOS ESTÁTICOSREQUESTS IMAGENS

Problema!!!

Problema!!!

Problema!!!segunda-feira, 29 de outubro de 12

Page 30: Performance Front-end | Front In Maceió

2 - ARQUIVOS ESTÁTICOSREQUESTS IMAGENS

Mas porque??

segunda-feira, 29 de outubro de 12

Page 31: Performance Front-end | Front In Maceió

2 - ARQUIVOS ESTÁTICOSREQUESTS IMAGENS

* O carregamento das imagens era o que mais tinha problemas, pois eram publicada mais de 90 ofertas por dia.

* Como resolver isso de forma rápida e prática?

* Não podemos reescrever “back-end” para isso.

segunda-feira, 29 de outubro de 12

Page 32: Performance Front-end | Front In Maceió

2 - ARQUIVOS ESTÁTICOSREQUESTS IMAGENS

Lazy LoadSOLUÇÃO RÁPIDA, E PARA NOSSA APLICAÇÃO SERVIU MUITO BEM

segunda-feira, 29 de outubro de 12

Page 33: Performance Front-end | Front In Maceió

2 - ARQUIVOS ESTÁTICOSREQUESTS IMAGENS

Lazy Load é um plugin jQuery. Ele atrasa o carregamento das imagens. Imagens fora da viewport não será carregado antes

que o usuário role a página. Isto é o oposto do pré-carregamento de imagem.

Com isso o browser depois da rolagem so tera que carregar as imagnes que estiver na viewport. O que ganhamos isso? Reduzir

a carga no servidor.

segunda-feira, 29 de outubro de 12

Page 34: Performance Front-end | Front In Maceió

O QUE CONSEGUIMOS COM ISSO?

* First View para 5s - Second View para menos de 4s

* de 10 request de arquivos estáticos para apenas 2

* Economia de $16.000,00 de servidores por dia

segunda-feira, 29 de outubro de 12

Page 35: Performance Front-end | Front In Maceió

R$ 1.000.000,00

segunda-feira, 29 de outubro de 12

Page 36: Performance Front-end | Front In Maceió

PRÓXIMOS PASSOS

* Otimizar ainda mais. ( Claro =] )

* Uso de Apis HTML5/JS

* Open Social API

segunda-feira, 29 de outubro de 12

Page 37: Performance Front-end | Front In Maceió

GITHUB.COM/KEPPELENGITHUB.COM/PEIXEURBANO

segunda-feira, 29 de outubro de 12

Page 38: Performance Front-end | Front In Maceió

Obrigado@KEPPELEN

segunda-feira, 29 de outubro de 12