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.

exemplo

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" />

<FilesMatch ".(jpg|jpeg|png|gif)$">
Header set Expires "Tue, 18 Dec 2010 02:18:46 GMT"
</FilesMatch>

mais sobre cache

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>

Para testar se o seu servidor está realmente compactando seus arquivos com gzip você pode usar um serviço web como o indicado pelo leitor Ricardo Torres, o GZip Test.

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

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.

Pessoal, para a melhor solução para este tipo de problema vejam a regra número 4 deste post. Se quizer entender mais sobre GZip continue lendo.

Fim da edição.

GZip é uma compactação feita pelo servidor web antes de enviar os arquivos para o browser, mas para que isso ocorra com sucesso deve-se mudar o cabeçalho dos arquivos para indicar que o arquivo aceita esse tipo de compactação, para que o servidor compacte este arquivo e quando esse arquivo chegar no browser, este descompacte-o, tornando-o um arquivo normal como todos os outros novamente.

A motivo de informação sobre os benefícios da compactação GZip darei um exemplo de uma biblioteca muito famosa, a 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!

Vinha a um tempo pensando em uma forma inteligente de compactar arquivos “.js” e “.css” usando GZip. Li vários artigos no Yahoo! e em fórums diversos e não encontrei nada falando a respeito, e quando falavam não era de forma clara, tanto é que só fui ver uma forma inteligente de se fazer isso a uns minutos atrás, quando achei algo a respeito no site do Joomla. É uma extensão que modifica o cabeçalho dos arquivos que são incluídos nas páginas desse sistema. Vendo a extensão eu pude ver o quão simples é modificar o cabeçalho de arquivos .css e .js de forma inteligente. Antes havia pensado em modificar a extensão dos arquivos para “.php” e fazer essas modificações (trabalho de corno), vi que funcionou mas não era viável em um projeto grande.

Bom, falei demais já. Vamos para o código da solução:

/**
* @author Fábio Miranda Costa<br />
* Usado para compactar arquivos JS e CSS, acrescenta-os ao cache do browser
* e faz algumas melhorias adicionais. <script src="incs/file_inc.php?file=funcs.js" type="text/javascript"><!--mce:0--></script>
*/
$file = $_GET["file"];
$ext = substr($file,strrpos($file, ".")+1,strlen($file));
ob_start ("ob_gzhandler");
if($ext=="js") $ext="javascript";
header( "Content-type: text/".$ext."; charset: <span class="attribute-value">iso-8859-1</span>");//não se esqueça de mudar para o charset que você usa
header( "Content-Encoding: gzip,deflate");
header( "Expires: ".gmdate("D, d M Y H:i:s", time() + (24 * 60 * 60)) . " GMT");//adiciona 1 dia ao tempo de expiração
header( "ETag: ");//a idéia é apagar o conteúdo da Etag, ver post http://www.meiocodigo.com/2007/12/21/melhorando-o-tempo-de-carregamento-de-um-site/
header( "Cache-Control: must-revalidate, proxy-revalidate" );
include($file);
ob_flush();

para javascript:

<script src="incs/file_inc.php?file=funcs.js" type="text/javascript"></script>

para css:

<link href="incs/file_inc.php?file=styles.css" rel="stylesheet" type="text/css" />

Para solucionar o caso eu utilizei os seguintes conceitos:

• A propriedade z-index do CSS;
• posicionamento do CSS;
• As tags object e embed;
• e o atributo wmode do vídeo.

O z-index pelo que eu tenho percerbido e lido em diversos lugares só funciona em elementos html que estejam “posicionados”, ou seja, tenham o atributo position com o valor absolute, relative ou fixed.

Portanto, colocaremos o video flash dentro de uma div e aplicaremos o seguinte css a ela:

div#flash_div{
position: relative;
z-index: 0;
}

