Performance e
Otimização
(e servidores web)
JoomlaDay São Paulo 2013
Paulino Michelazzo
por quê WPO?
web performance optimization
43%
57%
3 sec
> 3 sec
57% dos
visitantes de
sites de viagens
saem após 3
segundos
25% mobile
1 segundo é...
- 11%
pageviews
- 7%
conversões
- 16%
satisfação
1.6 bilhões de dólares
em vendas anuais
25% de acréscimo em pageviews
7 a 12% aumento nas vendas
50% de redução de hardware
definindo
performance
é lento ou está lento?
O Joomla é lento?
Não!
Desenvolvedores e
designers o tornam
lento
1ª regra
definir se o website é lento
ou se está lento
o que é lento?
aquilo que impacta na
conversão de usuários
14% 86%
backend frontend
10.91.6
Top 300K
80 a 90% das lesmas
estão no front-end
Mate-as antes
2ª regra
80 ~ 90% no Joomla!
template
• Arquivos JavaScript
• Arquivos CSS
• Imagens
• Requisições HTTP
• DNS Lookup’s
JavaScript
• Colocá-los no fim do código
• Minificar arquivos
• Carregar arquivos externos
assincronamente
• Combinar arquiv...
Carga assíncrona
var script = document.createElement('script'),
scripts = document.getElementsByTagName('script')[0];
scri...
FiF - frame in frame
(function() {
var url = 'http://example.org/js.js';
var iframe = document.createElement('iframe');
(i...
CSS
• Colocá-los no início do código
• Minificar arquivos
• Fugir de @import
• Combinar arquivos
98k 25k
73k
Imagens
53k 1.9k
51.1k
97%
Imagens
Imagens
• JPG
• Progressivas
• Qualidade
• PNG
• Indexadas
DPI não se usa em
monitor!!!
requisições HTTP
• Não fazer
• Não fazer
• Precisa fazer, reduza
• (menos css, menos js, menos imagens)
DNS Lookup’s
• Reduza
• Reduza
• Precisa mesmo? Traga para mais perto
(perto = dentro)
3ª regra
10 e 20% = rede e servidor
difícil, mas não
impossível
tempo para 1º byte
DNS lookup
Conexão inicial
Tempo de espera
cache
• APC - Alternative PHP Cache
• cache de código PHP
• Memcached
• cache banco e código
• Varnish
• cache não-autenti...
verdades, meias
verdades e mentiras
aquilo que nunca contaram para você
vários arquivos
pequenos é melhor que
um enorme
Mentira
• + requisições = mais tempo
• Tempo de download menor
• Técnicas de compressão e minificação
servidores no Brasil
são melhores
Meia verdade (meinha mesmo)
• 1ª conexão pode ser maior ou menor,
dependendo do TLD, rede, etc.
• 150ms podem valer a pena...
template responsivo
serve para mobile
Renan Calheiros(aquela mentira!)
• Reponsividade é paliativo.
• Menor performance e pouco uso das
funcionalidades de mobil...
performance
começa no servidor
Mentira
• Performance começa no projeto do
website.
• Estudo das melhores extensões, módulos
e templates.
• Codificação con...
otimização de
performace é
complicada
Verdade
• Possui regras simples mas...
• Tem-se alguma dificuldade para
implementação
• Requer conhecimento multidisciplina...
performance não é
importante
Fale isso para sua
namorada, noiva, esposa,
amante...
Last words
• Otimização é trabalhosa
(mas o resultado vale a pena)
• Otimização é experiência
(combinar ingredientes e cen...
• Serviços de otimização de
performance
• Configurações de servidores de
alto desempenho
• Projetos especiais
• Cursos e tr...
obrigado
Paulino Michelazzo
about.me/pmichelazzo
Performance e Otimização (e servidores web)
Performance e Otimização (e servidores web)
Performance e Otimização (e servidores web)
Performance e Otimização (e servidores web)
Performance e Otimização (e servidores web)
Performance e Otimização (e servidores web)
Upcoming SlideShare
Loading in...5
×

Performance e Otimização (e servidores web)

994

Published on

Palestra sobre WPO (web page optimization) proferida no JoomlaDay São Paulo 2013 em 06/07/2013.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
994
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
17
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Performance e Otimização (e servidores web)

  1. 1. Performance e Otimização (e servidores web) JoomlaDay São Paulo 2013 Paulino Michelazzo
  2. 2. por quê WPO? web performance optimization
  3. 3. 43% 57% 3 sec > 3 sec 57% dos visitantes de sites de viagens saem após 3 segundos 25% mobile
  4. 4. 1 segundo é... - 11% pageviews - 7% conversões - 16% satisfação
  5. 5. 1.6 bilhões de dólares em vendas anuais
  6. 6. 25% de acréscimo em pageviews 7 a 12% aumento nas vendas 50% de redução de hardware
  7. 7. definindo performance
  8. 8. é lento ou está lento?
  9. 9. O Joomla é lento? Não! Desenvolvedores e designers o tornam lento
  10. 10. 1ª regra definir se o website é lento ou se está lento
  11. 11. o que é lento?
  12. 12. aquilo que impacta na conversão de usuários
  13. 13. 14% 86% backend frontend 10.91.6 Top 300K
  14. 14. 80 a 90% das lesmas estão no front-end Mate-as antes 2ª regra
  15. 15. 80 ~ 90% no Joomla! template
  16. 16. • Arquivos JavaScript • Arquivos CSS • Imagens • Requisições HTTP • DNS Lookup’s
  17. 17. JavaScript • Colocá-los no fim do código • Minificar arquivos • Carregar arquivos externos assincronamente • Combinar arquivos
  18. 18. Carga assíncrona var script = document.createElement('script'), scripts = document.getElementsByTagName('script')[0]; script.async = true; script.src = url; scripts.parentNode.insertBefore(script, scripts);
  19. 19. FiF - frame in frame (function() { var url = 'http://example.org/js.js'; var iframe = document.createElement('iframe'); (iframe.frameElement || iframe).style.cssText = "width: 0; height: 0; border: 0"; iframe.src = "javascript:false"; var where = document.getElementsByTagName('script')[0]; where.parentNode.insertBefore(iframe, where); var doc = iframe.contentWindow.document; doc.open().write('<body onload="'+ 'var js = document.createElement('script');'+ 'js.src = ''+ url +'';'+ 'document.body.appendChild(js);">'); doc.close(); }()); https://www.facebook.com/note.php? note_id=10151176218703920
  20. 20. CSS • Colocá-los no início do código • Minificar arquivos • Fugir de @import • Combinar arquivos
  21. 21. 98k 25k 73k Imagens
  22. 22. 53k 1.9k 51.1k 97% Imagens
  23. 23. Imagens • JPG • Progressivas • Qualidade • PNG • Indexadas DPI não se usa em monitor!!!
  24. 24. requisições HTTP • Não fazer • Não fazer • Precisa fazer, reduza • (menos css, menos js, menos imagens)
  25. 25. DNS Lookup’s • Reduza • Reduza • Precisa mesmo? Traga para mais perto (perto = dentro)
  26. 26. 3ª regra 10 e 20% = rede e servidor difícil, mas não impossível
  27. 27. tempo para 1º byte DNS lookup Conexão inicial Tempo de espera
  28. 28. cache • APC - Alternative PHP Cache • cache de código PHP • Memcached • cache banco e código • Varnish • cache não-autenticado
  29. 29. verdades, meias verdades e mentiras aquilo que nunca contaram para você
  30. 30. vários arquivos pequenos é melhor que um enorme
  31. 31. Mentira • + requisições = mais tempo • Tempo de download menor • Técnicas de compressão e minificação
  32. 32. servidores no Brasil são melhores
  33. 33. Meia verdade (meinha mesmo) • 1ª conexão pode ser maior ou menor, dependendo do TLD, rede, etc. • 150ms podem valer a pena pela tranquilidade com suporte e custo menor. • A otimização do frontend reduz a necessidade de hosting fora.
  34. 34. template responsivo serve para mobile
  35. 35. Renan Calheiros(aquela mentira!) • Reponsividade é paliativo. • Menor performance e pouco uso das funcionalidades de mobile. • Quer/precisa de velocidade no mobile, faça um site para mobile.
  36. 36. performance começa no servidor
  37. 37. Mentira • Performance começa no projeto do website. • Estudo das melhores extensões, módulos e templates. • Codificação consciente com meta na melhor performance.
  38. 38. otimização de performace é complicada
  39. 39. Verdade • Possui regras simples mas... • Tem-se alguma dificuldade para implementação • Requer conhecimento multidisciplinar na maioria dos casos
  40. 40. performance não é importante
  41. 41. Fale isso para sua namorada, noiva, esposa, amante...
  42. 42. Last words • Otimização é trabalhosa (mas o resultado vale a pena) • Otimização é experiência (combinar ingredientes e cenários)
  43. 43. • Serviços de otimização de performance • Configurações de servidores de alto desempenho • Projetos especiais • Cursos e treinamentos www.sitelento.com.br
  44. 44. obrigado Paulino Michelazzo about.me/pmichelazzo
  1. A particular slide catching your eye?

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

×