Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Performance na web, além do framework
Tá Safo em Ação!
22/11/2013
Belém – Pará – Brasil
Alexandre Cardoso (@accbel)
●

Analista de desempenho – InMetrics - SP

●

Desenvolvendo software há 13 anos

●

Java, Sca...
Desenvolvimento para a Web
O que (normalmente) está
nas preocupações do
desenvolvedor web?
Linguagem?
Framework?
SQL? NoSQL?
Front-end?
UX?
SEO?
Automated tests?
Mobile?
Social?
Responsive design?
Por quê precisamos nos preocupar com isso?
“Queremos implementar projetos
e produtos de sucesso”

“Queremos aproveitar
oportunidades
profissionais e de
mercado”

“Qu...
Fatores técnicos e não-técnicos

Isolados ou combinados

Determinam o sucesso ou fracasso
Um dos mais importantes é:

Experiência de Usuário (UX)
Experiência de Usuário - UX
“Define como pessoas se sentem quando interagem com um sistema (…),
incluindo emoções, crenças...
“Percepção”

“Reação”

“Realização”
Usuários tendo a melhor percepção de seu site

Usuários realizados ao buscar e acessar seu site

Usuário reagem com satisf...
“(...) mas ele só carrega rapidamente na internet de 1Gbps do
escritório”
UX é super importante, assim como outros fatores, mas...
“Sites lentos não vivem pra contar histórias”
Performance importa pra quem?

“33% of broadband shoppers are unwilling to wait more than
four seconds for a web page to l...
Entretanto...

“Brasil está em 72º lugar
no ranking de velocidade
média de internet”

Fonte:http://www.tecmundo.com.br/int...
Desenvolvimento web para a realidade brasileira, cada vez
mais móvel, conciliando inovação, UX e performance, é um
grande ...
O que você,
desenvolvedor web,
pode fazer a respeito?
Você é livre para fazer
escolhas que suportem
seu projeto...
Para todas elas, hoje e por muito tempo (ainda), o mesmo
produto final

O front-end
Pensar o front-end desde o início, voltado para performance,
em 3 pilares

Design

Código

Requisições
Design e performance
●

Cuidado com imagens (quantidade e tamanho)

650 KB (?!)
Design e performance
●

Definir imagens de tamanhos distintos e serví-las quando necessário,
evitando redimensionamento no...
Design e performance
●

Definir e aplicar a taxa de compressão adequada, sem perda
excessiva de qualidade

Arquivo origina...
Código e performance
●

Evite código inline/embarcado no seu HTML.

●

Difícil de manter

●

Aumenta o tamanho (KB)
do HTM...
Código e performance
●

Use referências externas para os assets do HTML.

●

Fácil de manter

●

HTML menor (KB) e mais
en...
Código e performance
●

Não custa lembrar: CSS no topo e JS no final!

●

CSS links bloqueiam a
renderização até o fim do
...
Código e performance
●

●

●

Javascript? Uma caixinha de surpresas. Saiba o que está fazendo.

Várias maneiras de
percorr...
Requests e performance
●

Fazer download de white spaces e tabulações? “Minifique!”

●

372 bytes > 284 bytes (- 24%)

●

...
Requests e performance
●

O mesmo também vale para CSS. Comprimir para otimizar.

Mesmo efeito e 40% menor.

Como?
●

Yaho...
Requests e performance
●

Javascript, você é o próximo. #minify #compression

Como?
●

Google Closure Compiler

●

Yahoo Y...
Requests e performance
●

Várias requisições para exibir apenas uma página? Agrupar recursos
estáticos (CSS e Javascript),...
Requests e performance
●

Layout com muitas imagens (ícones, etc)? Utilize CSS Sprites

Como?
●

SmartSprites

●

Compass ...
Requests e performance
●

Se algo não muda, pegue uma vez e guarde (até mudar). Utilize o
cache do navegador.

