JCH Optimize em Joomla ¡melhora a carga de tua página!

Já falei em outras ocasiões da importância de acelerar a carga de um site para que esta seja feita no menor tempo possível, economizando o uso de dados e em consequência melhorando a experiência do usuário. Agora quero te falar do JCH Optimize em Joomla.

É importante considerar que um fator chave na fidelização de visitas é a carga do site web que se visita, principalmente se isso se realiza desde dispositivos móveis aonde o tráfego de dados tem um custo maior e acaba sendo um handicap para captar visitantes.

JCH Optimize é um plugin para Joomla! 3.x que permite otimizar o download de páginas web mediante a compreensão dos arquivos CSS e javascript que se encontram na sessão principal da página web. Ao comprimir estes arquivos se minimizada quantidade de conexões HTTP que tem que realizar e deste modo reduzir o tempo total que o navegador faz um pedido HTTP até que baixa a página completamente.

JCH Optimize em Joomla – Características mais destacadas:

• Compressão GZip combinando javascript e CSS em um arquivo.
• Combinar imagens de fundo.
• Minificação e compressão de arquivos agregados.
• Permite excluir certos arquivos de processo de agregação se estes causam problemas.
• Permite excluir um ou mais componentes, se o plugin não funciona bem com eles.
• Utiliza jQuery para resolver conflitos.
• Permite gerar uma URL amigável dos arquivos agregados com o uso de .htaccess.
• Suporta reglas @import em arquivos CSS.

Vantagens que se obtém no uso de JCH Optimize em Joomla 3:

• Reduz de forma importante o número de pedidos HTTP.
• O navegador do visitante não tem que chamar a todos os arquivos.
• O tempo de carga pode melhorar de forma importante.
• O SEO melhora em muitos casos.
• A experiencia do usuário melhora em grande medida.

Descarregar o plugin:

Configuração de JCH Optimize

• Habilitar o plugin JCH Optimize desde o Administrador de Plugins.
• Configurar JCH Optimize.
• Opções Básicas:
• Combinar arquivos CSS: Combinar todos os arquivos CSS externos em um só arquivo.
• Substituir @import: No caso afirmativo, o plugin substituirá a propriedade @import de arquivos CSS adicionada com endereços URL internas e substitui-los com os respectivos conteúdos CSS.
• Combinar arquivos de JavaScript: Combinar todos os arquivos JavaScript externos em um arquivo.
• Compressão Gzip JavaScript e CSS: Isso pode reduzir o tamanho do arquivo de forma espetacular. Antes de habilitar GZip, deve estar seguro de dispor do Zlib no servidor.
• Minificar CSS: No caso afirmativo serão eliminados todos os espaços em branco e comentários de CSS otimizado para seu download.
• Minificar javascript: No caso afirmativo serão eliminados todos os espaços em branco e comentários de javascript otimizado para seu download.
• Minificar HTML: No caso afirmativo serão eliminados todos os espaços em branco e comentários de HTML otimizado para seu download.
• Atrasar javascript: Esta opção adicionará um atributo de atrasar a etiqueta javascript.
• Vida útil (días): tempo de vida do arquivo adicionado.
• Opções Avançadas:
• Excluir todas as extensões: Excluir todos os arquivos de componentes, módulos e plugins do processo de agregação.
• Excluir arquivos CSS: Ignorar estes arquivos CSS, arquivos separados com uma vírgula, ponto e vírgula, dois pontos ou espaço em branco.
• Excluir arquivos JavaScript: Ignorar arquivos JavaScript, arquivos separados com uma vírgula, ponto e vírgula, dois pontos ou espaço em branco.
• JQuery NO conflito: para evitar o conflito de JQuery com Mootools, se o site tem duas bibliotecas, utilizar JQuery em Modo NO conflicto.
• JQuery Nome do arquivo: Substituir o valor predeterminado pelo nome real do arquivo de jQuery aqui. Por exemplo, jquery.min.1.3.5.js
• Ordem de carga de JavaScript: Colocar todos os scripts de Mootools no inicio, logo os scripts jQuery.
• Utilizar htaccess: No caso afirmativo, as URL dos arquivos substituídos serão mais amigáveis.
• Gerador de Sprites:
• Habilitar o gerador de sprites: Em caso afirmativo serão combinadas algumas imagens de fundo em uma chamada sprite para reduzir buscas HTTP.
• Tipo de arquivo de imagem: Selecionar se o sprite deve ser uma imagem gif ou png.
• Quantidade de imagens em sprites: Existem duas opções para escolher o número de imagem que deve ser incluído no sprites.

