Configurar un CDN en WordPress

Otra semana más, vengo con un post de WPO para WordPress. Esta semana vamos a hablar sobre servicios CDN (hace un par de semanas hablamos sobre CloudFlare CDN).

La mayoría de servicios CDN se configuran mediante Domain Sharding o Carga Paralela, mientras que CloudFlare es casi el único CDN que se configura como proxy inverso para la web.

Siguiendo este razonamiento, en este post vamos a mostrar cómo configurar casi cualquier CDN en un WordPress con distintos plugins.

La configuración de un CDN tiene varias partes variables, es decir, que pueden cambiar bastante dependiendo del proveedor de hosting, el registrador del dominio y el plugin de cache utilizado.

En este artículo, vamos a mostrar cómo se configura un CDN paso a paso en cualquier WordPress usando como base un dominio que usa los servidores DNS de Raiola Networks o los DNS de CloudFlare. Vamos a empezar hablando de lo que es un CDN y cuáles son sus ventajas, para continuar con la configuración paso a paso y terminar con algunas configuraciones avanzadas.

El CDN elegido para este tutorial es KeyCDN.

KeyCDN es un CDN de pago y no tiene plan gratuito. Si lo que estás buscando es un CDN gratuito, el único CDN gratuito real que existe y que funciona bien es CloudFlare CDN.

En este post vamos a explicar cómo configurar KeyCDN en un sitio web WordPress, planteando alternativas sobre qué plugins utilizar.

 

¿Qué es un CDN y qué ventajas tiene?

CDN son las siglas de Content Delivery Network o, lo que es lo mismo en español, Red de Distribución de Contenidos.

Un CDN en entornos web es un servicio que sirve para entregar contenidos de forma optimizada a los visitantes de una web.

Lo que hace un CDN es cachear los contenidos estáticos (imágenes, vídeos, pdfs, CSS, JavaScripts, etc.) en servidores ubicados en centros de datos alrededor del mundo. Cuando un visitante entra al sitio web, esos archivos se le entregan desde los servidores más cercanos a él geográficamente y no desde el servidor que aloja la web, que puede quedar bastante más lejos.

Al servir contenidos tan pesados como las imágenes desde servidores que están mucho más cerca del visitante, conseguimos reducir las latencias y mejoramos la velocidad de descarga. Así conseguimos que la web entera cargue antes, gracias a la mejora que vamos a obtener con todos los elementos estáticos.

En el siguiente ejemplo, vas a ver la diferencia entre servir una imagen sin CDN y servirla con CDN:

El caso anterior es una imagen de 362kB alojada en un servidor de España. Se realiza el test de carga con Pingdom Tools (mi herramienta favorita para probar velocidad de carga) desde California (EE. UU.). Sin CDN tarda 3 segundos en cargar; posteriormente, con CDN activo tarda SOLO 25 ms.

El CDN utilizado para este benchmark es CloudFlare CDN.

En este otro ejemplo, puedes ver la ventaja de implementar un CDN en la carga completa de un sitio web:

Una vez más, el CDN utilizado para esta prueba es CloudFlare CDN. En este caso, se carga una web alojada en un servidor español desde Australia y vemos los resultados con Pingdom Tools, con y sin CDN.

Después de ver el ejemplo anterior, imagínate: una web no está formado por 1 sola imagen, sino por muchas imágenes, archivos JavaScript y archivos CSS, archivos PDF e incluso vídeos. Si sumamos la mejora conseguida al servir más rápido todos estos elementos, conseguimos una mejora brutal en la velocidad de carga.

Esto no solo se nota de cara al usuario, sino que también se nota de cara a Google y al rastreo por parte del bot de Google:

Lo que ves en la imagen anterior es la mejora en el rastreo al bajar las latencias entre la web y los servidores de Google.

Es un caso completamente real, la web josefacchin.com ha tenido esta mejora en Google Search Console (en los tiempos de respuesta y paginas vistas) tras implementar CloudFlare como CDN.

 

1 – Cuál es el mejor servicio CDN

No quiero “mojarme”, pero sí que tengo que mencionar que siempre utilizo los mismos servicios CDN para mis proyectos web y para los clientes que me piden que les implemente un CDN.

Yo normalmente recomiendo KeyCDN, CDN77 o Amazon CloudFront, ya que son servicios CDN de calidad, aunque cada uno tiene sus pros y sus contras:

• KeyCDN es el CDN más “puntero” que conozco en cuanto a tecnología. Tiene bastantes POPs alrededor del mundo y tiene muchas funcionalidades adicionales relacionadas con el CDN.
• CDN77 es el CDN que a mi entender sirve el trafico hispano de forma más eficiente. Esto se debe a que tiene bastantes puntos de presencia en América Latina y los utiliza bastante bien.
• Amazon CloudFront es el CDN de Amazon AWS. Al utilizar la infraestructura del Cloud de Amazon, funciona bastante bien y tiene muchos puntos de presencia en CPDs alrededor del mundo.

