Your SlideShare is downloading. ×
Desempenho web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Desempenho web

116
views

Published on

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
116
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Desempenho webDesempenho web Fernando Gama Acadêmico de Sistemas de Informação - UFPA Técnico em Informática - IFPA
  • 2. Desempenho webDesempenho web Dicas para melhorarDicas para melhorar aa perfomanceperfomance dodo website!website!
  • 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. 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. 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. Desempenho webDesempenho web 4. Design Clean.4. Design Clean.  O que é realmente necessário?  Qual o foco do site?  Simples != feio.
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. Desempenho webDesempenho web 12. CSS no topo e Javascript embaixo.12. CSS no topo e Javascript embaixo.  Título auto explicativo.
  • 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. 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. 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. 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. OBRIGADO!OBRIGADO!