Otimizando o seu Joomla - Parte 1
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.
-
Júlio Pontes escreveu em 23/03/2010 às 15:32:38
Com relação ao tamanho do mootools só para lembrar que nem sempre você precisa usar TODO o mootools, podemos customizar o que raelmente usamos. Veja só o exemplo que possui 30kbps e efeitos legais e bonitinhos do mootools. http://designinfluences.com/fluid960gs/
-
Ernesto Araujo escreveu em 23/03/2010 às 15:33:22
Só é preciso lembrar que muitos modulos e componentes usam o mootools, e não só modais... É preciso ter cautela antes de simplesmente impedir o carregamento do mesmo. Acredito que uma boa prática é verificar se a página utiliza mootools, e automaticamente fazer a chamada dele. No mais, belo post.
-
Leo Miranda escreveu em 24/03/2010 às 08:16:09
Fiz isso uma vez em um portal que estava com a página inicial muito grande, tinha instalado vários módulos "bonitinhos" que "inchavam" meu portal. Resolvi tirar todos os .js, inclusive esse do joomla, o resultado foi um ganho de cerca de 30%. Um dúvida roni, os módulos e plugins que instalamos todos eles adicionam o .js no cabeçalho, tem como "forçar" essa adição para o final da página? Parabéns pelo artigo!
-
Giordano Alves escreveu em 24/03/2010 às 10:20:21
Mais uma dica, o Joomla tem metodos proprios para add js? $doc =& JFactory::getDocument(); $doc->addScript("http://www.example.com/js/myscript.js"); Tambem tem um metodo para add css: $doc =& JFactory::getDocument(); $doc->addStyleSheet( 'http://www.example.com/css/mystylesheet.css' );
-
Gino Netto escreveu em 09/04/2010 às 21:00:21
Boa! Gostei muito da sua iniciativa em dividir seus conhecimentos. Criei algumas modificações no site Obloggeral, que mantenho, mas nada excepcional. Me viro nos 30, já que sou programador em outra linguagem a mais de 8 anos. Tenho muitas idéias para customização e inclusão de novos recursos para o site, mas me falta o domínio da linguagem PHP. Espero encontrar boas informações aqui e, quem sabe, possibilidade futuras de parcerias! Sucesso.
