Guia(4) - Optimize o seu Javascript

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.

javascript
<script language="javascript" type="text/javascript" src="/script.js"></script>

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:

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.

TrackBack URI for this entry