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!