Desempenho web

293 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Desempenho web

  1. 1. Desempenho webDesempenho web Fernando Gama Acadêmico de Sistemas de Informação - UFPA Técnico em Informática - IFPA
  2. 2. Desempenho webDesempenho web Dicas para melhorarDicas para melhorar aa perfomanceperfomance dodo website!website!
  3. 3. Desempenho webDesempenho web 1. Separe HTML do CSS.1. Separe HTML do CSS.  Boas práticas  Divisão em camadas  CSS: design  HTML: conteúdo
  4. 4. Desempenho webDesempenho web 2. Script web analytics no rodapé.2. Script web analytics no rodapé.  Contabilização de visitas: controle  Javascript no lado servidor (Ferramentas)  Recomenda-se o uso de script no footer.
  5. 5. Desempenho webDesempenho web 3. Redução do Javascript.3. Redução do Javascript.  Técnica do javascript minify.  Cada espaço é valioso!  Recomenda-se: scripts.js, exclusão de espaços desnecessários, nomes curtos as funções.  Ferramentas: Yui Compressor ou Google Closure Compiler.  Repositório de código.
  6. 6. Desempenho webDesempenho web 4. Design Clean.4. Design Clean.  O que é realmente necessário?  Qual o foco do site?  Simples != feio.
  7. 7. Desempenho webDesempenho web 5. Redução da quantidade de request no5. Redução da quantidade de request no servidor.servidor.  Deve ser em conjunto com a equipe do projeto.  Programadores + designers = CLEANS.  Uma classe dentro de um css é uma requisição a menos no servidor.  Tente reutilizar a imagem.  Utilizar CSS Sprites.
  8. 8. CSS SpritesCSS Sprites <ul> <li class="escudos atletico-mg"></li> <li class="escudos botafogo"></li> <li class="escudos coritiba"></li> </ul> .escudos { background: url('images/sprite.png') no-repeat; } .atletico-mg { background-position: 0 -416px; } .botafogo { background-position: 0 -557px; } .coritiba { background-position: 0 -185px; }
  9. 9. Desempenho webDesempenho web 6. Resumir o CSS.6. Resumir o CSS.  Colocar as declarações uma a frente da outra. #exemplo { float: left; margin-left: 10px; margin-right: 10px; margin-top: 10px; margin-bottom: 10px; border: 1px solid #CCCCCC; width: 255px; height:150px; position: relative; } #exemplo {float:left; margin:10px; border:1px solid #CCC; width: 255px; height:150px; position: relative}
  10. 10. Desempenho webDesempenho web 7. Coloque o Javascript quando necessário.7. Coloque o Javascript quando necessário.  É preciso ter cuidado ao utilizar includes e acabar carregando scripts desnecessários.  Scripts só devem ser chamados somente onde forem necessário.
  11. 11. Desempenho webDesempenho web 8. Otimize o tamanho das imagens.8. Otimize o tamanho das imagens.  Banda larga não é desculpa!  Diminuir a qualidade no Photoshop.  Converte as imagens (www.jpegmini.com).  Ficar atento ao melhor formato(extensão) da imagem.
  12. 12. Desempenho webDesempenho web 9. Não use javascript proprietário de browsers.9. Não use javascript proprietário de browsers.  Script é carregado mesmo se o browser não suportá-lo.  Certifique-se!
  13. 13. Desempenho webDesempenho web 10. Utilize cache no servidor.10. Utilize cache no servidor.  Há trechos importantes do site que merecem ser cacheados.  Scripts e folhas de estilo.  Navegador do usuário carregará mais rapidamente o conteúdo.
  14. 14. Desempenho webDesempenho web 11. Use serviços de terceiros.11. Use serviços de terceiros.  Não precisa hospedar Jquery no seu servidor.  Que tal utilizar o do Google: https://developers.google.com/speed/libraries/devguide?hl=pt-br#jquery  Lembre-se: Cache!
  15. 15. Desempenho webDesempenho web 11. Use serviços de terceiros.11. Use serviços de terceiros.  Não precisa hospedar Jquery no seu servidor.  Que tal utilizar o do Google: https://developers.google.com/speed/libraries/devguide?hl=pt-br#jquery  Lembre-se: Cache!
  16. 16. Desempenho webDesempenho web 12. CSS no topo e Javascript embaixo.12. CSS no topo e Javascript embaixo.  Título auto explicativo.
  17. 17. Desempenho webDesempenho web 13. Inspecione suas páginas para encontrar os13. Inspecione suas páginas para encontrar os culpados.culpados.  Verifique quem são os componentes desnecessários ou que podem ser otimizados.  Firebug é uma das ferramentas de ajuda. (Aba Rede).
  18. 18. Desempenho webDesempenho web 14. Utilize compressão server side.14. Utilize compressão server side.  Busque orientações com o servidor de hospedagem.  Guia de instalação: http://schroepl.net/projekte/mod_gzip/install.htm
  19. 19. Desempenho webDesempenho web 15. Não redimensione imagens no HTML.15. Não redimensione imagens no HTML.  Nada de atributos width e height para redimensionar o tamanho da imagem.  Sirva as imagens com os tamanhos corretos.  Coloque o width e height a todas as imagens para ajudar o browser nos cálculos das páginas.
  20. 20. Fontes de pesquisaFontes de pesquisa 10 formas de melhorar a performance de um web site. http://www.uolhost.com.br/blog/top-10-formas-de-melhorar-a- performance-de-um-website#rmcl. <Acesso em 31 de maio>. Como otimizar a performance de um site. http://www.oficinadanet.com.br/artigo/desenvolvimento/como-otimizar-a- performance-de-um-site. <Acesso em 31 de maio>. 8 maneiras de melhorar a performance de um site. http://desenvolvimentoparaweb.com/miscelanea/8-maneiras-de-melhorar- a-performance-de-um-site/. <Acesso e 31 de maio>. 7 práticas para um site otimizado. http://blog.caelum.com.br/top-7-praticas-para-um-site-otimizado/. <Acesso em 31 de maio
  21. 21. OBRIGADO!OBRIGADO!

×