Acelere o carregamento de suas páginas

Muita coisa já foi escrita sobre este assunto, originalmente em português temos o renomado guia Como perder peso no browser cujos autores são feras e a série intitulada Performance front-end aqui mesmo no Tableless. As iniciativas gringas são muitas com destaque ao YSlow e às práticas do Yahoo! para melhorar performance.

Neste ponto, se ainda continua nesta leitura, você deve estar se perguntando se existe alguma técnica que não é coberta por alguma destas referências. Há sim. Porém já deixo o aviso, o que veremos a seguir não substitui outras técnicas voltadas a ganho de performance, assim como muitas outras, é apenas uma técnica complementar.

Carregamento especulativo

Uma tentativa de acelerar o carregamento já foi vendida no Brasil como uma funcionalidade incrível creditada a discadores de internet. Sim, discadores. Os pacotes de software incluíam um navegador especial. A função deste era identificar os hiperlinks já no carregamento da página e requisitar por eles sem que o usuário tomasse conhecimento. Assim, quando o usuário seguisse algum hiperlink, o seu conteúdo já estava disponível.

O resultado desta técnica é um tanto desastroso por duas perspectivas. Muito do conteúdo requisitado nunca era utilizado desperdiçando banda de internet e processamento do cliente e servidor. E em segundo, porque já naquele tempo as páginas faziam mal uso de hiperlinks para operar manipulação e exclusão de recursos.

Esta técnica já não é mais utilizada, provando que requisitar mais do que se precisa não é uma solução inteligente.

Carregando apenas conteúdo

Nas aplicações tradicionais, o carregamento de JavaScript e CSS, nossos assets, despendem até metade do tempo total de carregamento da página. Se considerarmos que, para tirar proveito do cache, estes assets serão os mesmos em diferentes páginas. O próximo passo é reaproveitar uma única página durante a navegação.

A técnica consiste em alterar o comportamento padrão dos hyperlinks fazendo com que o endereço indicado no atributo href seja requisitado assincronamente. O resultado da requisição é analisado e apenas o conteúdo de interesse é substituído. O principal ganho de performance se deve ao fato das folhas de estilo e scripts não serem requisitados durante a navegação.

Bibliotecas

jQuery PJAX

Criada por um dos fundadores do GitHub, a biblioteca PJAX implementa a técnica utilizando jQuery. Para testar seu funcionamento, basta navegar por um repositório no próprio GitHub.

A biblioteca permite indicar quais hyperlinks terão seu comportamento modificado e qual o container que deve ser utilizado para depositar o conteúdo retornado pela requisição. O conteúdo retornado pela requisição deve ser tratado no back-end para retornar estritamente o que precisa ser depositado no container. Isto é possível graças a um cabeçalho adicionado a requisição que garante sua identificação no back-end. Mesmo que a intenção seja substituir o , é aconselhado remover o mantendo apenas a tag