Para tener una página web en óptimas condiciones, debemos considerar muchos factores, entre ellos se encuentran el SEO y WPO.

El SEO (Search Engine Optimization) es la optimización para buscadores, lo cual es un tema muy amplio que podremos abordar en otros artículos. El WPO (Web Performance Optimization) es la optimización del rendimiento de la web, este tema también es muy amplio, pero una de las formas de optimizar el rendimiento de una web es por medio de la implementación o uso de una CDN (Content Delivery Network) o red de distribución de contenidos.

Al usar una CDN, nuestro servidor tendrá el apoyo de otros servidores para que las imágenes, videos, archivos web y todo tipo de documentos sean servidos, entregados o presentados. Además, una CDN es capaz de identificar la ubicación de un visitante y asignar un servidor cercano a esta ubicación para que mejore la velocidad de carga de la página web.

La velocidad de carga de una página web es tan importante que Google considera este factor como uno que puede ayudarnos a mejorar el SEO o posicionamiento web: nuestra página web tendrá mayor visibilidad en Google respecto a otras de la competencia. Esto tiene sentido ya que una página web veloz mejora la experiencia de los usuarios, mientras que una página web lenta es rápidamente descartada entre las preferencias.

¿Cómo activo una CDN en mi página web?

Existen muchos servicios que brindan esta tecnología como lo siguientes:

• CloudFlare
• Akamai CDN
• CloudFront de Amazon Web Services (AWS)
• Microsoft Azure CDN

Probamos el servicio de BunnyCDN y decidimos migrar toda nuestra red allí debido a la buena experiencia con su tecnología, facilidad de uso, atención al cliente y precios competitivos. Lo mejor de todo es que podemos probar el servicio durante 14 días sin necesidad de ingresar los datos de nuestra tarjeta de crédito, lo cual nos dio mucha confianza desde el inicio.

Lo primero que debemos hacer es ingresar a la web oficial de BunnyCDN y dar clic sobre el botón naranja "Try Free for 14 days". La plataforma nos solicitará un email y contraseña para crear nuestro usuario.

Luego de ello, veremos el panel de control, donde nos indican que tenemos 14 días para probar el servicio o hasta 1,000 GB de forma gratuita, lo cual suele ser más que suficiente en la mayoría de casos.

No olvidemos confirmar nuestro registro a través del enlace que nos enviarán vía correo electrónico.

Al volver a la plataforma, BunnyCDN nos solicitará añadir una Pull Zone o zona CDN. Aquí debemos asignar un nombre (Name), el cual puede ser nuestro dominio o uno relacionado con él. En URL de origen (Origin URL) debemos añadir nuestro dominio incluyendo HTTPS, según sea el caso.

En la parte inferior veremos el precio correspondiente para que nuestra CDN tenga ubicaciones en distintas partes del mundo.

• Europa y América del Norte tienen un costo de US$0.010 por cada GB
• Asia y Oceanía tienen un costo de US$0.030 por cada GB
• Sudamérica tiene un costo de US$0.045 por cada GB
• Sudáfrica tiene un costo de US$0.060 por cada GB

En caso de no tener activa una región, los visitantes se conectarán a la región más cerca de forma automática.

Luego de asignar un nombre o Pull Zone Name, debemos indicar la URL de origen y activar las zonas que deseamos, debemos dar clic en el botón naranja "+ And Pull Zone". Inmediatamente después, BunnyCDN nos recordará que nuestros archivos estáticos como imágenes, CSS, JS, entre otros, deberán tener una URL que apunte a b-cdn.net, como el siguiente ejemplo:

• Antes: https://midominio.com/logo.png
• Ahora: https://midominio.b-cdn.net/logo.png

Como podemos apreciar, todos los archivos estáticos servidos por medio de la CDN tendrán el mismo nombre e incluso la misma estructura de las carpetas y subcarpetas, pero lo mejor de todo es que si usamos WordPress no necesitamos reemplazar las rutas manualmente.

¿Cómo uso BunnyCDN con WordPress?

WordPress es un CMS o sistema de gestión de contenidos muy popular que nos permite realizar publicaciones con facilidad para no perder tiempo en aspectos técnicos, sino dedicarnos a lo importante para nuestro negocio: publicar contenido de calidad.

