desempenho web
TRANSCRIPT
![Page 1: Desempenho web](https://reader034.vdocuments.site/reader034/viewer/2022052622/5597ca801a28ab5d608b46a6/html5/thumbnails/1.jpg)
Desempenho webDesempenho web
Fernando GamaAcadêmico de Sistemas de Informação - UFPA
Técnico em Informática - IFPA
![Page 2: Desempenho web](https://reader034.vdocuments.site/reader034/viewer/2022052622/5597ca801a28ab5d608b46a6/html5/thumbnails/2.jpg)
Desempenho webDesempenho web
Dicas para melhorar Dicas para melhorar a a perfomanceperfomance do do
website!website!
![Page 3: Desempenho web](https://reader034.vdocuments.site/reader034/viewer/2022052622/5597ca801a28ab5d608b46a6/html5/thumbnails/3.jpg)
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
![Page 4: Desempenho web](https://reader034.vdocuments.site/reader034/viewer/2022052622/5597ca801a28ab5d608b46a6/html5/thumbnails/4.jpg)
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.
![Page 5: Desempenho web](https://reader034.vdocuments.site/reader034/viewer/2022052622/5597ca801a28ab5d608b46a6/html5/thumbnails/5.jpg)
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.
![Page 6: Desempenho web](https://reader034.vdocuments.site/reader034/viewer/2022052622/5597ca801a28ab5d608b46a6/html5/thumbnails/6.jpg)
Desempenho webDesempenho web
4. Design Clean.4. Design Clean.
O que é realmente necessário?
Qual o foco do site?
Simples != feio.
![Page 7: Desempenho web](https://reader034.vdocuments.site/reader034/viewer/2022052622/5597ca801a28ab5d608b46a6/html5/thumbnails/7.jpg)
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.
![Page 8: Desempenho web](https://reader034.vdocuments.site/reader034/viewer/2022052622/5597ca801a28ab5d608b46a6/html5/thumbnails/8.jpg)
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;
}
![Page 9: Desempenho web](https://reader034.vdocuments.site/reader034/viewer/2022052622/5597ca801a28ab5d608b46a6/html5/thumbnails/9.jpg)
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}
![Page 10: Desempenho web](https://reader034.vdocuments.site/reader034/viewer/2022052622/5597ca801a28ab5d608b46a6/html5/thumbnails/10.jpg)
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.
![Page 11: Desempenho web](https://reader034.vdocuments.site/reader034/viewer/2022052622/5597ca801a28ab5d608b46a6/html5/thumbnails/11.jpg)
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.
![Page 12: Desempenho web](https://reader034.vdocuments.site/reader034/viewer/2022052622/5597ca801a28ab5d608b46a6/html5/thumbnails/12.jpg)
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!
![Page 13: Desempenho web](https://reader034.vdocuments.site/reader034/viewer/2022052622/5597ca801a28ab5d608b46a6/html5/thumbnails/13.jpg)
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.
![Page 14: Desempenho web](https://reader034.vdocuments.site/reader034/viewer/2022052622/5597ca801a28ab5d608b46a6/html5/thumbnails/14.jpg)
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!
![Page 15: Desempenho web](https://reader034.vdocuments.site/reader034/viewer/2022052622/5597ca801a28ab5d608b46a6/html5/thumbnails/15.jpg)
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!
![Page 16: Desempenho web](https://reader034.vdocuments.site/reader034/viewer/2022052622/5597ca801a28ab5d608b46a6/html5/thumbnails/16.jpg)
Desempenho webDesempenho web
12. CSS no topo e Javascript embaixo. 12. CSS no topo e Javascript embaixo.
Título auto explicativo.
![Page 17: Desempenho web](https://reader034.vdocuments.site/reader034/viewer/2022052622/5597ca801a28ab5d608b46a6/html5/thumbnails/17.jpg)
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).
![Page 18: Desempenho web](https://reader034.vdocuments.site/reader034/viewer/2022052622/5597ca801a28ab5d608b46a6/html5/thumbnails/18.jpg)
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
![Page 19: Desempenho web](https://reader034.vdocuments.site/reader034/viewer/2022052622/5597ca801a28ab5d608b46a6/html5/thumbnails/19.jpg)
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.
![Page 20: Desempenho web](https://reader034.vdocuments.site/reader034/viewer/2022052622/5597ca801a28ab5d608b46a6/html5/thumbnails/20.jpg)
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
![Page 21: Desempenho web](https://reader034.vdocuments.site/reader034/viewer/2022052622/5597ca801a28ab5d608b46a6/html5/thumbnails/21.jpg)
OBRIGADO!OBRIGADO!