Cualquiera de estos tres CDN cobran por su uso y se paga en función del tráfico utilizado en las diferentes zonas del mundo.

En este artículo, vamos a seleccionar KeyCDN para hacer el tutorial. El motivo es que es mi CDN favorito actualmente gracias a sus capacidades tecnológicas y por su buen funcionamiento. KeyCDN es compatible con HTTP/2, con el formato de compresión Brotli y TLS 1.3 en el momento de publicar este artículo.

KeyCDN no es el CDN que más puntos de presencia tiene en el mundo, pero los tiene bien distribuidos en Europa y América, por lo que es ideal para la mayoría de los lectores de este blog.

Voy a resumir el funcionamiento de KeyCDN en una sola frase: “Este CDN suizo funciona mejor que un reloj suizo”.

De todas formas, considero que no podemos elegir un CDN en base a puntos de presencia únicamente. Tenemos que mirar también las funcionalidades y características de cada uno de los servicios.

Si quieres ver qué servicios de CDN tienen mejor tiempo de respuesta, puedes utilizar el servicio CDNPerf para ver los tiempos en “live”: https://www.cdnperf.com/

Lo bueno es que podemos filtrar directamente por continente y ver qué CDN nos va mejor por latencias dependiendo de la zona geográfica.

 

2 – Crear una cuenta en KeyCDN

Lo primero que tenemos que hacer para configurar KeyCDN en un WordPress es crear una cuenta en KeyCDN.

Para hacer esto simplemente tenemos que ir al sitio web de KeyCDN. En la “home” de la web tendremos un formulario para registrarnos: https://www.keycdn.com/

En el formulario que he rodeado en rojo en la imagen anterior introducimos nuestro sitio web y nuestro email. Posteriormente, pulsamos el botón “Get started”.

Nos saldrá un formulario como este, donde nos pedirán algunos datos más que debemos rellenar SÍ o SÍ:

Entonces, nos llevará DIRECTAMENTE al panel de KeyCDN, donde tendremos a nuestra disposición todas las funcionalidades de KeyCDN.

Como ves, tienes crédito disponible: concretamente, 1 crédito.

Este dólar es para que pruebes el servicio de KeyCDN antes de comprar, como si fuera un trial. Puedes llegar a consumir 25 GB de transferencia con este crédito. Tienes 30 días para consumir estos 25 GB de transferencia antes de tener que añadir más créditos para seguir utilizando la cuenta.

Ahora debemos confirmar nuestra dirección de email (la que hemos configurado al crear la cuenta). Nos ha tenido que llegar un correo con un enlace donde tenemos que hacer clic para confirmar y verificar la cuenta:

Ahora ya podremos configurar nuestro dominio dentro de nuestra nueva cuenta en KeyCDN.

 

3 – Configurar un dominio o sitio web en KeyCDN

Para configurar un nuevo dominio o sitio web dentro de la interfaz de KeyCDN vamos a dirigirnos a la sección “Zones” dentro del panel de control del CDN:

Al no tener ningún dominio añadido, directamente nos aparecerá la opción de añadir una nueva zona o, lo que viene siendo lo mismo, añadir un nuevo sitio web.

KeyCDN tiene dos formas de permitirnos configurar un nuevo sitio web. Por un lado las opciones básicas y por otro lado las avanzadas. Para configurar simplemente un sitio web, podemos utilizar solo las opciones simples. Son estas:

Simplemente debemos configurar un nombre de zona, configurarla como activa y especificar un tipo de zona, además del dominio con HTTP o HTTPS.

¿Push o Pull? Con Pull, el CDN obtendrá directamente los datos desde el servidor del sitio web (es la opción más cómoda). Por el contrario, con Push los archivos o datos se guardarán en un “almacén” del CDN para que el servicio de CDN saque directamente los datos desde ahí.

Lo ideal es que configures las opciones de la misma forma que puedes ver en la imagen anterior, pero con el nombre de zona que tú elijas y la URL de tu web.

¿Y las opciones avanzadas de KeyCDN? Como es difícil explicarlo con imágenes, he grabado un vídeo para ti:

Cuando hayamos rellenado todas las opciones para añadir un nuevo sitio web, simplemente pulsamos el botón “Save” y se añadirá el dominio guardando las opciones (tanto las simples como las avanzadas).

El CDN puede tardar unos minutos en tener la zona activa. En la parte superior podremos ver una barra de carga con el estado del deploy de la zona:

