[PRESTASHOP]Melhorar a performance

1. Activar CCC para CSS e JS

CCC (Combinar, Comprimir e Cache) são opções que o Prestashop disponibiliza no backoffice que servem para melhorar a performance do site.

Para aceder às opções CCC use o menu do lado esquerdo do backoffice “Parâmetros avançados” e clica em “Desempenho” como mostra na imagem à esquerda.

CCC permite reduzir o tempo de carregamento das páginas. Com estas definições pode aumentar o desempenho sem sequer tocar no código do tema. CCC é 100% compatível com o tema original do Prestashop, caso use um tema não original, confirme que ao ativar estas opções não cause problemas no site.

Nesta pagina vai encontrar um quadrado com as opções CCC.

Ative todas as opções.

 1. Cache inteligente no CSS – SIM
 2. Cache inteligente no JavaScript – Sim
 3. Optimização Apache – Sim

2. Ative a cache do Prestashop.

Na mesma pagina do CCC ira encontrar um quadrado chamado “Smarty”.

 1. Na caixa “Compilação de modelos” escolha a opção “Recompile templates if the files have been updated”. Esta opção faz com que sempre que faça uma alteração no site, o Prestashop automaticamente apaga a cache para que o seu cliente veja o conteúdo sempre atualizado.
 2. Na caixa “Cache” carregue no botão “Sim” para ativar a cache do Prestashop.
 3. Na caixa “Otimização de várias lojas” pode ativar mesmo que só tenha uma loja.
 4. “Tipo de cache” escolha “File System”. Isto faz com que o Prestashop crie cache em ficheiro. Escolhemos “File system” porque se escolhermos MySQL podemos atingir o numero máximo de processos na base de dados o que fará com que o site pare de funcionar temporariamente.
 5. “Limpar cache” escolha “Clear cache everytime something has been modified”.

3. Tamanho das imagens no site.

As imagens podem ser uma das coisas com mais impacto na performance do site.

Por vezes temos imagens com grandes dimensões para um espaço pequeno no site.

Por exemplo: Queremos mostrar uma imagem que vai ocupar 250px por 250px na pagina inicial, mas a imagem que temos tem 300px por 300px.

O objetivo é usar as imagens com tamanhos aproximados ao bloco em que a queremos mostrar.

Imaginemos que temos um div com 250px x 250px. O objetivo é usar uma imagem com as mesmas dimensões do div como vemos no exemplo abaixo.

4. Compressão das imagens.

Outra forma de otimizar as imagens é usar uma ferramenta de compressão. Isto faz com que as imagens tenham menos qualidade mas que também ocupem menos, carregando o conteúdo mais rápido pois o utilizador tem menos Mb para descarregar.

Uma boa ferramenta para comprimir imagens é o Optimizilla. Nesta ferramenta podemos fazer upload de uma ou varias imagens e o site fará a sua compressão. Ao fazer a compressão, o optimizila sugere uma percentagem de compressão (que na maioria das vezes é a melhor) mas também nos permite ajustar a percentagem ao que achamos melhor.

A imagem abaixo tem 300px x 300px e ocupa 45.8Kb. Ao comprimir, o optimizilla sugeriu uma compressão de 77% fazendo com que a imagem apenas ocupe 11Kb como vemos no exemplo abaixo. Quando vemos a imagem no tamanho normal, é muito difícil perceber que ela perdeu qualidade, apenas conseguimos perceber isso quando ampliamos a imagem.

5. Especificar dimensões das imagens.

Especificar a largura e altura na tag de todas as imagens permite uma renderização mais rápida, ajudando o navegador a reservar o espaço para a imagem sem que tenha que redimensionar enquanto renderiza.

Exemplo:

<img src="smiley.gif" alt="Smiley face" width="42" height="42">