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

324
-1

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
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
324
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×