Guia Definitivo para Otimizar OpenCart

Acelerar o carregamento de páginas do OpenCart é essencial para garantir maiores vendas e retenção de clientes.

Isso porque a plataforma costuma ter um número de requisições colossal, decorrente de uma infinidade de imagen, vários módulos empregados e outros fatores que tornam a experiência do usuário insuportável assim que abrem sua loja virtual.

1) Se você for cliente, boa parte do problema já está resolvido!

Nossa plataforma é totalmente otimizada com as melhores tecnologias para aplicações PHP, por isso esse guia servirá apenas para deixar seu site ainda mais rápido (e massacrar a concorrência).

2) caso você não seja um cliente, não se preocupe pois há muito o que otimizarmos na sua loja eletrônica, então esteja certo de que sua loja eletrônica ficará melhor do que nunca!

Independente do caso, use o Google PageSpeed para saber onde estão os problemas e assim saber o que corrigir ao longo do artigo.

OTIMIZE AS IMAGENS

Imagens pesadas são um dos maiores pesadelos nos eCommerces — o que é natural, uma vez que elas são indispensáveis para vender.

Caso você seja cliente Infinite, a boa notícia é que você pode pular esse passo: todas as suas images são otimizadas automaticamente a cada 48 horas!

Caso não seja, você tem duas coisas a fazer:

Otimizando imagens locais

Essas imagens se encontram localmente em sua loja nas pastas /catalog/view/theme// ou /image/.

Você pode otimizá-las facilmente usando o plugin Nitropack; basta logar na administração da sua loja e navegar pelo caminho: Admin > Nitro > Settings > Image Optimization.

Otimizando imagens remotas

Se tratando de imagens em servidores de terceiros, recomendamos que você as otimize manualmente; seja com um plugin ou usando um site de otimização.

OTIMIZE SEU CACHE

Um bom cache é 100% indispensável para acelerar seu OpenCart — caso contrário, seu cliente será confrontado com dezenas de arquivos a serem carregados assim que acessarem seu site.

Para arquivos locais

Você pode configurar o cache do navegador usando o Nitropack, instruindo que os navegadores dos visitantes como armazenar os arquivos localmente.

É só acessar seu OpenCart e ir em Admin > Nitro > Cache systems > Browser cache e configurar o cache de acordo com suas preferências.

Não se esqueça também de configurar o caching da sua loja eletrônica lá no .htaccess:

Esse recurso somente funcionará em servidores Apache, pois é necessário que o NitroPack tenha acesso ao htaccess. Em servidores Nginx, as otimizações deverão ser feitas manualmente.

Para arquivos remotos

Se tratando de arquivos em servidores de terceiros, o ideal é que você otimize os arquivos manualmente.

COMPRESSÃO DE ARQUIVOS

Comprimir seus arquivos em zip é uma excelente maneira de acelerar seu OpenCart, é isso que resolveremos agora!

Mais uma vez, você pode usar o próprio NitroPack; é só ir em Admin > Nitro > Settings > Compression e configurar de acordo com suas necessidades.

Ah, e é necessário estar em servidor Apache, visto que o plugin necessita de permissão para acessar o htaccess.

Obs: Para executar a compressão, é importantíssimo ter a configuração específica ao cache de páginas (Admin > Nitro > Settings > Cache systems > Page cache).

PROCESSAMENTO

Caso o Google Pagespeed aponte que é necessário eliminar âncoras referentes a arquivos que bloqueiam ou desaceleram sua página, é necessário mover tais chamadas para alguma parte inferior do código da loja.

Infelizmente, não é nada fácil fazer isso manualmente, o que pode até destruir o seu OpenCart! Por isso, use o NitroPack novamente, pois ele tem como base os maiores temas existentes (o que não elimina riscos totalmente).

I. A minificação deve estar habilitada (Minification > Enabled).
II. Em Combine CSS files, coloque Yes (este recurso fará com que todos os arquivos css se agrupem em um único).
III. Em Improved CSS detection algorithm, coloque Yes (isso detectará os css inline e as tags ).
IV. Altere Parse import statements para Yes (caso seu css tenha @important, será analisado e incluído ao final de cada arquivo css).
V. Em JavaScript files > Combine JavaScript files, coloque Yes (isso agrupará todos os códigos JavaScripts em um único).
VI. JavaScript files > Improved JavaScript detection, selecione Yes (identificará js inline e as tags ).
VII. JavaScript files > Move detected JavaScript to, escolha Bottom of page (moverá todas as âncoras e para o final do código).

Algo deu errado no teu site? Resete as opções uma por uma, e assim você saberá exatamente o que está afetando seu site e pular tal opção.

COMO REDUZIR TEMPO DE RESPOSTA DO SERVIDOR

Esse é outro problema comumente encontrando no Pagespeed, resultante da demora excessiva para entregar o conteúdo em HTML.

Resolva isando ativando o NitroPack Page Cache, o que programará o navegador para trabalhar com cache, eliminando a necessidade de baixar todos os arquivos do seu site quando ele for acessado.

Para ativar, siga o caminho: Admin > Nitro > Settings > Cache systems > Page cache > Page Cache Status > Enabled.

COMO PRIORIZAR CONTEÚDO VISÍVEL

Caso o Pagespeed reporte tal problema, isso significa que arquivos CSS ou JAVASCRIPTS possam estar impedindo a exibição do conteúdo. Resolva assim:

I. Use Minification > Enabled
II. JavaScript files > Combine JavaScript files > Yes (irá combinar os arquivos JavaScripts em apenas um).
III. JavaScript files > Improved JavaScript detection > Yes (irá detectar todos os JS inline e tags ).
IV. JavaScript files > ​Defer detected JavaScript > Yes

Caso após essas modificações seu site apresente qualquer tipo de quebra, teste as opções acima uma a uma para descobrir qual é o problema.

MINIFICAÇÃO

A minificação é básica para deixar seu OpenCart mais rápido!

Antes de tudo, é importante mencionar que o NitroPack trabalha apenas com os arquivos que se encontram localmente, isto é, dentro da sua hospedagem. Veremos como executar o processo com arquivos JS, CSS e HTML.

Para otimizar neste quesito, é necessário possuir a minificação já ativada (Admin > Nitro > Settings > Minification > Use Minification > Enabled).

Como minificar JavaScript

JS: Navegue até Admin > Nitro > Settings > Minification e ative as seguintes opções:
JavaScript files > Minify JavaScript files > Yes
JavaScript files > Combine JavaScript files > Yes

Como minificar CSS

CSS: Navegue até Admin > Nitro > Settings > Minification e siga os passos abaixo:
CSS files > Minify CSS files > Yes
CSS files > Combine CSS files > Yes

Como minificar HTML

HTML: Navegue até Admin > Nitro > Settings > Minification e ative as seguintes opções:
I. HTML files > Minify HTML files > Yes
II. HTML files > Keep HTML comments > No (caso seu site pare de funcionar em algum aspecto, permaneça com Yes).

Agora que você fez isso tudo, fala pra gente o quanto seu site melhorou lá no Google PageSpeed! 😉