Bom, este é o meu primeiro post de otimização do Joomla, espero escrever uma série deles!
O primeiro caso que vamos tratar é o mais corriqueiro. Nós desenvolvedores que fazemos vários sites Joomla, as vezes não precisamos de vários recursos que já vem por padrão.
Um deles, e que é um dos maiores, é a biblioteca mootools que vem junto no sistema, na verdade o Joomla não quer saber se você vai usar a biblioteca ou não, ele simplesmente adiciona.
O problema
Pois bem, o arquivo mootools.js tem aproximadamente 70k, se você tiver um site com 1000 visitas por dia, terá um uso de 70MB só desse arquivo. É muito?? É pouco?? Não sei, é seu projeto que vai dizer.
Levando em consideração que um dos fatores que o google passará a analisar daqui pra frente é o peso das páginas, isso pode nos ajudar no rankeamento do nosso site.
Agora vamos aprender uma forma simples de resolver esse problema.
A solução
Como escreverei uma série de coisas para Joomla, vou começar explicando algumas metodologias próprias que auxiliam na organização do nosso código.
Primeira coisa a se fazer.
Crie um arquivo chamado, vars.php (vou usar bastante esse arquivo).
Dentro do index.php do seu template, abaixo da chamada de verificação de acesso ao arquivo (defined('_JEXEC') or die('Restricted access');) coloque o seguinte código "include_once (dirname(__FILE__).DS.'/vars.php');" - Esse código vai incluir o arquivo que você criou dentro do seu template.
Agora vamos começar a mexer no arquivo vars.php
Esse é o código que vamos usar para remover o arquivo mootools.js e também vamos remover o arquivo caption.js que normalmente não é usado (mais abaixo explico quando esses são necessários).
<?php
$headerstuff = $this->getHeadData(); // pega os dados do cabeçalho
unset($headerstuff['scripts'][$this->baseurl.'/media/system/js/mootools.js']); // remove mootools 1.11
unset($headerstuff['scripts'][$this->baseurl.'/media/system/js/caption.js']); // remove caption
$this->setHeadData($headerstuff); // carrega as modificações efetuadas
?>
Esse código foi uma adaptação do post do blog do Mamura.
Legal, quando carregarmos o nosso site já não teremos mais dois javascript que só fazem peso aos nossos sites.
Explicações
Ops!!! Pera ae pessoal, não é bem assim, esses arquivos não são carregados a toa, eles servem pra alguma coisa, vou explicar em quais casos usamos esses arquivos.
Sabe aquelas janelas (window modal), que o site escurece e o conteúdo é carregado, pois é... aquilo normalmente é feito utilizando mootools, pelo menos o joomla oferece o um suporte nativo para fazermos aquelas janelas, mas não é em todos os sites que usamos isso, então fiquem atentos para isso.
Por quê o arquivo caption.js é carregado?
Quando estamos fazendo edição de conteúdo pelo frontend esse arquivo é necessário, pois ele cria alguns tooltips. Mas como não é sempre que usamos a edição pelo frontend cabe a você decidir se vai usar isso ou não.
Bom, eu vou usar os dois arquivos, então nem preciso fazer nada do que foi explicado até agora, correto?Errado!
Sempre faça isso que expliquei até agora, em todos os seus projetos. Ah é? e por quê devo fazer isso?
Por que o javascript deve ser um dos últimos elementos do html a ser carregado, então a forma como o Joomla está carregando isso é teóricamente errada.
Se por acaso você precisar usar esses arquivos, coloque-os antes do fechamento da tag body, ou seja la no final do seu template, da seguinte forma.
<script src="/media/system/js/mootools.js"></script>
<script src="/media/system/js/caption.js"></script>
É isso, pessoal espero que a dica ajude o máximo de desenvolvedores possíveis.
Considerações
O que vimos nesse post, nos mostra dois pontos de otimização
- Menos arquivos para serem carregados no Joomla.
- Carregando arquivos da forma correta (isso se aplica pra qualquer javascript na página), exceto aos que realmente necessitam serem carregados entre as tags head.
Por favor, se encontrarem alguma coisa errada ou algo a acrescentar utilizem os comentários e eu faço a modificação no post.
Uptdate 1
O @daniel e o @cezarvelazquez perguntaram por que o javascript tem que ficar ao final do código.
A explicação para colocar o javascript por último é o seguinte:
Quando o browser está fazendo o download do javascript ele não faz nenhum outro download em paralelo, então o correto é colocar o javascript no final da página para que a mesma seja carregada mais rápido.
A editora Packt Pub, me envio o Livro "Joomla 1.5 Site Blueprints" para um review.
Chegou a hora de falar.
Agora que já sabemos que devemos colocar o javascript no final da página, vamos aprender como servir o javascript pro browser comprimido.