server {
li...
Requests e performance
●

Otimize ainda mais o tamanho da resposta. Ative a compressão
HTTP
http {
...
# enable gzip compr...
Legal. Já entendi que
otimizar é muito
importante, mas...

Como saber se meu
site precisa ser
otimizado e onde?
Monitorar é preciso!
Google Page Speed Insights

●

Antigo “Google Page Speed”

●

Analisa e define um score de
uma página web para seu
desempe...
Yahoo! YSlow

●

Mesmo princípio e objetivo do
Google Page Speed Insights

●

Possui extensões/plugins para
os principais ...
O assunto é amplo! Referências sobre front-end performance
●

Improving UX Through Front-End Performance

●

Front-end per...
Linguagem, frameworks, bancos, tecnologias em geral: Suas escolhas.

Performance: O produto a ser entregue!
Obrigado!
Performance na web, além do framework
Upcoming SlideShare
Loading in …5
×

Performance na web, além do framework

508 views

Published on

Palestra sobre práticas de desenvolvimento web, com foco em performance para o front-end web, apresentada no Tá Safo em Ação, encontro da comunidade Tá Safo, em Belém do Pará, no dia 22/11/2013.

Published in: Technology
  • Be the first to comment

Performance na web, além do framework

  1. 1. Performance na web, além do framework Tá Safo em Ação! 22/11/2013 Belém – Pará – Brasil
  2. 2. Alexandre Cardoso (@accbel) ● Analista de desempenho – InMetrics - SP ● Desenvolvendo software há 13 anos ● Java, Scala, Ruby, Web, Arquitetura, Performance ● TáSafoConf 2012 ● Editor do Scalando.com.br
  3. 3. Desenvolvimento para a Web
  4. 4. O que (normalmente) está nas preocupações do desenvolvedor web?
  5. 5. Linguagem? Framework? SQL? NoSQL? Front-end? UX? SEO? Automated tests? Mobile? Social? Responsive design?
  6. 6. Por quê precisamos nos preocupar com isso?
  7. 7. “Queremos implementar projetos e produtos de sucesso” “Queremos aproveitar oportunidades profissionais e de mercado” “Queremos ganhar $$$”
  8. 8. Fatores técnicos e não-técnicos Isolados ou combinados Determinam o sucesso ou fracasso
  9. 9. Um dos mais importantes é: Experiência de Usuário (UX)
  10. 10. Experiência de Usuário - UX “Define como pessoas se sentem quando interagem com um sistema (…), incluindo emoções, crenças, preferências, percepções, reações físicas e psicológicas, comportamentos e realizações do usuário que ocorrem antes, durante e após o uso.”' Fonte: http://www.touchpoints.com.br/experiencia-do-usuario
  11. 11. “Percepção” “Reação” “Realização”
  12. 12. Usuários tendo a melhor percepção de seu site Usuários realizados ao buscar e acessar seu site Usuário reagem com satisfação aos serviços do site
  13. 13. “(...) mas ele só carrega rapidamente na internet de 1Gbps do escritório”
  14. 14. UX é super importante, assim como outros fatores, mas... “Sites lentos não vivem pra contar histórias”
  15. 15. Performance importa pra quem? “33% of broadband shoppers are unwilling to wait more than four seconds for a web page to load, whereas 43% of narrowband users will not wait more than six seconds (Akamai, 2006)” “every 100 ms increase in load time of Amazon.com decreased sales by 1%” Fonte: http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/
  16. 16. Entretanto... “Brasil está em 72º lugar no ranking de velocidade média de internet” Fonte:http://www.tecmundo.com.br/internet/42327-brasil-esta-em-72-lugar-no-ranking-de-velocidade-media-de-internet.htm
  17. 17. Desenvolvimento web para a realidade brasileira, cada vez mais móvel, conciliando inovação, UX e performance, é um grande desafio. O 3G brasileiro é uma “piada” e, mesmo assim, milhões de pessoas vão fechar negócios pelo celular
  18. 18. O que você, desenvolvedor web, pode fazer a respeito?
  19. 19. Você é livre para fazer escolhas que suportem seu projeto...
  20. 20. Para todas elas, hoje e por muito tempo (ainda), o mesmo produto final O front-end
  21. 21. Pensar o front-end desde o início, voltado para performance, em 3 pilares Design Código Requisições
  22. 22. Design e performance ● Cuidado com imagens (quantidade e tamanho) 650 KB (?!)
  23. 23. Design e performance ● Definir imagens de tamanhos distintos e serví-las quando necessário, evitando redimensionamento no navegador. 150x150 71x71 30x30 <img alt="A_picture" src="/images/picture_150_150.jpg"> <img alt="A_picture" src="/images/picture_71_71.jpg"> <img alt="A_picture" src="/images/picture_30_30.jpg"> TIP: Evitar download de uma imagem pesada, onde ela não é necessária
  24. 24. Design e performance ● Definir e aplicar a taxa de compressão adequada, sem perda excessiva de qualidade Arquivo original (PNG): 43KB JPEG – Compressão 100% - 24KB JPEG – Compressão 80% - 14KB TIP: Largura de banda é um recurso escasso e não-controlado. Otimizar, sempre que possível.
  25. 25. Código e performance ● Evite código inline/embarcado no seu HTML. ● Difícil de manter ● Aumenta o tamanho (KB) do HTML ● Não pode ser “cacheado”
  26. 26. Código e performance ● Use referências externas para os assets do HTML. ● Fácil de manter ● HTML menor (KB) e mais enxuto ● Candidato ao cache do navegador
  27. 27. Código e performance ● Não custa lembrar: CSS no topo e JS no final! ● CSS links bloqueiam a renderização até o fim do download. Antecipe. ● Tags <script> bloqueiam downloads de outros recursos, como imagens. Deixe por último.
  28. 28. Código e performance ● ● ● Javascript? Uma caixinha de surpresas. Saiba o que está fazendo. Várias maneiras de percorrer um array Diferenças absurdas de performance ● Fazer cache evita recálculos durante a execução ● jQuery facilita muito, mas tem seu preço
  29. 29. Requests e performance ● Fazer download de white spaces e tabulações? “Minifique!” ● 372 bytes > 284 bytes (- 24%) ● Como? HTML Compressor
  30. 30. Requests e performance ● O mesmo também vale para CSS. Comprimir para otimizar. Mesmo efeito e 40% menor. Como? ● Yahoo YUI Compressor ● SAAS “:compressed” ● CSSO
  31. 31. Requests e performance ● Javascript, você é o próximo. #minify #compression Como? ● Google Closure Compiler ● Yahoo YUI Compressor ● UglifyJS Mesmo efeito e 49% menor.
  32. 32. Requests e performance ● Várias requisições para exibir apenas uma página? Agrupar recursos estáticos (CSS e Javascript), para servir de uma vez só. Download mais eficiente, página renderizada mais rapidamente Como? ● GruntJS + Plugins ● Wro4J
  33. 33. Requests e performance ● Layout com muitas imagens (ícones, etc)? Utilize CSS Sprites Como? ● SmartSprites ● Compass Spriting .icon-edit { background-image: url("../img/glyphicons-halflings-white.png"); background-position: -96px -72px; }
  34. 34. Requests e performance ● Se algo não muda, pegue uma vez e guarde (até mudar). Utilize o cache do navegador. server { listen 80; server_name www.mysite.com.br; root /path/to/site; ... location ~* .(?:ico|css|js|gif|jpe?g|png)$ { expires 30d; expires max; add_header Cache-Control public; } .... Atenção! Não esqueça de “assinar” as URL's dos assets, para ter controle sobre a renovação do cache ● /assets/main.js?v123 1ª visita ao site ● <script src=”/assets/main.js?v123”> → Requisita o arquivo ao servidor – 200 (OK) 2ª visita ao site ● <script src=”/assets/main.js?v123”> → Utiliza a cópia armazenada no cache local
  35. 35. Requests e performance ● Otimize ainda mais o tamanho da resposta. Ative a compressão HTTP http { ... # enable gzip compression gzip on; gzip_min_length 1100; gzip_buffers 4 32k; gzip_types text/html application/x-javascript text/css; gzip_vary on; # end gzip configuration ... } $ curl --header "Accept-Encoding: gzip,deflate,sdch" -I http://www.mysite.com HTTP/1.1 200 OK Server: nginx ... Content-Encoding: gzip
  36. 36. Legal. Já entendi que otimizar é muito importante, mas... Como saber se meu site precisa ser otimizado e onde?
  37. 37. Monitorar é preciso!
  38. 38. Google Page Speed Insights ● Antigo “Google Page Speed” ● Analisa e define um score de uma página web para seu desempenho ● Sugere um conjunto de melhorias para diversas áreas do front-end de uma página web ● Oferece uma API para análise remota. Ideal para integrar ao seu ambiente de CI (Jenkins, etc)
  39. 39. Yahoo! YSlow ● Mesmo princípio e objetivo do Google Page Speed Insights ● Possui extensões/plugins para os principais navegadores ● Permite executar uma análise via linha de comando (requer NodeJS/NPM)
  40. 40. O assunto é amplo! Referências sobre front-end performance ● Improving UX Through Front-End Performance ● Front-end performance for web designers and front-end developers ● How to lose WEIGHT (in the browser) ● Web Performance Best Practices ● Web Assets – Tips for Better Organization and Performance ● Google :)
  41. 41. Linguagem, frameworks, bancos, tecnologias em geral: Suas escolhas. Performance: O produto a ser entregue!
  42. 42. Obrigado!

×