Cómo configurar, bien, una CDN en WordPress

Cuando hablamos de una CDN, hablamos de una red de entrega de contenidos, principalmente estáticos. Esto significa que vamos a servir contenidos que no cambian, como imágenes, vídeos y otros elementos de este estilo. Cuando hablamos de WordPress vendría a ser, principalmente, la sección de Medios.

Seguramente cuando alguien te dice que montes una CDN en tu WordPress te dice que montes todo con Cloudflare y te olvides, pero, personalmente no creo que siempre sea la mejor opción por varias razones, la principal es un tema de rendimiento en «lo que no es estático».

Para empezar, explicar un poco cómo funciona un sistema de CDN. La idea es poner una capa intermedia entre el usuario y el servidor. Por ejemplo este sitio está físicamente alojado en Barcelona (España). Es posible que alguien desde Argentina lo visite, y si quiere leer la información ha de hacer una petición desde Buenos Aires hasta Barcelona, probablemente pasando por Miami, Nueva York, Londres, París… y volver. Con un CDN esa petición no tendría que dar tantos saltos porque, por ejemplo, es posible que haya una copia en Miami y que ese usuario reciba la información desde allí. Genial, ¿verdad? Sí, pero no. En el caso de un comercio electrónico o de contenidos dinámicos la cosa se complica, ya que no todo se puede cachear, lo que significa que entre todos estos pasos tenemos también que pasar por el CDN para contenidos que realmente no se pueden cachear. Esto puede provocar que se cacheen elementos que no toca a menos que pongamos las reglas muy claras.

Voy a poner otro caso más en pequeño y basado en algunas pruebas que hice hace un tiempo. Tienes un sitio en España y que el 95% del tráfico es de España. En España hay varias operadoras, muchas globales, otras locales. En cualquier caso es posible que te interese tener un CDN como Cloudflare que tiene dos puntos, uno en Madrid (Interxion) y otro en Barcelona (Equinix). Esto hace que esté conectado a Espanix y a Catnix. Con esto tenemos conectividad prácticamente con todas las operadoras del país. Teniendo esto en cuenta (y hablamos ya de milisegundos) cuando hacemos una petición a un estático es muy probable que uno de los dos puntos de Cloudflare sea el más cercano a servir el contenido, pero en el caso de una página generada dinámicamente tu trayecto va a ser desde el Dispositivo hasta Cloudflare, y Cloudflare tendrá que aplicar las reglas, ver que no la cumple, por lo que Cloudflare tendrá que llamar a tu sitio web, generar la respuesta, devolverla, Cloudflare la procesará y se la servirá al usuario. ¿Necesario? No porque el 100% de los contenidos dinámicos van a tener esta problemática. Sí, ya sé que hay otras ventajas e inconvenientes, pero quiero centrarme en lo propio de un CDN.

Teniendo esto en cuenta ¿cómo hacer que sólo se cacheen los contenidos estáticos en una CDN con WordPress? Para comenzar, por defecto los Medios que se suben a WordPress se alojan en la carpeta /wp-content/uploads/, bajo el mismo dominio. Esto hace que no se pueda cachear concretamente sóloe sta parte… pero hay un truco, algo que hace años WordPress mostraba por defecto y que ahora está oculto.

Configurar DNS

El primer paso será el de crear un subdominio (u otro dominio) que va a ser el que vamos a cachear y que será el CDN realmente. Para ello iremos a nuestro listado de entradas DNS y crearemos una entrada de este estilo:

estaticos.example.com A 123.456.789.123

Se puede hacer con una entrada A, con un CNAME, con un DNAME… consulta con tu proveedor de alojamiento para que te digan la mejor forma de hacerlo.

Lo siguiente que hay que es configurar dónde apunta ese subdominio. La idea es que no apunte a la carpeta raíz de WordPress o a una nueva carpeta, sino a /wp-content/uploads/. Igual que antes, consulta con tu proveedor para optimizar este punto.

El objetivo es que cuando se llame a https://estaticos.example.com/imagen.jpg en realidad se llamará a la que hay en la ruta https://www.example.com/wp-content/uploads/imagen.jpg. Ambas rutas deberían funcionar correctamente a que ambos hostname apuntan a los mismos sitios.

Configurar WordPress