En el “Status” de la zona también podremos ver el estado. Mientras el estado sea “deploying”, la zona no estará activa. Por lo tanto, el CDN no estará funcionando todavía para nuestro sitio web.

Cuando finalice, la zona estará activa. Podemos probarla simplemente introduciendo el hostname que puedes ver en el campo “Zone URL” de la imagen anterior. Si se carga nuestro sitio web, eso significa que el CDN ya está funcionando. Si nos aparece un error 403 “Forbidden”, puede ser que alguna configuración esté mal o que la zona aún no haya finalizado el deploy.

 

4 – Configurar los CNAMEs del dominio apuntando al CDN

En el paso anterior pudimos ver que el CDN estaba funcionando y que podíamos acceder a él a través del hostname “Zone URL”. Sin embargo, nuestro objetivo final es cargar los elementos desde el CDN utilizando CNAMEs de nuestro propio dominio.

Para que veas un ejemplo, en el caso anterior el hostname que nos proporciona el CDN para acceder a él es:

Pero nosotros queremos hacer “branding” usando estos CNAMEs:

Para esto, tenemos que configurar los CNAMEs en nuestro DNS. Normalmente, los DNS que usamos son los de nuestro proveedor de hosting, los de nuestro proveedor de dominios o incluso los de CloudFlare.

En este caso, yo voy a configurar el ejemplo con un dominio que utiliza los DNS del hosting compartido de Raiola Networks y otro ejemplo con las DNS de CloudFlare y su editor de registros DNS.

Para el caso de configurar un CDN en un dominio alojado en los servidores de hosting compartido de Raiola Networks, que utiliza como gestor de DNS el servidor cPanel, tienes el ejemplo en este vídeo que he grabado para ti:

Para aquellos dominios que usen como DNS los de CloudFlare (sin el CDN de CloudFlare), puedes ver el siguiente ejemplo aquí:

Si utilizas cualquier otro sistema o proveedor para las DNS, quédate simplemente con los conceptos e intenta extrapolarlos a la interfaz de otro proveedor. Al final, todos los gestores de registros DNS son más o menos iguales y simplemente cambia un poco la interfaz.

Después de configurar los CNAMEs, debemos probarlos en el navegador web. Si nos carga nuestro sitio web correctamente, los CNAMEs ya estarán funcionando.

Recuerda que pueden tardar horas en estar disponibles. Todo depende de la velocidad de propagación del DNS y del servidor DNS en cuestión. Además, no todas las extensiones propagan igual de rápido.

Cuando los CNAMEs estén funcionando, debemos añadirlos a KeyCDN a través de su interfaz. Debemos configurarlos como ALIAS.

Para configurar estos CNAMEs como ALIAS DNS, debemos dirigirnos a la sección “Zonealiases” dentro del panel de control de KeyCDN:

Pulsamos sobre el botón “Add Zonealias” que he rodeado en rojo en la imagen anterior.

Nos aparecerá una pantalla como esta, donde debemos añadir el CNAME (subdominio) y la zona a la que lo vamos a asignar. En este caso, será a la única que tenemos:

A continuación, pulsamos el botón “Add” para añadir el ALIAS correspondiente a KeyCDN y que el CNAME sea reconocido como ALIAS para el CDN. Si no añadimos en esta parte de KeyCDN los CNAMEs creados, no podremos utilizarlos para cargar contenido desde KeyCDN.

Debemos repetir este proceso todas las veces que sean necesarias hasta añadir todos los CNAMEs que queramos configurar para el CDN. Normalmente, yo configuro 5 CNAMEs, como he comentado antes.

Los ALIAS de Zona pueden tardar más o menos 5 minutos en estar activos y listos para funcionar.

Después de introducir aquí todos los CNAMEs, podemos configurarlos en nuestro CMS (en este caso, WordPress) y empezar a utilizar el CDN en nuestro sitio web.

 

5 – Plugins para configurar el CDN en WordPress

Si nuestros CNAMEs ya funcionan y podemos cargar nuestra web desde ellos como si estuviéramos accediendo a través del dominio principal de la web, ya podremos configurar estos CNAMEs en nuestro WordPress para poder utilizar el CDN.

De forma nativa, WordPress no incluye ningún sistema para poder cargar recursos desde subdominios, por lo que tenemos que usar plugins para realizar esto.

Voy a recomendar tres plugins concretamente que nos permiten configurar CNAMEs alternativos para cargar el contenido estático de un sitio web: Domain Sharding, WP Rocket y Perfmatters.

Con otros plugins de cache para WordPress como W3 Total Cache, Swift Performance o con el plugin LSCache de LiteSpeed también podemos configurar un CDN.

 

