Dec 21 2007
Melhorando o tempo de carregamento de um site
Não sei se o leitor conhece um add-on (ou plugin) do Firefox chamado Firebug. Essa ferramenta é de fundamental importância para o desenvolvimento de sites usando CSS e Javascript, não vou entrar em detalhes. Onde quero chegar é que o Firebug possui um add-on ( isso mesmo um add-on de um add-on ) chamado YSlow, ele ajuda bastante o desenvolvedor a achar onde o site está lento. Ele se baseia em 14 regras, por ordem de importância, para dar notas ao site. Dependendo de como ele estiver em cada uma das regras ele receberá a respectiva nota para a regra. Falarei sobre algumas das regras que esse programa apresenta e como obter uma melhor nota em cada uma delas.
Regra número 1: Fazer o minimo de requisições HTTP possível
Como eu falei acima as regras estão em ordem de importância, ou seja essa é a principal delas. Para diminuir as requisições HTTP do seu site o que pode ser feito é diminuir o número de arquivos externos, como por exemplo, arquivos Javascript, CSS, imagens, etc. No caso o ideal seria que o site tivesse no máximo um arquivo CSS e um Javascript. Já no caso das imagens o que pode ser feito é salvar várias imagens em apenas uma e usando a propriedade background-position do CSS você acessaria cada uma dessas imagens.
Regra número 2: Usar mais de um sub-domínio
Você pode criar subdomínios e colocar os arquivos externos de seu site neles. Por exemplo se você tem o domínio meiocodigo.com você pode colocar seus arquivos CSS e javascript num subdomínio a.meiocodigo.com e botar arquivos flash, flv e vídeos por exemplo num subdomínio b.meiocodigo.com. Isso melhora a velocidade do site por que ao fazer isso você acessa mais de um servidor de uma vez, e dessa forma eles têm como enviar seus pedidos mais rapidamente. Para entrar em mais detalhes sobre os benefícios visite este site.
Regra número 3: Adicionar data de expiração no cabeçalho
A data de expiração que pode vir no cabeçalho de arquivos HTTP serve para informar ao browser a data em que ele deve ser desprezado, ou seja se colocarmos uma data futura no cabeçalho o browser será capaz de armazenar em cache o arquivo até a data que você determinar. Existem várias formas de fazer isso. Uma delas é adicionando a meta tag abaixo dentro da tag head de uma página de seu site:
<meta http-equiv="expires" content="Tue, 18 Dec 2010 02:18:46 GMT" />
Uma outra que eu particularmente prefiro e acho mais robusta, apesar de que somente serve para servidores Apache ( mas deve ter formas semelhantes para outros servidores ) é acrescentar a seguinte regra ao seu httpd.conf ou .htaccess:
<FilesMatch ".(jpg|jpeg|png|gif)$"> Header set Expires "Tue, 18 Dec 2010 02:18:46 GMT" </FilesMatch>
Dessa forma eu estou dizendo que apenas os arquivos de imagem do meu site terão data de expiração futura. Você pode usar essa forma para adicionar datas de expiração diferentes para diferentes grupos de arquivos. Por exemplo não é muito interessante colocar uma data muito futura no caso de arquivos .html ou .php, que são arquivos que estão em constante atualização.
Regra número 4: Compactar arquivos externos com GZip
Essa é uma das principais regras para quem costuma usar bibliotecas javascript (JQuery, Mootools, etc) com frequência, mas também pode ser usado com qualquer arquivo. A motivo de informação sobre os benefícios da compactação GZip darei um exemplo de uma usando a biblioteca JQuery que tem em torno de 77kb em sua forma normal. Se for usado o compactador de javascript do Yahoo! ele passa a ter em torno de 46kb, e se for usada a compactação GZip em cima desse arquivo a biblioteca fica com incríveis 15kb! É um ganho de 513,33%!
Para compactar seus arquivos usando GZip deve-se ter o mod_deflate instalado no Apache ( a maioria dos hosts possui ) e pode-se usar a seguinte regra em seu httpd.conf ou .htaccess:
<IfModule mod_deflate.c> AddOutputFilterByType DEFLATE application/x-javascript text/css text/javascript </IfModule>
Neste caso estou compactando apenas os arquivos Javascript e CSS, mas claro que pode-se adicionar outros tipos de arquivos. Para mais tipos de arquivos você pode olhar o arquivo mime.type que se encontra na pasta raiz do Apache.
Regra número 5: Colocar arquivos CSS no cabeçalho do arquivo
Foi constatado que as páginas de um site carregam com maior velocidade se os estilos forem colocados na tag head dos arquivos. Isso acontece por que a renderização da página é feita progressivamente, ao contrário do que acontece quando você coloca CSS no final de um arquivo. Um outro fator é o visual, quando um usuário abre uma página e ela vai “visualmente abrindo” ele sabe que a página está chegando em seu browser e ele vai esperar calmamente (até um certo limite, é claro), mas se você colocar o CSS na parte de baixo do site ele será a última coisa a ser lida pelo browser e o usuário terá a sensação que o site não está carregando até que seja finalmente lido o CSS e ele veja o site completo. Além de que existem bugs de renderização no IE, quando se coloca CSS na parte de baixo do site ( em cima ou em baixo, sempre existirão bugs de renderização no IE :S ).
Regra número 6: Colocar scripts no final do arquivo
Os browsers lêem o código fonte dos sites de cima para baixo, e quando lê uma inclusão de um arquivo Javascript, por exemplo, ele tem que baixar todo o arquivo, ler seu conteúdo e interpretar o código, para somente depois continuar com a leitura do resto do site. Por isso quando existem arquivos muito pesados na parte de cima de um site o usuário pode ficar um tempo considerável sem ter nenhuma resposta visual do site, por que o browser está lendo e interpretando linhas de script. Por isso, deve-se evitar ao máximo colocar scripts na parte de cima dos sites. Uma das soluções é incluir um arquivo, usando qualquer linguagem server-side, somente com scripts no final da página, antes do fim da tag body.
Regra número 7: Evitar expressões no CSS
As expressões de CSS são suportadas apenas pelo Internet Explorer e devem ser evitadas por que são executadas toda vez que um evento acontece no site ( toda vez que o mouse mexe, ou damos um click por exemplo) , podendo acarretar em lentidão no computador do usuário. A regra é só usar expressões em casos em que já se tentou de tudo e não se obteve sucesso. Para quem não sabe o que são expressões de CSS ai vai um exemplo de linha de código para uma expressão desse tipo, pesadíssima por sinal:
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
Regra número 8: Colocar Javascript e CSS em arquivos externos
Quanto maior os arquivos de Javascript e CSS e quanto maior a quantidade de páginas usando o mesmo conteúdo dos arquivos mais importante é essa regra. O que acontece é que esses arquivos externos são guardados em cache quando possuem data de expiração futura ( regra 3 ) e quando um usuário visita mais de uma página de seu site acaba tendo acesso muito mais rápidos às páginas por possuir os arquivos em cache.
Regra número 9: Reduzir o número pesquisas em DNS
Essa regra vai um pouco contra a regra número dois mas a idéia é não ter um número muito grande de nomes de domínios numa mesma página de um site. Como a requisição a um servidor DNS para saber qual o IP associado a aquele nome demanda um certo tempo isso pode comprometer o desempenho do site. O ideal então é ter entre 2 e 4 nomes de domínios diferentes no mesmo site. Se for menos vai contra a regra número 2 e se for mais vai contra esta regra.
Regra número 10: Comprimir os arquivos Javascript
Existem algoritmos opensource na internet que comprimem scripts Javascript. Eles são especialmente úteis para trechos de código fixos, onde se sabe que não ocorrerão alterações ( o código após a compressão fica difícil de compreender ) como por exemplo no caso de se usar uma biblioteca Javascript. Algumas já fornecem seus códigos comprimidos usando esse tipo de algoritmo. Os mais famosos e eficientes são o YUI-Compressor criado pela Yahoo! e o packer criado por Edwards Packer. Cada um tem sua vantagem, o da Yahoo! tem uma taxa de compressão muito boa e não usa nenhum tipo de script mirabolante para comprimir o arquivo, já o packer tem uma taxa de compressão excelente porém usa um script que faz uso da função eval do javascript (muito conhecida por ser pesada) para a compressão do arquivo e por isso pode comprometer o desempenho do site quando o arquivo comprimido está sendo interpretado pelo browser. Meu preferido, e acredito que de muita gente, é o YUI-Compressor, que além de não comprometer o desempenho do site ainda tem uma taxa de compressão muito boa e pode chegar até a ser melhor do que a do packer se em cima desse arquivo for usada a compressão GZIP, que foi apresentada na regra número 4. Mais informações sobre o benefício do YUI-Compressor com GZIP neste link.
Regra número 11: Evite redirecionamentos
Bom achei essa regra um pouco boba, afinal só se faz redirecionamento em sites quando é realmente necessário. Simplesmente evite-os.
Regra número 12: Remover scripts duplicados
Sem comentários.
Regra número 13: Configurar ETags
As ETags são etiquetas compostas por inode-tamanho-timestamp no caso do Apache 1.3 e 2.x e servem para identificar unicamente um arquivo e isso pode causar um pequeno delay se seus arquivos estiverem hospedados em diversos hosts diferentes. Para remover as ETags de seus arquivos você pode colocar as seguintes linhas em seu arquivo httpd.conf ou .htaccess:
Header unset ETag FileETag None
Para mais informações sobre ETags visite este site.
Regra número 14: Fazer cache de Ajax
Quando uma aplicação tiver um arquivo Ajax com conteúdo estático o ideal seria usar a regra 3 nesses arquivos. Dependendo da quantidade de arquivos deste tipo seu site pode ficar bastante rápido e intuitivo.
Espero que tenham gostado pessoal, postem por favor! Próximo post estou pensando em adicionar mais uma funcionalidade a biblioteca ajax que já apresentei anteriormente.