Dreams Arts Design

Bem-vindo ao Dreams Art's Design. Para poder utilizar todos os atributos deste fórum, será necessário que você crie uma conta de usuário. O cadastro é gratuito e leva pouco tempo para ser preenchido. Após o cadatro você estara automaticamente fazendo parte do grupo Dreams Arts Design e terá acesso a recursos exclusivos para membros. Registre-se e participe!

Atenciosamente, Equipe Dreams Arts Design
Dreams Arts Design
ATENÇÃO: Vamos mudar toda a estrutura do site, semana que vem o mesmo ficara OFF para realização da mudança. Em breve vocês terão nova areas no fórum. Espero que gostem.

    Artigo: Melhore a performance do seu site

    Compartilhe
    avatar
    Douglas Pereira
    O futuro dependerá daquilo que fazemos no presente.
    O futuro dependerá daquilo que fazemos no presente.


    Mensagens : 2780
    Pontos : 8798
    Data de inscrição : 12/05/2009
    Respeito às regras. :
    Idade : 10
    Localização : Recife- Pe

    Artigo: Melhore a performance do seu site

    Mensagem por Douglas Pereira em Qua Nov 17, 2010 6:17 pm

    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:


    • 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


    _________________


    Obrigado shurinha bibinha do meu core




      Data/hora atual: Seg Maio 21, 2018 8:35 pm