Desempenho e monitorização

Servidores de multimédia para CDN no PrestaShop: configuração passo a passo

Revisto a 7 min de leitura CDN desempenho PrestaShop

Os servidores de multimédia (Media servers) do PrestaShop permitem que as imagens, o CSS e o JavaScript da loja sejam carregados a partir de outro domínio em vez do principal. A sua utilização atual é ligar um CDN, que entrega esses ficheiros a partir do servidor mais próximo de cada visitante.

Um CDN acelera o carregamento de recursos, sobretudo para visitantes longe de Espanha. Não acelera as consultas da loja nem o processo de compra: isso depende do alojamento e da cache do PrestaShop.

Domain sharding: já não serve

Antes usavam-se os servidores de multimédia para repartir os ficheiros entre vários subdomínios do mesmo servidor (cdn1.tutienda.com, cdn2.tutienda.com), uma técnica chamada domain sharding. Servia para contornar o limite de ligações por domínio do HTTP/1.1.

Os nossos servidores usam HTTP/2 e HTTP/3, que carregam muitos ficheiros ao mesmo tempo por uma única ligação. Com eles, o domain sharding não melhora nada e acrescenta ligações extra. Se a sua loja tiver configurados cdn1 e cdn2 a apontar para o mesmo alojamento, esvazie esses campos (mais abaixo explica-se onde) e esvazie a cache.

Passo 1: ativar o CCC

Os servidores de multimédia devem ser usados com o CCC (Combinação, Compressão e Cache) ativado. No painel de administração do PrestaShop vá a Parâmetros Avançados > Desempenho e, na secção CCC, deixe:

  • Smart cache para folhas de estilo (CSS): Sim
  • Smart cache para JavaScript: Sim
  • Otimização do Apache: Não. Os nossos servidores LiteSpeed já comprimem com Brotli e Gzip por si.

No PrestaShop 1.6 aparecem também as opções para combinar e minimizar CSS e JavaScript e Mover o JavaScript para o fim; ative-as também.

Secção CCC do PrestaShop com Smart cache ativado para CSS e JavaScript

Guarde e reveja a loja: menus, filtros, variantes de produto, banner de cookies e carrinho. Combinar o JavaScript pode provocar conflitos entre módulos que estraguem listas pendentes, janelas modais ou o carrinho. Se acontecer, desative Smart cache para JavaScript, esvazie a cache e verifique se fica resolvido.

Passo 2: criar o CDN (exemplo com a Bunny)

Recomendamos um CDN do tipo Pull Zone, como a Bunny: não tem de carregar nada. Quando um visitante pede um ficheiro que o CDN não tem, este descarrega-o da sua loja, guarda-o e serve-o a partir da sua rede aos seguintes. Também funcionam o KeyCDN, o Amazon CloudFront e outros com o mesmo modelo.

  1. No painel da Bunny, crie uma Pull Zone.
  2. Em Origin URL indique o endereço da sua loja com HTTPS: https://tutienda.com.
  3. A Bunny atribui-lhe um nome do tipo tutienda.b-cdn.net. Verifique que funciona abrindo uma imagem da loja com esse nome, por exemplo https://tutienda.b-cdn.net/img/logo.jpg.

Para usar um nome próprio como cdn.tutienda.com:

  1. Na Pull Zone, entre em General > Hostnames e acrescente cdn.tutienda.com.

  2. Crie um registo CNAME nos DNS do domínio (no cPanel, Zone Editor, se usar os nossos DNS):

    cdn.tutienda.com.   CNAME   tutienda.b-cdn.net.
    
  3. Quando o CNAME se tiver propagado, volte à Bunny e clique em Verify & Activate SSL para que gere o certificado do subdomínio.

Se os DNS do domínio estiverem no Cloudflare, deixe o registo cdn com a nuvem cinzenta (só DNS, sem proxy). O guia da Bunny sobre hostnames próprios tem mais detalhes.

Não indique como origem da Pull Zone o próprio cdn.tutienda.com: criaria um ciclo.

Passo 3: configurar o PrestaShop

  1. Vá a Parâmetros Avançados > Desempenho, secção Servidores de multimédia.

  2. Em Servidor de multimédia #1 escreva apenas o nome, sem https:// nem barras:

    cdn.tutienda.com
    

    O PrestaShop verifica que o nome existe nos DNS ao guardar: se incluir o protocolo ou se o CNAME ainda não se tiver propagado, dirá que o servidor de multimédia #1 não é válido. Se não usar nome próprio, indique o da Bunny (tutienda.b-cdn.net).

  3. Deixe vazios o #2 e o #3.

  4. Guarde e clique em Limpar cache no canto superior direito.

Verificar que funciona

Abra a loja numa janela privada, prima F12 e vá ao separador Rede (Network). Recarregue a página: as imagens, o CSS e o JavaScript devem ser carregados a partir de cdn.tutienda.com com código 200 e por HTTPS. O HTML da página continua a sair do seu domínio.

Se faltarem imagens ou o design se estragar

  • As imagens não carregam e o navegador diz que não encontra o servidor: o CNAME não existe ou ainda não se propagou. Reveja-o na zona DNS.
  • Erro de certificado: falta ativar o SSL do hostname no CDN. Faça-o com Verify & Activate SSL.
  • Erro 404 no CDN: abra o mesmo caminho no seu domínio. Se aí funcionar, reveja o Origin URL da Pull Zone.
  • Os ícones ou os tipos de letra não se veem: o navegador bloqueia-os por CORS. Na Bunny, verifique em Headers que está ativo Add CORS headers com as extensões woff, woff2, ttf e eot.
  • O menu, o carrinho ou os filtros falham embora tudo responda 200: é um conflito de JavaScript causado pelo CCC. Desative o Smart cache para JavaScript e esvazie a cache.
  • Altera uma imagem ou um CSS e continua a aparecer a versão antiga: o CDN guarda a sua cópia até expirar. Purgue-a na Bunny (Purge Cache) ou esvazie a cache do PrestaShop para que gere ficheiros com um nome novo.

Para voltar atrás, esvazie o campo Servidor de multimédia #1, guarde e esvazie a cache do PrestaShop.

Também lhe pode ser útil

Algo não bate certo ou mudou? Diga-nos e revemos.