Configurar un CDN en WordPress con Domain Sharding

Aunque este plugin no es exactamente para configurar un CDN en WordPress, es el único plugin gratuito que recomiendo para configurar un CDN en WordPress.

Podemos encontrar el plugin Domain Sharding en el repositorio de plugins de WordPress: https://es.wordpress.org/plugins/domain-sharding/

Una vez que lo instalamos y activamos en nuestro WordPress, debemos dirigirnos a “Ajustes” y ahí tendremos una nueva sección llamada “Domain Sharding”:

Como ves, en el campo “Domain” el CNAME lleva una almohadilla # y debajo hay un campo llamado “Max Domains”. Esto quiere decir que se va a configurar WordPress para cargar contenido desde 5 subdominios. Concretamente, estos:

Como ves, se usa un comodín para especificar una numeración consecutiva y todos los subdominios (CNAMEs) siguen el mismo patrón.

En el cuadro “Exclusions” podemos añadir exclusiones, especificando el nombre del archivo.

La opción “Redirect if the http host is not the blog domain” nos permite redireccionar todas las peticiones a HTML (página) que no vayan a través del dominio principal del sitio web.

La opción “Use protocol less urls” sirve para que las peticiones a recursos estáticos realizadas al CDN se realicen sin protocolo (es decir, se usa // sin HTTPS o HTTP).

¿Cuál es la razón por la que digo que Domain Sharding para WordPress no es un plugin creado para implementar un CDN?

Pues porque cuando pulsemos el botón “Submit” para guardar la configuración, nos saldrá un botón llamado “Verify subdomains”. Al pulsarlo, el plugin comprobará que todas las IPs de hostnames se canalicen por la misma IP del dominio principal (en eso se basa la técnica Domain Sharding) y, al cargar desde el CDN, nos dará error.

El tema es que esto da igual. El plugin funcionará exactamente de la misma forma, cargando los elementos estáticos (imágenes, CSS y JavaScript) directamente desde esos CNAMEs que acabamos de configurar apuntando al CDN.

Como ya he comentado, podemos encontrar el plugin Domain Sharding en el repositorio de plugins de WordPress: https://es.wordpress.org/plugins/domain-sharding/

 

Configurar un CDN en WordPress con WP Rocket

Otra vez vuelvo a hablar de WP Rocket, ya que me encanta. WP Rocket, como la mayoría de plugins de cache para WordPress, nos permite configurar un CDN mediante CNAMEs o subdominios.

Desde la sección “CDN” de WP Rocket, puedes configurar los CNAMEs desde donde se cargarán los elementos estáticos de la web:

Podemos configurar los CNAMEs que queramos y seleccionar qué tipo de elementos se van a cargar desde ahí: Todos los archivos, CSS, JavaScript o Imágenes.

También tendremos a nuestra disposición un cuadro de exclusiones donde añadir ciertos archivos que, por cualquier razón, no queremos cargar desde el CDN.

Por si el proceso no te queda claro, en el siguiente vídeo puedes ver un análisis del plugin WP Rocket para WordPress donde puedes ver cómo configurar un CDN utilizando WP Rocket:

La configuración de CDN de WP Rocket sirve para cualquier CDN que se cargue desde subdominios.

Si quieres más información acerca de WP Rocket, puedes consultar el artículo que he publicado en este mismo blog: https://alvarofontela.com/wp-rocket-plugin-cache-wordpress/

Si quieres comprar WP Rocket, puedes pulsar AQUÍ.

 

Configurar un CDN en WordPress con Perfmatters

Si no quieres o no puedes utilizar el plugin de cache para configurar un CDN en WordPress, existen otros plugins de WPO que tienen esta funcionalidad.

Uno de mis favoritos es el plugin Perfmatters, del que ya he hablado un par de veces en este blog.

Perfmatters es un plugin para WordPress que nos permite aplicar una serie de tweaks de WPO para WordPress. Entre sus funcionalidades, como he dicho, se encuentra la de configurar un CDN en WordPress.

La diferencia entre la configuración CDN de WP Rocket o del plugin Domain Sharding con Perfmatters es que Perfmatters solo nos permite configurar un CNAME o hostname para el CDN:

Como ves en la imagen anterior, podemos configurar los directorios que se van a cargar desde el CDN y también las exclusiones.
No tiene una configuración muy compleja: es lo suficientemente intuitiva como para que cualquiera pueda implementar un CDN en WordPress.

Puedes ver un videoanálisis que he grabado sobre Perfmatters para WordPress aquí:

Si quieres más información acerca del plugin Perfmatters para WordPress y sus ventajas, puedes visitar la siguiente URL: https://alvaro.click/perfmatters