Cómo añadir CDN a PrestaShop usando Syspanel

¿Por Qué tu Tienda PrestaShop Necesita un CDN?

Si notas que tu tienda PrestaShop carga lento, especialmente para visitantes de otros países, o si las imágenes tardan una eternidad en mostrarse, probablemente necesitas un CDN (Content Delivery Network). Un CDN es una red de servidores distribuidos geográficamente que almacenan en caché los archivos estáticos de tu web (imágenes, CSS, JavaScript) y los sirven desde el servidor más cercano a cada usuario.

Esto se traduce en:

Velocidad de carga drásticamente mejorada.
Menor carga en tu servidor de alojamiento.
Mejor experiencia de usuario y, por tanto, mejores conversiones.
Beneficios SEO, ya que Google prioriza las webs rápidas.

Configurar un CDN puede sonar a tarea de expertos, pero con Syspanel (el panel de control que usamos, accesible por el puerto 2106) y unos pocos ajustes en PrestaShop, es un proceso muy sencillo. Este artículo te guiará paso a paso para acelerar PrestaShop mediante la configuración de un CDN.

Antes de Empezar: Requisitos y Conceptos Clave

Antes de lanzarnos a la configuración, asegurémonos de tener todo listo.

1. ¿Qué Necesitas?

Acceso a Syspanel: Necesitas las credenciales de administrador de tu hosting. Recuerda que accedes a través de tudominio.com:2106 (por ejemplo, mutiendaprestashop.com:2106).
Un CDN activo: Puede ser un servicio gratuito como Cloudflare o uno de pago como KeyCDN, BunnyCDN, etc. Para este tutorial, asumiremos que usas Cloudflare, el más popular y gratuito.
Acceso al panel de administración de PrestaShop: Necesitas poder modificar archivos de configuración y acceder a los ajustes avanzados.

2. Conceptos Clave

Caché: Almacenamiento temporal de archivos para que se carguen más rápido.
DNS (Domain Name System): El sistema que traduce tu dominio (ej. tutienda.com) a una dirección IP.
SSL/TLS: Certificado de seguridad (el candado en la barra del navegador). Tu CDN debe gestionarlo correctamente.
Proxy DNS: Cuando activas el CDN, el tráfico pasa primero por sus servidores, ocultando tu IP real.

[INFO] Si usas Cloudflare, asegúrate de que tu plan soporte el modo "Full (strict)" para SSL. Es el más recomendado para tiendas online.

Paso 1: Configurar el CDN en tu Servicio (Ejemplo con Cloudflare)

Este paso se realiza fuera de Syspanel, directamente en el panel de tu proveedor de CDN.

1.1. Añade tu Dominio

Ve al panel de Cloudflare y añade tu dominio. Te pedirá que escanees los registros DNS. Acepta.

1.2. Configura los Registros DNS

Cloudflare te mostrará tus registros DNS actuales. Debes asegurarte de que el registro de tipo A (que apunta a tu servidor) tenga el icono de la nube naranja activada. Esto significa que el tráfico pasará por el CDN.

Registro A: @ -> IP de tu servidor (naranja)
Registro CNAME: www -> tudominio.com (naranja)

1.3. Configura SSL/TLS

En el menú de Cloudflare, ve a SSL/TLS y selecciona Full (strict). Esto asegura que la conexión entre el usuario, Cloudflare y tu servidor esté cifrada.

1.4. Actualiza los Nameservers

Cloudflare te dará dos nameservers (ej. ns1.cloudflare.com, ns2.cloudflare.com). Debes ir a donde compraste tu dominio (tu registrador de dominios) y cambiar los nameservers actuales por estos. Este paso puede tardar de 1 a 48 horas en propagarse.

[WARNING] No modifiques los registros DNS en Syspanel mientras tanto. Cloudflare gestionará el DNS por ti.

Paso 2: Configurar Syspanel para el CDN

Ahora trabajaremos en tu servidor. Accede a Syspanel a través de tudominio.com:2106.

2.1. Instalar o Verificar el Certificado SSL

