Como usar CDN WordPress + CloudFront AWS [tutorial]

Veremos como usar CDN para WordPress y no solo, veremos también como instalar y como explotar al máximo nuestro CDN (content delivery network).

Esta guía paso a paso consiste en como usar la plataforma Cloudfront el CDN de Amazon y como hacer todo configuración para poder implementarlo en nuestra pagina web o Worpdress, en este caso vamos a usar Worpdress y para ello usaremos un plugin llamado WP-Rocket.

¿Que es un CDN (content delivery network)?

El CDN significa en ingles Content Delivery Network, en pocas palabras es grupo de servidores que mantienen una copia de nuestro contenido y entregan este contenido web al usuario basado en la Geolocalización.
Como podemos ver en la imagen los CDN NODE mantienen una copia de nuestro contenido y es entregado en base al cliente mas cercano.

¿Que es Amazon Cloudfront ?

Amazon Cloudfront es servicio mas de AWS cloud plataform de red de entrega de contenido (CDN) global que proporciona datos, vídeos, aplicaciones de forma segura a sus espectadores con baja latencia y altas velocidades de transferencia.

Amazon CloudFront tiene 132 puntos de presencia (121 ubicaciones de borde y 11 cachés de borde regionales) en 59 ciudades de 26 países.La red de ubicaciones de borde o (Edge) ayuda a garantizar que sus aplicaciones se entreguen con alta disponibilidad, escalabilidad y rendimiento a todos sus clientes internacionales.

¿Cuanto cuesta usar CDN Cloudfront AWS?

Vamos a lo principal cuanto cuesta usar el CDN de Amazon Cloudfront. Se paga por los datos transferidos! bien si se paga solo si hay peticiones de parte de los clientes.
Si tenemos una cuenta nueva en AWS es gratis hasta 50 GB de datos por mes por todo un año, esto es fabuloso si tenemos un proyecto nuevo y queremos experimentar el cdn para wordpress.

si quieren saber los precios aquí les dejo la calculadora, para calcular los precios : https://calculator.s3.amazonaws.com/index.html

También les dejo la pagina de precios de Cloudfront para mas detalles. https://aws.amazon.com/cloudfront/pricing/

¿Como configurar Amazon Cloudfront?

Para hacerlo mas simple e creado un screenshot de la configuracion, las partes marcadas en rojo son las que deberias modificar, mientras las demás, si no estas seguro para que sirve mejor dejarlo así como esta.

Una vez cambiado las opciones hacemos click en create distribution, para que termine la creación se demorara como 20 a 30 minutos

entonces regresamos a la pagina de cloudfront y veremos algo asi en STATE tiene que decir DEPLOYED.

Hacemos en distribution setting, bueno ya esta casi todo listo almeno lo principal ya esta listo. Ahora vamos a copiar lo que eta marcado en rojo el Domain Name, y lo vamos a pegar en nuestro navegador en la URL, si carga la pagina web completa quiere decir que a salido todo bien.
Si en caso tengan algún error, como 502 o error de originen, entonces pueda ser que escribieron mal el dominio de la web y no puede acceder a ella.

¿Como usar CDN wordpress?

Una vez que ya tenemos nuestro CDN en cloudfronfront configurado y nos acertamos que dice DEPLOYED, podemos empezar a configurad nuestro cdn para wordpress.

Para usar el CDN para wordpress hay diferentes plugin algunos a pagamento algunos gratuitos, bueno yo en especial uso WP-Rocket, para optimizar archivos y para que agilice mi pagina web, pero también tiene la opción CDN, como podemos ver en la imagen de abajo

Pero tu puedes usar tu plugin que mas prefieres, por ejemplo W3 Total Cache, CDN enabler.

ahora si vamos como activar nuestro CDN

¿Como activar CDN WordPress?

Vamos al plugin de WP-ROCKET de ahi vamos a CDN(como en la foto de abajo), en la parta CNAME del CDN, agregamos nuesto DOMINIO DE CLOUDFRONT como pueden ver en el ejemplo, seleccionamos habilitar el Content Delivery Network para wordpress y finalmente le damos en Guardar Cambios.

Ahora ya esta listo!

Solo nos queda probar si esta cargando desde nuestra CDN.
Podemos usar: https://tools.pingdom.com/ y escribimos el nombre de nuestra pagina web.

En los resultados debemos ver la URL del Dominio del CDN que introducimos en WP-Rocket (como en la foto de abajo)

Podemos ver también si a mejorado la velocidad de carga

Video tutorial paso a paso [CDN WordPress]

Conclusiones

Como pueden ver el mejoramiento de velocidad es notable!
Creo que si tienes un proyecto y ven que esta creciendo es preferible invertir unos dolares y tener una pagina web con una experiencia de usuario excelente.

Ahora ya que han llegado hasta aca, te pregunto!

Que CDN estas usando y cual prefieres?