O documento fornece 15 dicas para melhorar o desempenho de um site web, incluindo separar HTML e CSS, colocar scripts de análise no rodapé, reduzir JavaScript, otimizar imagens e usar cache e serviços de terceiros.

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!