Guia(4) - Optimize o seu Javascript

08 Dezembro 2008 Escrito por Gonçalo Martins

O javascript na web dos dias de hoje é uma mais valia, no entanto pode-se tornar também uma dor de cabeça. Com o Javascript conseguem-se criar efeitos "espectaculares" numa página de Internet, realizam-se até muitas vezes aplicações que mais parecem animações flash... no entanto tudo isto têm um custo! A redução da performance do seu website, caso utilize incorrectamente o javascript.

Não pense que o javascript não deve ser utilizado! Na minha opinião este é extremamente importante ao desenvolvimento web e ao aparecimento de novas aplicações e inovações. No entanto devem-se tentar seguir algumas regras aquando a utilização deste.

1- Realizar apenas o load de uma Framework Javascript

Eu sou um curioso no que toca ao código fonte dos websites, e muitas vezes apanho sustos quando verifico uma página de Internet a realizar o load de por exemplo duas frameworks javascript! Quer sejam elas Mootools, Jquery ou Prototype.

O objectivo de uma framework de javascript é permitir programar Javascript com menos linhas de código, ou seja, todas elas fazem basicamente a mesma coisa.... Porque realizar o load de mais que uma?

2 - Coloque o Javascript em ficheiro externos

Ao realizar o load de um ficheiro externo, o browser coloca esse mesmo ficheiro em cache. De forma a que só faz download deste uma vez, aumentando a velocidade do seu website nas próximas páginas que o utilizador visitar.

Um outro problema no Javascript é que muitas vezes os websites realizam o load de um ficheiro externo para cada script. Isto é algo a evitar uma vez que aumenta o numero de pedidos http, reduzindo assim a velocidade de load da página.

Um website com o Javascript optimizado, deve unicamente realizar o load de, no máximo, dois ficheiros .JS!

3 - Comprima o seu Javascript

Comprimir o Javascript é muitas vezes a solução ideal, para o seu problema, uma vez que um ficheiro de 90KB pode muito bem ser comprimido com um ratio de 60% a 80% de eficácia!

Para comprimir um ficheiro .JS no seu servidor automaticamente, utilize o seguinte código no seu ficheiro .htaccess:

<FilesMatch ".js$">
AddHandler application/x-httpd-php .js
</FilesMatch>

Esta técnica funciona de forma similar à apresentada no Guia(3) - O poder da compressão.

Para aprofundar mais o assunto pode consultar ainda os seguintes artigos:

Acelere o seu website ou blog | Comprimir (Gzip) javascript e Css

4 - Utilize o compresor Weblouca JsPacker

O Compressor Weblouca JSPacker, é talvez a forma mais simples de reduzir o tamanho dos seus ficheiros Javascript. Extremamente fácil de utilizar, basta-lhe copiar o conteúdo de um ficheiro .js seu para o JSPacker e este reduz o tamanho.

Copia de novo o código, fornecido pelo JsPAcker, e cola num novo ficheiro Javascript por si criado. Este novo ficheiro irá substituir o anterior, no seu website.

5 - Load do javascript no final da página

Realize o load do seu javascript no final da página ou de forma dinâmica.

10 - Pré-Loading, o que é, como utilizar?;
11 - Atrase o load de ficheiros (Pós-Loading);
12 - PHP Flush, como e porque?;
13 - Use links da maneira correcta;
14 - ETags, quando podem ou não ser uteis!;
15 - Publicidade, uma forma de matar a performance! Soluções?;
16 - Javascript o porque do Google APIS / YUI;
17 - Google Analytics - Aumente o desempenho;
18 - Exemplo prático de implementação;
Subscreva o Feed RSS! Não perca nenhum artigo!

Outros artigos desta série:
0 - Ferramentas para medição de desempenho;
1 - Utilize correctamente imagens no seu website;
2 - O poder da compressão;
3 - Optimize o seu Javascript;
4 - O poder das CDN (Content delivery Network);;
5 - Http Requests (Pedidos Http);
6 - Junte os seus ficheiros CSS e Javascript;
7 - Descubra o cache/Expires Head;
8 - W3C o que é?;
9 - Load Dinamico / Compreenda o funcionamento dos protocolos web;