Google Page Insights para otimizar o carregamento do Joomla

[Plilisilva]

Todo o site deveria ser feita essa otimização, tanto para poupar recursos do servidor, quanto para deixar o carregamento do site mais rápido. Vamos ver como fazer essa otimização do Joomla com base no Google Page Insights.
O Joomla é uma ferramenta muito poderosa e completa para a construção dos mais diversos sites e e-commerces. Porém otimizações finas como a definição do carregamento de javascript e css não são feitos nativamente, mas necessários para garantir que o usuário não saia da página por demora no carregamento.

Portanto por meio de plugins e algumas configurações no site, é possível fazer esta otimização, para que o carregamento do site seja feito mais rapidamente, poupando também recursos de banda e processamento do servidor.



Algumas produtoras de templates já possuem configurações de otimização diretamente no template, neste caso até substituindo o uso destes plugins de melhoramento do descritos abaixo.

O Google oferece um score que define o ranking de otimização do site, chamado Google PageSpeed Insights, disponível aqui: http://developers.google.com/speed/pagespeed/insights/

Com este ranking é possível ter como métricas itens como cache e compactação de html, javascript, css, tempo de resposta do servidor, redirecionamentos desnecessários, para otimizar seu site Joomla.

E é por meio desta ferramenta que é possível medir o quanto um site está mais rápido ou mais lento.

Como teste, vamos pegar o site do VirtueMart PRO (virtuemartpro.com.br), com o score de 46/100 (mobile) e 59/100 (desktop).

Configuração
#1 - Gzip
A primeira configuração que é possível fazer, é ativação do gzip ( nativo do Joomla ) na configuração do sistema, na aba Servidor, Compressão do Gzip > Sim.

#2 - Cache
Configure o Joomla para ativar utilizar cache, em Configuração Global, aba Sistema:

**  Ligado - Conservador

Também há um plugin chamado "cache" desativado ( em gerenciador de extensões ). Ative-o somente se não for um e-commerce para não interferir em dados sensíveis da loja.

#3 - Htaccess
Outra configuração que pode ser feita é modificar o .htaccess do Joomla, acrescentando as linhas para ativação de cache do navegador, de imagens, css, javascript, xml, texto. Para fazer isso, acrescente no final de tudo ( é necessário ativar a utilização do mod_rewrite do Apache na aba Site ):

# compress text, html, javascript, css, xml:

AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/x-javascript

Header unset Pragma
FileETag None
Header unset ETag

Header set Cache-Control "max-age=1209600, public, must-revalidate"

ExpiresActive On
ExpiresDefault A300
ExpiresByType image/x-icon A2592000
ExpiresByType image/ico A2592000
ExpiresByType image/icon A2592000
ExpiresByType application/x-javascript A3600
ExpiresByType text/javascript A3600
ExpiresByType text/css A3600
ExpiresByType image/gif A604800
ExpiresByType image/png A604800
ExpiresByType image/jpeg A604800
ExpiresByType image/gif A604800
ExpiresByType application/x-shockwave-flash A604800
ExpiresByType video/x-flv A604800
ExpiresByType application/pdf A604800

#4 - Plugins ( JCH Optimize Pro )
Há uma categoria específica na JED ( Joomla Extensions Directory ) para tratar deste tema de otimização, a Site Performance: http://extensions.joomla.org/extensions/core-enhancements/performance/site-performance



Nela há vários plugins muito bons para a otimização, como o ScriptMerge, JCH Optimize, o Jbetolo, todos open source e liberados para download.

Para fins de teste, vamos usar o ScriptMerge (http://extensions.joomla.org/extensions/core-enhancements/performance/site-performance/12108).

Após feito download e a instalação, entre na configuração do plugin e modifique os parâmetros:

** Basic Options

Merge Type: Filelist
Merge Css: Sim
Merge Js: Sim

** Merge Options

Compress CSS: Yes, using simple rules
Compress JS: Não ( pode ser ativado, mas em e-commerces não é preciso )
Skip compressed: Sim

** Exclude Options

Exclude Menu-items: selecione os items de menu que não deverão ter a compressão de arquivos e cache ativado

** Advanced Options

Force G-zip: Sim

#5 - Imagens
Utilize uma ferramenta para comprimir as imagens e reduzir o tamanho telas sem perder a qualidade, como o http://compressor.io. Na página do Google Page Insights mostra quais imagens precisam de redução.

Resultado
No final, o score do site mudou para 84/100.