desempenho web

Desempenho webDesempenho web

Fernando GamaAcadêmico de Sistemas de Informação - UFPA

Técnico em Informática - IFPA


Dicas para melhorar Dicas para melhorar a a perfomanceperfomance do do

website!website!


1. Separe HTML do CSS.1. Separe HTML do CSS.

Boas práticas

Divisão em camadas

CSS: design

HTML: conteúdo


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.


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.


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 {


}

.coritiba {


}


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}


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.


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.


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!


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.


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!

https://developers.google.com/speed/libraries/devguide?hl=pt-br#jquery


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).


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


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!

desempenho web

Technology