Mínimo, é dizer, as imagens não se repetem em nenhuma posição de fundo declarada ou Máxima, as que figuram nas imagens mínimas e outras declaradas com «no-repeat» no «background-position».

• Endereço Sprite: Determinar em que sentido devem ser colocadas as imagens em sprites. Horizontal ou Vertical.
• Envoltura Imagens: Envolver imagens em outra fila ou coluna se a longitude do sprite é maior de 2000px.
• Incluir imagens adicionais em sprites: Caso selecione Mínimo, podem incluir imagens adicionais no sprite. Separar as imagens com vírgula, ponto e vírgula ou nenhum espaço em branco.
• Excluir as imagens de sprites: Caso selecione Máxima pode excluir uma ou mais das imagens se aparecem incorretamente. Separar as imagens por vírgula, ponto e vírgula ou nenhum espaço em branco.

Opções recomendadas de configuração:

• Combinar arquivos CSS: «Sim»
• Gzip CSS e JavaScript file: «Sim»
• Minify CSS: «Sim»
• Minify javscript: «Sim»
• Minify HTML: «Sim»
• Posição combinado javascript: «Último TAG Javascript encontrado.»

IMPORTANTE: Se vai utilizar o plugin para otimizar conteúdos de K2 é importante evitar ativar «Combinar arquivos CSS» e «Combinar arquivos JavaScript». Caso ative «Substituir @import» e se o requeremos adicionalmente habilitamos a compresión GZip CSS e JavaScript. Evitaremos também habilitar a minificação HTML.

Depois da aplicação e uso de JCH Optimize em Joomla pudemos reduzir (em um site web em produção) o tempo de carga de 8 segundos a pouco mais de 3 segundos para sites web baseados em Joomla 3.4 com VirtueMart e muitos produtos na página inicial. As páginas internas obtiveram uma melhora geral de uns 5 ou 6 segundos para entre 1 e 2 segundos de tempo de carga da página.

Ë bom contrastar os dados de tempos de carga com diferentes ferramentas de medição disponíveis online como Yslow, GTMetrix ou Pingdom. Obter um grau «A» na carga de uma página não é tão bom como uma carga rápida da página com uma qualificação «C» nos serviços ou de«B».

O que temos que lembrar é que devemos utilizar estas ferramentas como referencia e guia nos ajustes do site, mas não como um fim comun.

É recomendável ir a GTMetrix, Pingdom ou outros e comprovar o site antes de instalar o plugin. Recomendado criar uma conta para poder guardar o histórico de provas e ter contrastes.

Com o plugin instalado e configurado, e depois de estar seguro de que todo se vê bem na web ir outra vez a GTMetrix ou Pingdom e executar de novo as provas de carga. É bom fazer isso no transcurso de 2 dias e em diferentes horários para ver uma boa vista dos resultados.

Desde o Gestor de Plugins, procuramos o plugin chamado System – JCH Optimize pra configurarlo:

Deixando por defeto as configurações que o plugin tem feitas, somente é necessário ativar na aba basic Options a opção Enable (por defeto ela vem ativada).

Em próximo artículo ire aprofundar nas configurações do plugin pra otimizar alguns aspectos do site Joomla.

Esta pequena parcela pode significar uma grande melhora de um site em Joomla, dependendo da configuração atual. Isto é importante por muitas razões, incluindo a experiencia do visitante e Search Engine Optimization.

Google tende a favorecer a carga rápida de sites altamente otimizados nos seus resultados de busca. Nem sempre é necessário o uso de ferramentas de otimização e compressão de arquivos, pois não todos os sites requerem este tipo e extensões para melhorar sua carga por este motivo analisar o comportamento da web antes de instalar este tipo de plugin ajudará a determinar se realmente é necessário.

Por enquanto você pode olhar na documentação de JCH Optimize para Joomla no WIKI oficial do projeto.

Uma boa otimização requer tempo e esforço, mas vale a pena.

Leitura recomendada: Acelerar a carga de um site Joomla (leitura em Espanhol)