Como existem muitas divergências na renderização entre os browsers, é necessário fazer duas chamadas ao vídeo: uma por meio da tag object(a qual é aceita pelo Internet Explorer) e por meio da tag embed(aceita pelo firefox). Ambas as tags terão os mesmos atributos. E dentre eles deve-se setar o wmode do object e do embed para transparent:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="214" height="229" id="monitor" align="">
<param name="movie" value="images/monitor.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<embed wmode="transparent" src="images/monitor.swf" quality="high" bgcolor="#FFFFFF" width="214" height="229" name="monitor" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
</object>

/**
 * @author Fábio Miranda Costa - www.meiocodigo.com
 * @version 0.26
 * Pequena biblioteca para uso geral em Ajax.
 * bugs conhecidos: Não conversa muito bem com tabelas.
 * Testado com IE 6 e firefox 2.
 * Qualquer dúvida mande e-mail para meiocodigo@gmail.com ou simplesmente comente.
 */</p>

<p>if(typeof window.max === "undefined") var max = new Object();

Métodos

Construtor

/**
 * Construtor da classe max.Ajax
 *
 * @param {String} url - a url do arquivo que receberá a chamada ajax
 * @param {Object} options - um objeto que conterá as possíveis opções, entre elas estão:
 * update (opcional) - um id de um nó DOM que receberá a resposta do servidor.
 * onComplete (opcional) - função que será executada logo após o servidor ter respondido ao pedido.
 *
 */
max.Ajax = function(url,options){

Bem voltando ao código inicialmente temos a declaração do construtor como sendo uma função que faz as seguintes coisas:

this.xmlHttp = this.createXMLHttp();//criação do objeto que tratará da nossa requisição ao servidor

this.url = url;

this.update = options.update || null;//se não for definida um id para fazer o update, this.update = null, caso contrário this.update = options.update

this.onComplete = options.onComplete || function(){};//se tiver sido definida uma função para ser executado ao final da requisição então this.onComplete = options.onComplete senão this.onComplete = null;
};

Requisição Ajax por GET

max.Ajax.prototype = Object({
    /**
     * Método para enviar pedido get.
     */
    get:
        function(){

var thisObj = this;//fazendo referência a este objeto

this.xmlHttp.onreadystatechange = function(){thisObj.updateFunc();};//esta linha define qual será a função que será executada quando nosso objeto xmlHttp tiver seu estado modificado, no caso updateFunc()

• Estado 0 – A requisição assíncrona com o servidor não foi iniciada
• Estado 1 – A requisição foi inicializada
• Estado 2 – A requisição foi enviada
• Estado 3 – A requisição está sendo processsada
• Estado 4 – A requisição foi completada, com sucesso ou não.

Agora vem a explicação do por que inicializar a variável thisObj com “this”. Se eu tivesse feito essa mesma linha dessa forma:

this.xmlHttp.onreadystatechange = function(){this.updateFunc();};

vocês acham que funcionaria? A resposta é não, por que o “this” neste caso está se referindo ao “this.xmlHttp” por estar dentro de seu escopo, por isso eu fiz uma atribuição ao max.Ajax (var thisObj = this;) e usei ele dentro do escopo do “this.xmlHttp”.

this.url += (this.url.indexOf("?") === -1)?"?":"&";
this.url += "ridwes="+Math.random();//adicionando uma variável randomica ao nosso get para que resolva um problema de cache que acredito que só aconteça no IE, chamei de ridwes por que acredito que ninguem teria uma variavel com esse nome, mas se for o caso...modifique hehe

this.xmlHttp.open("get",this.url,true);//define que o método usado para a nossa requisição será o 'get', a url do arquivo que receberá a requisição e o true indica que a chamada será assincrona.

this.xmlHttp.send(null);//finalmente envia nosso pedido
},

Update nó DOM

/**
     * Método executado toda vez que o xmlHttp mudar de estado.
     */
    updateFunc:
        function(){

if (this.xmlHttp.readyState==4 || this.xmlHttp.readyState=="complete"){//verifica se o estado do xmlHttp é de completo, ou seja se a resposta do servidor já está "em mãos"
    if (this.xmlHttp.status == 200){//verifica se o estatus do objeto é de sucesso, caso contrario o ideal seria mostrar um erro, mostrarei isso no futuro
        if (this.update){
            document.getElementById(this.update).innerHTML = this.xmlHttp.responseText;//joga o texto de resposta do servidor dentro do nó DOM especificado na opção update, se ela existir
        }
        this.onComplete(this.xmlHttp.responseText,this.xmlHttp.responseXML);//executa a função ao final da chamada ajax, também chamada de callback
    }
}
},

Criação de objeto XMLHttp

/**
     * Copiado na cara de pau, peguei de um artigo no Wrox.
     * Método usado para a criação do objeto XMLHttp, peça chave para o ajax.
     * Não explicarei em detalhes.
     */
    createXMLHttp:
        function(){
            if(typeof XMLHttpRequest != "undefined")//entra em todos os navegadores menos o IE
                return new XMLHttpRequest();
            else if (window.ActiveXObject) {//no caso do IE
              var aVersions = [ "MSXML2.XMLHttp.5.0","MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp","Microsoft.XMLHttp"];
              //por cima, o que ela faz é verificar qual a versão mais recente do xmlHttp Object suportada pelo navegador e retorna o objeto
              for (var i = 0; i < aVersions.length; i++) {
                try{
                    var oXmlHttp = new ActiveXObject(aVersions[i]);
                    return oXmlHttp;
                }catch (oError){}
              }
            }
            throw new Error("Objeto XMLHttp não pode ser criado.");
        }
});

