Otimizando seu Site para Alta Performance - ConaSearch

7,565 views

Published on

Slides da palestra ministrada no ConaSearch, sobre otimizar a velocidade de carregamento do website.

Published in: Technology
  • Be the first to comment

Otimizando seu Site para Alta Performance - ConaSearch

  1. 1. Otimizando seu site para Alta Performance
  2. 2. William Rufino 2 Bacharel em Ciência da Computação Mestrando em Sistemas de Informações e Gestão do Conhecimento Sócio e professor de SEO no SEM Dúvida
  3. 3. CRONOGRAMA 1. Por que se preocupar com a velocidade de carregamento? 2. Como medir o desempenho do seu website? 3. Como melhorar o desempenho do website? 3
  4. 4. Por que se preocupar com a velocidade de carregamento?
  5. 5. Ninguém gosta de ficar esperando!
  6. 6. 6 Fonte: http://goo.gl/XPMFUp 1%O Google utiliza a velocidade de carregamento como um fator de rankeamento para 1% das palavras-chave mais concorridas
  7. 7. 7 Fonte: http://goo.gl/aTk9hg 2Usuários esperam que o seu site irá carregar em 2 segundos ou menos.
  8. 8. 8 Fonte: http://goo.gl/aTk9hg 340% dos usuários irão abandonar qualquer website que demore mais que 3 segundos para carregar.
  9. 9. 9 16%Um atraso de 1 segundo(ou 3 segundos esperando) diminui a satisfação do usuário em cerca de 16%. Fonte: http://goo.gl/DAOkye
  10. 10. 10 Fonte: http://goo.gl/DAOkye 33%33% dos usuários pesquisados esperam que um site móvel carregue tão ou mais rápido que um site para desktop.
  11. 11. 11 Fonte: http://goo.gl/DAOkye 52%52% dos usuários dizem que um carregamento rápido é importante para a lealdade em relação ao website.
  12. 12. 12 Fonte: http://goo.gl/oT7Kbg YahooCom um tempo de carregamento 400ms mais devagar, o Yahoo descobriu que tem uma queda de 5% a 9% no seu tráfego.
  13. 13. 13 Fonte: http://goo.gl/Aslklj FirefoxA equipe do Firefox diminuiu em 2,2s a média de velocidade de carregamento e, consequentemente, aumentou o número de downloads em 15.4%, gerando mais de 60 milhões de downloads adicionais por ano.
  14. 14. 14 Fonte: http://goo.gl/Aslklj AmazonA Amazon, através de testes, descobriu que cada 100ms reduzido no tempo de carregamento, gera um aumento de 1% no faturamento.
  15. 15. 15 Fonte: http://goo.gl/Aslklj GoogleO Google aumentou seu número de resultados de 10 para 30 por página, o que causou um aumento de 0.5s no tempo de carregamento, diminuindo em 20% do tráfego das buscas.
  16. 16. Como mensurar o desempenho do meu website?
  17. 17. 17 PAGESPEED O Pagespeed é a ferramenta da Google utilizada para mensurar a velocidade de carregamento do website, além de dar dicas de como otimiza-lo.
  18. 18. 18 YSLOW O Yahoo também disponibiliza uma ferramenta para medir a velocidade do website de forma gratuita, o YSlow.
  19. 19. 19 GTMETRIXO GTmetrix é uma ferramenta que utiliza dados do YSlow e Pagespeed para mensuração da performance do website. A sua vantagem é unir os dados das duas ferramentas anteriores em uma única interface.
  20. 20. 20 PINGDOMO PINGDOM também possui uma ferramenta para a mensuraçào do desempenho de websites. Ele também lhe da várias dicas de como melhorar o desempenho. http://tools.pingdom.com/fpt/
  21. 21. Como fazer?
  22. 22. 22 Hospedagem Servidores Virtuais ou Dedicados possuem um melhor desempenho e controle sobre seu website.
  23. 23. 23 ServidorNão só a escolha do software! A sua configuração correta é necessária. É facil achar pesquisas mostrando o por que do Nginx ser melhor que o Apache.
  24. 24. 24 GZIPUma das configurações mais fáceis de ser feita, é o GZIP. Com ele todo conteúdo de texto (HTML, CSS, JS) é comprimido o que pode cortar até 50% do tráfego.
  25. 25. 25 ImagensOtimize as suas imagens! Coloque as dimensões da imagem diretamente no HTML. Evite <img src=“imagem.jpg” />.
  26. 26. 26 ImagensOtimize as suas imagens! Não faça o redimensionamento das imagens via HTML, ou seja, redimensione suas imagens antes do upload ou via servidor.
  27. 27. 27 ImagensOtimize as suas imagens! Softwares como o Smuth.it do Yahoo, optipng, e jpegoptim podem ajudar a reduzir o tamanho da imagem, removendo metadados que não são necessários.
  28. 28. 28 SpritesUtilize CSS Sprites onde for possível. Com o seu uso, o número de requisições é reduzido, causando assim uma melhora no desempenho.
  29. 29. 29 Minify “Minifique" os seus arquivos CSS e JavaScript. Com isso os arquivos ficarão menores e carregarão mais rápido.
  30. 30. 30 CombinarCombine os arquivos Javascript e CSS para diminuir a quantidade de requisições. Há diversas ferramentas para fazer isso somente em produção, no deploy ou dinâmicamente.
  31. 31. 31 JS E CSSColoque seus CSS’s no topo e JS’s no fim da página. Javascript’s no topo impedem a renderização da página, já o CSS no topo impede que a página carregue antes do estilo.
  32. 32. 32 HTMLA compressão do HTML, removendo espaços, comentários, e caracteres desnecessários também reduz o tamanho do arquivo, fazendo com que seja carregado mais rápido.
  33. 33. 33 CACHEConfigure os headers corretamente para que os arquivos estáticos possam ser “cacheados" pelo navegador, evitando assim, novas requisições quando o usuário visitar novamente a página.
  34. 34. 34 CACHEOpcode cache, como APC, XCache e Zend Opcache são ótimas ferramentas para melhorar o desempenho de sua aplicação.
  35. 35. 35 CDNUm CDN (Content Distribution Network) pode ajudar a servir arquivos estáticos do seu website, geralmente da localização geográfica mais próxima, melhorando assim o tempo de resposta.
  36. 36. 36 PLUGINSPara quem faz uso de CMS’s como o WordPress, verifique quais plugins estão consumindo mais recursos e veja se podem ser substituídos. Muitos plugins são mal programados, em que não existe a preocupação com o desempenho. Há plugins que podem auxiliar nessa análise, como o P3 Profiler.
  37. 37. 37 LAZY LOADUtilize Lazy Load para só carregar imagens e outros componentes quando o usuário fizer o scroll da página. Além de carregar mais rápido, irá também economizar banda.
  38. 38. Obrigado! semduvida.net www.williamrufino.com.br william@semduvida.net twitter.com/williamhrs facebook.com/williamhrs 38

×