Início
Introdução
Muitos websites de hoje em dia não tem a performance que poderiam ter, o que causa um site que demora a carregar, afastando o usuário.
Neste artigo, vou mostrar algumas dicas simples que podem melhorar, e muito, a performance do seu site. Em alguns passos, seu site poderá ter um ganho de mais de 100% na performance.
Ferramentas para medir performance
Essas ferramentas existem para facilitar a sua vida, tornando este processo algo muito mais rápido e fácil.
Neste capítulo, vou mostrar-lhes algumas ferramentas para vários navegadores, então escolha já a sua!
Firebug
Creio eu que muitos já conhecem este ótimo addon para firefox, mas vale apresentar-lo aos que não conhecem.
Firebug é um addon para Firefox que facilita muito a nossa vida, dando informações vitais para medir a performance de seu site, e outras coisas mais.
Website: GetFireBug.com
Navegadores: Mozilla Firefox
Requerimentos: Nenhum.
Firebug lite
Talvez não muitos conheçam esse aqui. Ele é uma versão lite (simplificada) do firebug, só que diferentemente do Firebug tradicional, ele funciona em vários navegadores, o que é ótimo para aqueles que não usam mais firefox (como eu).
Website: GetFireBug.com/firebuglite
Navegadores: IE6+, Firefox, Opera, Safari and Chrome.
Requerimentos: Nenhum.
Nota: Este plugin somente é instalavel no Google Chrome, em outros navegadores deve-se incluir este código dentro da sua tag head pro firebug aparecer:
YSlow
Este plugin é um complemento para o FireBug, que serve justamente para medir Performance. Mas ele faz mais que isso, ele também lhe dá dicas de como melhorar-la. De fato, este é o plugin mais útil que eu conheço para melhorar performance.
Website: http://developer.yahoo.com/yslow/
Navegadores: Firefox
Requerimentos: Firebug instalado.
Chrome Developer Toolbars
Este é o meu "plugin" favorito para performance para chrome. Sim, entre aspas, pois ele já vem instalado com o chrome.
Basta clicar com o botão direito em uma página, e selecionar Inspect Element (Inspecionar elemento, em português).
Website: Já vem com o Chrome.
Navegadores: Chrome.
Requerimentos: Nenhum.
Dicas de performance
A este ponto, você já deve ser capaz de medir a performance de seu website. Mas e agora, como vamos melhorar-la?
Quanto menos requisições HTTP, melhor
A maior parte do tempo de carregamento de uma página deve-se ao download dos componentes dela, como: imagens, folhas de estilo (css), arquivos javascript (js), arquivos flash (swf), etc. Reduzir o número desses downloads é a chave para uma página mais rápida a se carregar.
É claro que você pode criar páginas mais simples, mas isso seria voltar no tempo. O segredo para criar páginas ricas e com menos requisições é combinar arquivos.
Veja algumas formas de fazer essas combinações:
Utilize Gzip. Para tudo, menos imagens.
Afinal, o que é Gzip? é Uma forma de compressão.
O truque aqui é: enviar os recursos do site (html, css, javascript, flash, etc.) comprimidos do servidor para o navegador, e o navegador se encarrega de descomprimir-los e mostrar-los ao usuário. Não se preocupe, essa técnica é suportada pela maioria dos navegadores, até o nosso amigo IE6!
Mas ai vem a pergunta, no que isso ajuda? Simples. Quanto menor for o tamanho do download que o usuário for fazer, mas rápido será para terminar, e com isso mais rápido as páginas irão carregar.
Como utilizar Gzip? é simples, existem várias formas, basta fazer uma rápida procura no google. Aqui, vou lhes mostrar uma forma simples, direto do manual do apache: Crie um arquivo .htaccess na pasta do seu site, e coloque o seguinte conteúdo nele:
SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \
\.(?:gif|jpe?g|png)$ no-gzip dont-vary
Header append Vary User-Agent env=!dont-vary
PS: Apache 2.x only, sorry.
CSS no topo, javascript embaixo
Esta dica é bem simples, não tem mistério.
Basta incluir todos os seus arquivos CSS no topo (dentro da tag head), e os javascript embaixo (antes de FECHAR a tag body).
O motivo disso é que a maioria dos navegadores só baixa até 2 componentes de uma vez, porém só um se for Javascript.
Comprimia suas imagens, CSS e Javascript
Esta dica é muito útil, basta "comprimir" seus arquivos CSS e javascript, e remover conteúdo inútil das suas imagens.
Felizmente, existem ferramentas que fazem isso automaticamente.
Para CSS e JS: http://compressor.ebiene.de/
Para imagens: http://developer.yah.../yslow/smushit/
Bibliografia
Este artigo foi escrito COMPLETAMENTE por mim, bl00dshooter, Eduardo B.
Porém, ele utiliza algumas técnicas do artigo bem mais complexo e em inglês da Yahoo: http://developer.yah...ance/rules.html, eu somente listei as dicas que eu acho mais úteis, traduzi-las e simplifiquei-as.
Os plugins não foram desenvolvidos por mim, eu só os encontrei e listei.
Os sites listados aqui não são meus, são apenas ferramentas que eu acho útil.
Artigo escrito por: bl00dshooter
Muitos websites de hoje em dia não tem a performance que poderiam ter, o que causa um site que demora a carregar, afastando o usuário.
Neste artigo, vou mostrar algumas dicas simples que podem melhorar, e muito, a performance do seu site. Em alguns passos, seu site poderá ter um ganho de mais de 100% na performance.
Ferramentas para medir performance
Essas ferramentas existem para facilitar a sua vida, tornando este processo algo muito mais rápido e fácil.
Neste capítulo, vou mostrar-lhes algumas ferramentas para vários navegadores, então escolha já a sua!
Firebug
Creio eu que muitos já conhecem este ótimo addon para firefox, mas vale apresentar-lo aos que não conhecem.
Firebug é um addon para Firefox que facilita muito a nossa vida, dando informações vitais para medir a performance de seu site, e outras coisas mais.
Website: GetFireBug.com
Navegadores: Mozilla Firefox
Requerimentos: Nenhum.
Firebug lite
Talvez não muitos conheçam esse aqui. Ele é uma versão lite (simplificada) do firebug, só que diferentemente do Firebug tradicional, ele funciona em vários navegadores, o que é ótimo para aqueles que não usam mais firefox (como eu).
Website: GetFireBug.com/firebuglite
Navegadores: IE6+, Firefox, Opera, Safari and Chrome.
Requerimentos: Nenhum.
Nota: Este plugin somente é instalavel no Google Chrome, em outros navegadores deve-se incluir este código dentro da sua tag head pro firebug aparecer:
YSlow
Este plugin é um complemento para o FireBug, que serve justamente para medir Performance. Mas ele faz mais que isso, ele também lhe dá dicas de como melhorar-la. De fato, este é o plugin mais útil que eu conheço para melhorar performance.
Website: http://developer.yahoo.com/yslow/
Navegadores: Firefox
Requerimentos: Firebug instalado.
Chrome Developer Toolbars
Este é o meu "plugin" favorito para performance para chrome. Sim, entre aspas, pois ele já vem instalado com o chrome.
Basta clicar com o botão direito em uma página, e selecionar Inspect Element (Inspecionar elemento, em português).
Website: Já vem com o Chrome.
Navegadores: Chrome.
Requerimentos: Nenhum.
Dicas de performance
A este ponto, você já deve ser capaz de medir a performance de seu website. Mas e agora, como vamos melhorar-la?
Quanto menos requisições HTTP, melhor
A maior parte do tempo de carregamento de uma página deve-se ao download dos componentes dela, como: imagens, folhas de estilo (css), arquivos javascript (js), arquivos flash (swf), etc. Reduzir o número desses downloads é a chave para uma página mais rápida a se carregar.
É claro que você pode criar páginas mais simples, mas isso seria voltar no tempo. O segredo para criar páginas ricas e com menos requisições é combinar arquivos.
Veja algumas formas de fazer essas combinações:
- Sprites Css: A melhor maneira para reduzir o número de imagens necessárias. Combine suas imagens de fundo em um único arquivo e utilize CSS background-image e background-position. Mais sobre essa técnica.
- Combine arquivos CSS e JS: Não tem segredo. Junte todos seus arquivos CSS em um único arquivo. Faça o mesmo com os arquivos Javascript. Pronto, você acaba de reduzir o número de requisições da página.
Utilize Gzip. Para tudo, menos imagens.
Afinal, o que é Gzip? é Uma forma de compressão.
O truque aqui é: enviar os recursos do site (html, css, javascript, flash, etc.) comprimidos do servidor para o navegador, e o navegador se encarrega de descomprimir-los e mostrar-los ao usuário. Não se preocupe, essa técnica é suportada pela maioria dos navegadores, até o nosso amigo IE6!
Mas ai vem a pergunta, no que isso ajuda? Simples. Quanto menor for o tamanho do download que o usuário for fazer, mas rápido será para terminar, e com isso mais rápido as páginas irão carregar.
Como utilizar Gzip? é simples, existem várias formas, basta fazer uma rápida procura no google. Aqui, vou lhes mostrar uma forma simples, direto do manual do apache: Crie um arquivo .htaccess na pasta do seu site, e coloque o seguinte conteúdo nele:
SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \
\.(?:gif|jpe?g|png)$ no-gzip dont-vary
Header append Vary User-Agent env=!dont-vary
PS: Apache 2.x only, sorry.
CSS no topo, javascript embaixo
Esta dica é bem simples, não tem mistério.
Basta incluir todos os seus arquivos CSS no topo (dentro da tag head), e os javascript embaixo (antes de FECHAR a tag body).
O motivo disso é que a maioria dos navegadores só baixa até 2 componentes de uma vez, porém só um se for Javascript.
Comprimia suas imagens, CSS e Javascript
Esta dica é muito útil, basta "comprimir" seus arquivos CSS e javascript, e remover conteúdo inútil das suas imagens.
Felizmente, existem ferramentas que fazem isso automaticamente.
Para CSS e JS: http://compressor.ebiene.de/
Para imagens: http://developer.yah.../yslow/smushit/
Bibliografia
Este artigo foi escrito COMPLETAMENTE por mim, bl00dshooter, Eduardo B.
Porém, ele utiliza algumas técnicas do artigo bem mais complexo e em inglês da Yahoo: http://developer.yah...ance/rules.html, eu somente listei as dicas que eu acho mais úteis, traduzi-las e simplifiquei-as.
Os plugins não foram desenvolvidos por mim, eu só os encontrei e listei.
Os sites listados aqui não são meus, são apenas ferramentas que eu acho útil.
Artigo escrito por: bl00dshooter