Syspanel suele instalar automáticamente un certificado SSL (Let's Encrypt) para tu dominio. Ve a Web -> Dominios -> haz clic en tu dominio -> SSL.

Asegúrate de que el certificado esté activo y que el estado sea válido.
Si no lo está, haz clic en Instalar certificado SSL y sigue las instrucciones.

2.2. Configurar el Proxy DNS en Syspanel

Syspanel necesita saber que el tráfico está siendo gestionado por un proxy externo (el CDN). Para ello, debemos modificar el archivo de configuración de Nginx.

Ve a Web -> Dominios -> haz clic en tu dominio.
En la sección Proxy, activa la opción Proxy y asegúrate de que esté configurado para escuchar en HTTPS (puerto 443).
Guarda los cambios.

[TIP] Si tu CDN usa una IP específica (no es el caso de Cloudflare, que usa IPs dinámicas), puedes añadirla en el campo Proxy IP. Si no, déjalo en blanco.

Paso 3: Configurar PrestaShop para Usar el CDN

Este es el paso más técnico, pero no te preocupes, es sencillo.

3.1. Obtener la URL de tu CDN

En Cloudflare, ve a Speed -> Optimization -> Content Optimization. Allí encontrarás la opción Rocket Loader (puedes activarlo para optimizar JS). Para obtener la URL de tu CDN, la más común es usar tu propio dominio, ya que Cloudflare lo gestiona automáticamente. Sin embargo, a veces se usa un subdominio como cdn.tudominio.com.

Para este tutorial, asumiremos que tu CDN se sirve desde https://tudominio.com (el mismo dominio).

3.2. Modificar el Archivo `config/defines.inc.php`

Accede a los archivos de tu PrestaShop a través de Syspanel (puedes usar el gestor de archivos o FTP). Ve a la carpeta raíz de tu tienda y busca el archivo config/defines.inc.php.

Abre el archivo con un editor de texto.
Busca la línea que dice:
```
define('_MEDIA_SERVER_1_', '');
```
Si no la encuentras, añádela justo después de la línea que dice define('_PS_MEDIA_SERVER_1_', ''); (o similar).
Modifícala para que apunte a tu CDN. Si usas el mismo dominio, la línea quedaría así:
```
define('_MEDIA_SERVER_1_', 'tudominio.com');
```
Importante: No incluyas https:// ni la barra final.
Guarda el archivo.

[WARNING] Si usas un subdominio como cdn.tudominio.com, asegúrate de que ese subdominio también esté añadido a Cloudflare y tenga la nube naranja activada.

3.3. Configurar en el Back Office de PrestaShop

Ahora ve al panel de administración de tu PrestaShop.

Ve a Parámetros de la tienda -> Rendimiento.
En la sección Servidor de medios, activa la opción Usar un servidor de medios.
En el campo Servidor de medios 1, escribe exactamente lo mismo que pusiste en el paso anterior: tudominio.com (sin https:// ni /).
Guarda los cambios.

3.4. (Opcional) Configurar SSL en PrestaShop

Para evitar problemas de contenido mixto (HTTP y HTTPS), asegúrate de que tu tienda está forzando HTTPS.

Ve a Parámetros de la tienda -> General.
En Activar SSL, selecciona Sí.
En Activar SSL en todas las páginas, selecciona Sí.
Guarda los cambios.

Paso 4: Probar y Verificar la Configuración

¡Ya casi está! Ahora toca comprobar que todo funciona correctamente.

4.1. Prueba de Carga

Abre tu tienda en un navegador.
Haz clic derecho y selecciona Inspeccionar o Inspeccionar elemento.
Ve a la pestaña Red (Network).
Recarga la página (F5).
Busca cualquier archivo estático (imagen, CSS, JS). Al hacer clic en él, en la pestaña Encabezados (Headers) deberías ver algo como cf-cache-status: HIT (si usas Cloudflare) o x-cache: HIT. Esto indica que el CDN está sirviendo el archivo.

4.2. Herramientas Online

Usa herramientas como:

GTmetrix: Te mostrará si los recursos se sirven desde un CDN.
Pingdom Tools: Analiza la velocidad y te dirá si hay mejoras.
WhatIsMyIP: Puedes ver si tu IP está oculta tras el CDN.

[TIP] Si ves errores de contenido mixto (mixed content) en la consola del navegador, significa que algún recurso se está cargando por HTTP. Revisa los ajustes de SSL en PrestaShop y en tu CDN.

Preguntas Frecuentes (FAQ)

1. ¿Mi tienda se va a caer mientras configuro el CDN?

No. El proceso es transparente. Los cambios en DNS tardan en propagarse, pero tu tienda seguirá funcionando con normalidad. Solo cuando la propagación termine, empezará a usar el CDN.

2. ¿Qué hago si después de configurar el CDN mi tienda no carga?

Posibles causas:

Propagación de DNS: Espera hasta 48 horas.
SSL mal configurado: Revisa que el certificado en Syspanel esté activo y que en Cloudflare tengas "Full (strict)".
Archivo defines.inc.php mal escrito: Revisa que no tenga errores de sintaxis.
Proxy en Syspanel no activado: Asegúrate de que el proxy esté en modo HTTPS.

3. ¿Puedo usar un subdominio como CDN (ej. `cdn.tudominio.com`)?

Sí, es una práctica común. Debes crear un registro CNAME en Cloudflare que apunte a tudominio.com y activar la nube naranja. Luego, en PrestaShop, usa cdn.tudominio.com como servidor de medios.

4. ¿El CDN afecta al SEO de mi tienda?

Sí, positivamente. Google valora mucho la velocidad de carga. Un CDN bien configurado mejora los tiempos de carga, lo que se traduce en un mejor posicionamiento.

5. ¿Puedo usar un CDN gratuito como Cloudflare?

Absolutamente. Cloudflare es uno de los más populares y su plan gratuito es excelente para empezar. Ofrece protección contra ataques DDoS y optimización de imágenes.

Conclusión

Configurar un CDN PrestaShop con Syspanel no es tan complicado como parece. Siguiendo estos pasos, habrás dado un salto enorme en la velocidad y seguridad de tu tienda online. Recuerda que la paciencia es clave durante la propagación de DNS.

Si te has quedado atascado en algún punto, revisa los pasos uno por uno. Y si el problema persiste, no dudes en contactar con nuestro equipo de soporte técnico. ¡Estamos aquí para ayudarte a acelerar PrestaShop y hacer que tu negocio online vuele!

[INFO] Recuerda que Syspanel es tu aliado. Accede a él por el puerto 2106 para gestionar todos los aspectos técnicos de tu hosting.