Download - Desempenho web
Desempenho webDesempenho web
Fernando GamaAcadêmico de Sistemas de Informação - UFPA
Técnico em Informática - IFPA
Desempenho webDesempenho web
Dicas para melhorar Dicas para melhorar a a perfomanceperfomance do do
website!website!
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
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.
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.
Desempenho webDesempenho web
4. Design Clean.4. Design Clean.
O que é realmente necessário?
Qual o foco do site?
Simples != feio.
Desempenho webDesempenho web5. Redução da quantidade de request no 5. 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.
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;
}
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}
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.
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.
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!
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.
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!
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!
Desempenho webDesempenho web
12. CSS no topo e Javascript embaixo. 12. CSS no topo e Javascript embaixo.
Título auto explicativo.
Desempenho webDesempenho web13. Inspecione suas páginas para encontrar os 13. 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).
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
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.
Fontes de pesquisaFontes de pesquisa10 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
OBRIGADO!OBRIGADO!