En ese sentido, WordPress cuenta con plugins para diversas funciones, entre ellos se encuentra el plugin oficial de BunnyCDN, al cual podemos acceder desde este enlace. Debemos instalar y activar el plugin, el cual nos pedirá el Pull Zone Name.

¿Dónde encontramos el Pull Zone Name? Lo encontraremos en esta dirección. Esta no es una URL, sino es simplemente el nombre que elegimos en un paso previo. Luego debemos hacer clic en el botón Enable Bunny.net. Si no aparecen otras opciones, debemos hacer clic en el enlace Switch To Advanced View.

En esta pantalla debemos ingresar la API Key de nuestra cuenta en BunnyCDN, para encontrarla debemos hacer clic en este enlace o ir a la opción Account, API.

Luego de hacer clic en el botón Update CDN Settings, habremos finalizado la configuración básica de BunnyCDN. Sin embargo, aún podemos activar opciones muy útiles.

Desde Pull Zones, elegimos el nombre que queremos editar y activamos la opción Force SSL.

¿Por qué Safari no carga correctamente mi página web?

En nuestras pruebas realizadas, sucedió algo insólito: solo Safari demoraba mucho en cargar las imágenes de T21, mientras que los otros navegadores cargaban los contenidos de manera rápida y eficiente.

¿Por qué sucedía esto? Probamos desactivar el plugin de caché WP Rocket, pero ese no era el problema. Luego de descartar otras posibilidades, vimos que Safari tiene activas las siguientes opciones:

• Rastreo de sitios web: Prevenir el rastreo entre sitios
• Ocultar dirección IP: Ocultar dirección IP de los rastreadores

Safari tiene una lista de rastreadores, los cuales identifican la ubicación de los usuarios. Entre los rastreadores que identifica Safari se encuentra el dominio b-cdn.net, el cual usa BunnyCDN por defecto.

Lógicamente, una CDN debe identificar la ubicación de los usuarios para maximizar su eficiencia; sin embargo, al dificultarse esta detección por parte de Safari, la página web no carga los contenidos, los carga muy lentamente o los carga parcialmente.

¿Cómo solucionamos este problema? Una opción que no recomendamos es quitar los checks de Safari, porque otros usuarios mantendrán esas opciones activas y tendrán problemas con nuestra página web.

Afortunadamente, existe una fácil solución para este problema: personalizar el nombre del CDN. De esta forma, los archivos ya no serán servidos como https://midominio.b-cdn.net sino como https://cdn.midominio.com

Este cambio es la solución perfecta, porque así Safari no aplicará su mismo criterio de bloqueo contra nuestra propia página web.

¿Cómo personalizo el nombre del CDN?

En BunnyCDN, seleccionamos el nombre de nuestra Pull Zone y en el campo Add Custom Hostname añadimos lo siguiente: cdn.midominio.com

La pantalla con el botón naranja "Verify & Activate SSL" la dejamos en espera porque primero debemos realizar el siguiente paso.

Ahora, debemos iniciar sesión en nuestro hosting u hospedaje web e ir a la configuración de nuestro dominio, zona de gestión de las DNS.

Procedemos a añadir un registro CNAME de la siguiente forma:

• Host Record: cdn
• Points To: midominio.b-cdn.net
• TTL: 4 horas o menos

En este paso debemos tener cuidado de que en Points To debe ir el Hostname principal que vemos en nuestra Pull Zone en BunnyCDN. Parece algo complicado, pero no lo es, tan solo debemos copiar y pegar el valor respectivo. El proceso de propagación de DNS suele tardar, por lo que recomendamos esperar 5 minutos o más.

Ahora sí, volvemos a la pantalla en BunnyCDN y hacemos clic en el botón naranja Verify & Activate SSL. No olvidemos activar la opción Force SSL.

Ya que realizamos este cambio en BunnyCDN, debemos actualizar la configuración de nuestro WordPress, para ello nos dirigimos a las opciones del plugin de BunnyCDN y en CDN Domain Name debemos poner cdn.midominio.com y hacer clic en el botón Update CDN Settings, con esto se eliminará todo rastro del dominio b-cdn.net, el cual era bloqueado por Safari. No olvidemos vaciar la caché de WP Rocket o lo que corresponda.