Lo importante de este sistema es que intentemos tocar lo menos posible WordPress. Si algún día queremos deshacer este sistema de CDN se podrá hacer fácilmente ejecutando un comando. Esto significa que físicamente los ficheros se van a seguir subiendo y gestionando en el mismo lugar donde WordPress los guarda habitualmente.

Lo que si que vamos a hacer es un cambio en la configuración de WordPress. Estas opciones venían anteriormente en la sección de Configuración, pero dejaron de aparecer hace un tiempo. Aún no estando visibles, siguen estando en el núcleo de WordPress y es muy útil su uso.

Para acceder a todo el listado de opciones visitaremos desde el Panel de Administración una dirección tal que https://www.example.com/wp-admin/options.php. Esta dirección no está accesible desde el menú de navegación, y básicamente muestra una lista de todos los elementos de la tabla de opciones.

Una vez allí, buscaremos la opción upload_url_path que en principio debería estar vacía. Lo que haremos será actualizarla por https://estaticos.example.com guardando la información con el botón al final de la página.

A partir de este momento WordPress gestionará los medios con la dirección nueva.

Actualizar las rutas anteriores

Antes de continuar lo que haremos es actualizar todas las direcciones de imágenes u otros contenidos que tengamos en todo el sitio. Para este caso voy a utilizar WP-CLI que es la opción más rápida y sencilla, aunque se puede usar algún otro plugin de reemplazar contenidos.

Podemos hacer primero una prueba en la que se nos informe de los cambios que se van a aplicar. Para ello ejecutaremos el comando:

wp search-replace 'https://www.example.com/wp-content/uploads/' 'https://estaticos.example.com/' --dry-run

Si vemos que el cambio es correcto, ejecutaremos la consulta por completo y aplicando los cambios en la base de datos. Por favor, antes de hacer esto haz una copia de la base de datos.

wp search-replace 'https://www.example.com/wp-content/uploads/' 'https://estaticos.example.com/'

Con este cambio, si vamos a la página principal de nuestro sitio o a la ficha de una entrada o producto podremos ver que las imágenes no llaman a la URL con el WWW, sino con el subdominio ESTATICOS. Esto significa que todo ha funcionado correctamente.

Configurar el CDN

Para configurar la CDN tenemos varios trabajos previos. Lo primero es buscar la CDN adecuada para nosotros. Lo más recomendable es que además tenga un plugin para WordPress que sea capaz de gestionar las invalidaciones otro tipo de elementos.

Una buena manera de investigar es hacer una búsqueda de plugins de CDN para WordPress. Allí veremos sistemas y alternativas.

Configurar el CDN

Lo primero será crear la cuenta en la CDN y configurar las DNS o lo que nos pidan para que todo funcione correctamente. Es muy probable que esto sea un rehacer el primer paso de las DNS, pero hay que tener en cuenta que si algún día quieres dejar de usar el servicio de DNS, siempre puedes volver atrás y dejarlo para que tengas el control total del sistema tú.

Instalar el plugin de CDN

Una vez elegido y creada la cuenta dentro del proveedor de CDN instalaremos el plugin y configuraremos.

Y en principio, ya está. A partir de este momento tu sitio web disfruta de la parte de Medios de un sistema de CDN que hará que se mejoren los tiempos y optimizaciones de la parte de los contenidos estáticos que en principio no varían.

Extra: algunos CDN

La pregunta que más me hacen es qué CDN elegir si queremos aplicar ESTE SISTEMA. Y destaco lo de ESTE porque como explicaba al principio hay sistemas que gestionan todo tu tráfico debido a que requieren un control de las DNS (y por tanto regalar información sobre tu sitio a proveedores que ganan dinero vendiendo esa información-anónima o no- sin que tú lo sepas).

Voy a partir de la base de que tu sitio mueve 100GB de datos al mes. Las cifras que expongo son muy aproximadas pero es para hacer una idea.

Al fin y al cabo, tener un CDN para un proyecto importante es importante y muy barato.

Sobre este documento

Este documento está regulado por la licencia EUPL v1.2, publicado en WP SysAdmin y creado por Javier Casares. Por favor, si utilizas este contenido en tu sitio web, tu presentación o cualquier material que distribuyas, recuerda hacer una mención a este sitio o a su autor, y teniendo que poner el material que crees bajo licencia EUPL.