Rendimiento y monitorización

Servidores de medios para CDN en PrestaShop: configuración paso a paso

Revisado el 7 min de lectura CDN rendimiento PrestaShop

Los servidores de medios de PrestaShop permiten que las imágenes, el CSS y el JavaScript de la tienda se carguen desde otro dominio en lugar del principal. Su uso actual es conectar un CDN, que entrega esos ficheros desde el servidor más cercano a cada visitante.

Un CDN acelera la carga de recursos, sobre todo para visitantes lejos de España. No acelera las consultas de la tienda ni el proceso de compra: eso depende del hosting y de la caché de PrestaShop.

Domain sharding: ya no sirve

Antes se usaban los servidores de medios para repartir los ficheros entre varios subdominios del mismo servidor (cdn1.tutienda.com, cdn2.tutienda.com), una técnica llamada domain sharding. Servía para esquivar el límite de conexiones por dominio de HTTP/1.1.

Nuestros servidores usan HTTP/2 y HTTP/3, que cargan muchos ficheros a la vez por una sola conexión. Con ellos, el domain sharding no mejora nada y añade conexiones extra. Si tu tienda tiene configurados cdn1 y cdn2 apuntando al mismo hosting, vacía esos campos (más abajo se explica dónde) y vacía la caché.

Paso 1: activar CCC

Los servidores de medios deben usarse con CCC (Combinación, Compresión y Caché) activado. En el administrador de PrestaShop ve a Parámetros avanzados > Rendimiento y, en la sección CCC, deja:

  • «Smart cache» para las hojas de estilo (CSS): Sí
  • «Smart cache» para el código de JavaScript: Sí
  • Optimización de Apache: No. Nuestros servidores LiteSpeed ya comprimen con Brotli y Gzip por su cuenta.

En PrestaShop 1.6 aparecen además las opciones para combinar y minimizar CSS y JavaScript y Mover JavaScript al final; actívalas también.

Sección CCC de PrestaShop con Smart cache activado para CSS y JavaScript

Guarda y revisa la tienda: menús, filtros, variantes de producto, banner de cookies y carrito. Combinar el JavaScript puede provocar conflictos entre módulos que rompan desplegables, ventanas modales o el carrito. Si pasa, desactiva Smart cache para JavaScript, vacía la caché y comprueba si se arregla.

Paso 2: crear el CDN (ejemplo con Bunny)

Recomendamos un CDN de tipo Pull Zone, como Bunny: no tienes que subir nada. Cuando un visitante pide un fichero que el CDN no tiene, lo descarga de tu tienda, lo guarda y lo sirve desde su red a los siguientes. También funcionan KeyCDN, Amazon CloudFront y otros con el mismo modelo.

  1. En el panel de Bunny, crea una Pull Zone.
  2. En Origin URL pon la dirección de tu tienda con HTTPS: https://tutienda.com.
  3. Bunny te asigna un nombre del tipo tutienda.b-cdn.net. Comprueba que funciona abriendo una imagen de la tienda con ese nombre, por ejemplo https://tutienda.b-cdn.net/img/logo.jpg.

Para usar un nombre propio como cdn.tutienda.com:

  1. En la Pull Zone, entra en General > Hostnames y añade cdn.tutienda.com.

  2. Crea un registro CNAME en los DNS del dominio (en cPanel, Zone Editor, si usa nuestros DNS):

    cdn.tutienda.com.   CNAME   tutienda.b-cdn.net.
    
  3. Cuando el CNAME haya propagado, vuelve a Bunny y pulsa Verify & Activate SSL para que genere el certificado del subdominio.

Si los DNS del dominio están en Cloudflare, deja el registro cdn con la nube gris (solo DNS, sin proxy). La guía de Bunny sobre hostnames propios tiene más detalle.

No pongas como origen de la Pull Zone el propio cdn.tutienda.com: crearías un bucle.

Paso 3: configurar PrestaShop

  1. Ve a Parámetros avanzados > Rendimiento, sección Servidores de medios.

  2. En Servidor de medios #1 escribe solo el nombre, sin https:// ni barras:

    cdn.tutienda.com
    

    PrestaShop comprueba que el nombre existe en los DNS al guardar: si incluyes el protocolo o el CNAME aún no ha propagado, dirá que el servidor de medios #1 no es válido. Si no usas nombre propio, pon el de Bunny (tutienda.b-cdn.net).

  3. Deja vacíos #2 y #3.

  4. Guarda y pulsa Vaciar la caché arriba a la derecha.

Comprobar que funciona

Abre la tienda en una ventana privada, pulsa F12 y ve a la pestaña Red (Network). Recarga la página: las imágenes, CSS y JavaScript deben cargarse desde cdn.tutienda.com con código 200 y por HTTPS. El HTML de la página sigue saliendo de tu dominio.

Si faltan imágenes o se rompe el diseño

  • Las imágenes no cargan y el navegador dice que no encuentra el servidor: el CNAME no existe o aún no ha propagado. Revísalo en la zona DNS.
  • Error de certificado: falta activar el SSL del hostname en el CDN. Hazlo con Verify & Activate SSL.
  • Error 404 en el CDN: abre la misma ruta en tu dominio. Si allí funciona, revisa el Origin URL de la Pull Zone.
  • Los iconos o fuentes no se ven: el navegador las bloquea por CORS. En Bunny, revisa en Headers que esté activo Add CORS headers con las extensiones woff, woff2, ttf y eot.
  • El menú, el carrito o los filtros fallan aunque todo responde 200: es un conflicto de JavaScript por CCC. Desactiva Smart cache para JavaScript y vacía la caché.
  • Cambias una imagen o un CSS y sigue saliendo la versión antigua: el CDN guarda su copia hasta que caduca. Púrgala en Bunny (Purge Cache) o vacía la caché de PrestaShop para que genere ficheros con nombre nuevo.

Para volver atrás, vacía el campo Servidor de medios #1, guarda y vacía la caché de PrestaShop.

También te puede ayudar

¿Algo no cuadra o ha cambiado? Cuéntanoslo y lo revisamos.