Añadir BunnyCDN a WP Rocket

Si usamos WP Rocket como sistema de caché, debemos indicar que tenemos un CDN y brindar su URL de la siguiente forma:

• WP Rocket
• CDN
• Activamos el check Habilitar el Content Delivery Network
• Escribimos la URL de nuestro CDN personalizado: https://cdn.midominio.com
• Clic en Guardar cambios
• Vaciamos la caché de WP Rocket

¿Qué sucede si falla el servicio de CDN?

En este caso, si falla el servicio de BunnyCDN, únicamente debemos desactivar su plugin de WordPress y vaciar la caché en WP Rocket hasta que se restablezca el servicio. Al hacer esto, la ruta de nuestras imágenes y archivos estáticos cambiarán de la siguiente forma:

• Ruta con CDN activo: https://cdn.midominio.com/wp-content/uploads/2022/02/imagen.jpg
• Ruta con CDN inactivo: https://midominio.com/wp-content/uploads/2022/02/imagen.jpg

Como vemos, la diferencia es mínima y en un par de clics lograremos que nuestro contenido vuelva a estar visible para nuestra audiencia, aunque la carga de nuestra página web sea más lenta debido a que en ese momento no contaría con el servicio de CDN activo.

¿Por qué podría fallar el servicio?

Por un ciberataque coordinado, ya que ninguna empresa está libre de ello.

¿Por qué BunnyCDN registra tráfico desde países donde no tenemos audiencia?

Tecnología 21 es un medio con alcance internacional, entre los principales países de nuestra audiencia se encuentran España, México, Perú, Colombia, Estados Unidos, entre otros. BunnyCDN detectó un aumento considerable en el tráfico desde Paris; sin embargo, Google Analytics no indicaba un aumento de visitas desde Francia.

¿A qué se debe este particular registro?

Como tenemos activado el CDN con optimización para Europa, asumimos que ese servidor se encontraba ubicado en Paris y el tráfico que se veía era del servidor realizando una copia de los archivos para desempeñar su función de entregar esos archivos eficientemente a nuestra audiencia en Europa. Sin embargo, el equipo de soporte de BunnyCDN nos indicó que este problema se originaba por parte del servicio de Ahrefs.

Ahrefs es una plataforma para analizar el SEO de nuestra página web y así poder optimizar todo error encontrado; sin embargo, al tener procesos automáticos de forma diaria se registraba mucho tráfico desde esa ubicación.

¿Cómo reducimos o anulamos el rastreo del bot de Ahrefs?

Para ello, debemos dirigirnos a su Dashboard, ubicar el dominio en cuestión y en la parte superior derecha de ese bloque veremos el icono de tres puntos en vertical, hacemos clic en Edit Settings, Site Audit y configuramos la frecuencia de rastreo a diario, semanal o mensual. También podemos desactivar el rastreo a un clic de distancia. Otra forma de acceder allí es desde Account Settings, Projects y seleccionando nuestro sitio web en cuestión para proceder con la configuración.

Analizando nuestro tráfico podemos identificar si existen otros bots que automáticamente consumen nuestros recursos. Existen muchas formas de bloquearlos, lo usual es hacerlo por medio del archivo .htaccess, pero eso es materia de otro tutorial enfocado en la seguridad y optimización de recursos de nuestro servidor web.

Esperamos que esta guía les permita activar una CDN y lograr que mejore la velocidad de sus páginas web, lo cual se traducirá en una mejor experiencia para sus usuarios, garantizará la disponibilidad de sus contenidos y permitirá que obtengan mayores ingresos.

Pueden probar el servicio de BunnyCDN a través de este enlace.

Problemas y soluciones

Artículos con la URL errónea de forma automática

En una ocasión, añadimos las carpetas i y o a la lista de Included Directories del plugin; sin embargo, notamos que todos los artículos que iniciaban con la letra i y la letra o cambiaban automáticamente a la URL que incluía CDN. La solución a esto es únicamente usar un nombre único, el cual no vaya a ser usado en la URL de un artículo o página de WordPress.