O código já está com comentários nas linhas mais importantes. Criei um arquivo para testar a biblioteca com todas as opções possíveis. Você pode copiar este texto em um arquivo HTML qualquer ou simplesmente baixar os arquivos anexados ao post.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="max_ajax_ref_blog.js" ></script></p>

<script type="text/javascript">
function testeAjax(thisObj){

var url = "teste.php";//criando uma string cujo valor corresponde à url do arquivo que receberá a requisição Ajax
url += "?valor_teste="+thisObj.innerHTML;//adicionando a variável "valor_teste" à url

var maxAjaxObj = new max.Ajax(url,{update:"teste",onComplete:
function(texto,xml){
alert("O innerHTML é:"+texto);
}
});//aqui estamos criando um objeto max.Ajax passando ao construtor como parâmetros uma url e um objeto com uma propriedade "update"
//cujo valor é o id "teste" indicando que o nó com id="teste" receberá o texto de resposta do servidor, depois temos o onComplete
//que é uma função e será executada logo após a resposta com sucesso do servidor
maxAjaxObj.get();//execução do método get para a nossa chamada Ajax.
}
window.onload = function(){//as função que estão dentro desse escopo só são executadas após todo o carregamento do site
document.getElementById("link_teste").onclick = function(){
        testeAjax(this);
        return false;
    };//aqui nós estamos dizendo que o nó com id="link_teste" escutará esta função no evento "onclick"
}

</script>

<p></head></p>

<p><body>
<a id="link_teste" href="#">Texto para testar  </a></p>

<div id="teste"></div>

<p></body>
</html>

meu arquivo teste.php ficou:

<?php
echo $_GET["valor_teste"];
?>

Traduzindo tudo, quando clicamos no link a requisição ao servidor é enviada quando o browser recebe a resposta da requisição um alerta é mostrado com o texto: “O innerHTML é: Texto para testar ” e a div de id “teste” receberá também o mesmo texto de reposta do servidor (“Texto para testar ”) por que eu coloquei como uma de minhas opções update:”teste”.

Espero ter sido claro =/

Qualquer dúvida comente por favor!!

Arquivos:

• max_ajax.zip