Acelera la carga de tu web utilizando Amazon Cloudfront como CDN (actualizado)
¿Por qué es importante acelerar la carga de tu web? Si es muy pesada, tardará mucho en descargar todos los recursos que necesita para mostrarse. Si un visitante llega a tu página y tiene que esperar más de 5 segundos probablemente la abandone. Por si eso no fuese suficiente, el algoritmo de Google penaliza a las páginas que cargan lentamente.
¿Y cómo funciona una red CDN? Básicamente se trata de una red de servidores que alojan una copia de la totalidad o parte de los archivos de tu web, y cuando alguien accede a dicha web, estos se descargan desde los servidores «replicados», así el servidor original no se satura y se evitan caídas, tiempos de acceso lentos, etc.
¿Qué vamos a necesitar?
Un servidor web que permita modificar registros CNAME (opcional): la posibilidad de editar registros suele estar deshabilitada en servidores gratuitos. Esto no es necesario para que el sistema funcione, pero lo necesitaremos si queremos dar un aspecto más «profesional» al nombre de nuestro CDN. Lo veremos más adelante.
Una web construida con Wordpress y el plugin «W3 total cache» instalado: hay muchas otras formas de hacerlo, pero la más sencilla es mediante este plugin.
Una cuenta en Amazon Web Services: para utilizar Cloudfront necesitamos una cuenta en AWS. Nos solicitarán la tarjeta de crédito para futuros pagos, aunque existe la llamada «capa de uso gratuito» que permite utilizar estos servicios sin pagar si no se superan ciertos límites. Aún así, los precios son tan bajos que parecen de chiste. Si quieres hacerte una idea, aquí puedes ver un cálculo aproximado del coste mensual para este blog (exagerando mucho los datos). Además puedes hacer tus propias cuentas con la calculadora de AWS.
Creando el servidor de «réplica» en AWS
Asumiendo que ya has creado y configurado tu cuenta en AWS, dirígete a la sección del servicio «Cloudfront». Aquí podrás ver una lista de todas las distribuciones que has creado. Pulsa «Create distribution» para crear una nueva. De los dos «delivery method» que aparecen el que nos interesa es el método «Web».
En «Origin name» debes introducir el dominio o subdominio de la web, de donde Cloudfront copiará los archivos. «Origin ID» es tan solo una etiqueta para que puedas identificarlo posteriormente en la lista. En «Origin Path» debes introducir el nombre del directorio en el que se encuentra tu web si no estuviese en la carpeta principal, por ejemplo, si tu web se encuentra en www.tudominio.com/ tienda, debes introducir «/tienda» (sin comillas). Si está en la carpeta principal puedes dejarlo en blanco.
Puedes experimentar con el resto de opciones aunque las marcadas por defecto funcionan bien. Un poco más abajo te encontrarás con esto:
Aquí debes seleccionar en qué servidores de Amazon será «replicada» tu web. Si eliges la opción por defecto, usarlos todos, el precio mensual que deberás pagar una vez que sobrepases los límites de la capa de uso gratuito aumentará (pero, eso sí, la carga de los recursos también será más rápida). Fíjate en el segundo cuadro, «Alternate Domain Names». De momento déjalo así, pero más tarde lo necesitaremos si quieres que tu CDN tenga un aspecto más profesional.
Una vez terminada la selección de opciones, pulsamos «Create distribution». Tardará unos 10 – 20 minutos en desplegarse, mientras tanto podemos seguir trabajando.
Enviando los archivos desde WordPress al servidor «réplica»
Como ya tienes instalado y activado el plugin que comentábamos antes, verás un menú llamado «Performance» en tu sección de administración. Dentro de ese menú, accede al submenú «General Settings» y ve al apartado de CDN. Marca la opción «Enable» (activar) y en la lista de opciones escoge «Generic Mirror». Verás que hay una opción específica para Amazon Cloudfront pero hacerlo de esta forma es mucho más sencillo.
Guarda los ajustes y dirígete al submenú CDN. El apartado contiene una serie de opciones con las que puedes experimentar, pero de momento vayamos a la configuración. En el cuadro «Replace site’s hostname with» debes introducir la dirección que Amazon asignó a tu servidor «réplica». La verás en tu panel principal de Cloudfront, su formato contiene una serie de números y letras y el dominio cloudfront.net, por ejemplo: «gfdq24eqwe.cloudfront.net»
Guarda los ajustes. De momento no tienes que hacer nada más. Una vez que el servidor «réplica» esté desplegado empezará a servir los archivos de tu web cuando alguien acceda. Puedes elegir qué archivos debe servir o cuáles no ajustándolo en las opciones del submenú CDN del plugin de Wordpress.
Nota: El plugin W3 Total Cache parece afectar al rendimiento general, especialmente en servidores compartidos. WP Super Cache es mucho más sencillo y no supone apenas diferencia de carga.
Ahora bien, cuando las personas accedan a tu web, podrán ver en la barra de estado que los archivos se están descargando desde este servidor réplica y su nombre es poco «estético». ¿Cómo podemos convertir ese nombre en uno más profesional, del tipo cdn.midominio.com?
Dando un aspecto profesional a tu CDN
Desde el panel de control de tu servidor (el propio, no la réplica de Amazon) accede al «Editor de zonas DNS» donde debes añadir el registro CNAME. En el cuadro de nombre, escribe el nombre que quieras que tenga tu CDN, en este caso he escrito «cdn2.manuel5cc.es» y en el cuadro CNAME escribe la dirección original del servidor «réplica», que en el ejemplo es «gfdq24eqwe.cloudfront.net«.
Ahora debes volver a la página de AWS, a la sección de Cloudfront, donde verás la lista de servidores que has desplegado. Selecciona el que estés usando para este dominio (si no lo habías usado antes solo tendrás uno) y pulsa en «Distribution settings». A continuación, en la pantalla que aparece, pulsa «Edit».
En el cuadro «Alternate Domain Names» debes escribir el nombre que diste anteriormente a tu CDN, es decir, en este caso, «cdn2.manuel5cc.es«.
Por último, vuelve al submenú CDN de la sección «Performance» dentro de la administración de Wordpress y cambia el nombre del servidor por el que has asignado ahora, es decir, «cdn2.manuel5cc.es«.
Guarda los cambios. Observarás que tu web se «deforma» durante unos minutos. Esto es absolutamente normal, se debe a que los archivos se están enrutando hacia el nuevo nombre.
Una vez que todo se haya reajustado, ya tenemos nuestra web preparada para cargar de forma rápida y desde una red CDN con aspecto profesional y muy barata.
Alternativa: Wp Super Cache
W3 Total Cache es un plugin muy potente. En ocasiones puede ser demasiado potente para servidores compartidos de bajas prestaciones y en lugar de acelerar la carga puede ralentizarla sobrecargando la memoria disponible. En estos casos existe un plugin alternativo llamado Wp Super Cache.
Las configuraciones de este plugin son mucho más sencillas. Para colocar los enlaces de nuestra CDN debemos acceder a la pestaña con el mismo nombre, pegar los enlaces y activar la función.
Al igual que W3 Total Cache, este plugin también admite cargar desde varias CDN. Esto ayudará a mejorar un poco más la velocidad gracias a la carga paralela desde las distintas fuentes.
Estupendo artículo que he seguido para configurar mi CDN. He logrado que funcione pero me encuentro con un problema que por lo visto es habitual en muchas instalaciones. Se trata de que hay fuentes de iconos que no se muestran correctamente en el sitio web.
Si el archivo de la fuente no está alojado en tu propio servidor y se enlaza desde un sitio externo es posible que no se haya cargado al CDN correctamente. Experimenta con las opciones del plugin W3 porque puedes indicarle que cargue archivos externos o que excluya ciertas extensiones. Si no, también puedes cargar la fuente a tu propio servidor y reajustar el código.
Un comentario, hay un punto que no comprendo bien.
Con un Cloud Front, es necesario para mostrar contenido estático y parte dinámica, la parte dinámica, llama a unas api rest, que las tengo en amazon también.
Mi pregunta es, como subo los cambios, cuando hago cambios en mi pagina web ?? puedo no tener un almacenamiento S3, ??? si es así, como subo cambios a Cloud Front, o Cloud Front, trabaja con otro sitio de donde saca la web ??
Porque me pareció raro, la primer prueba que hice, me pidió mi dominio, y pareciera que copio la web de mi dominio y la publico por medio de Cloud Front, que no es algo que yo quería.
al menos que yo en mi dominio, agregue una web en por ejemplo: www.dsinfo.com.ar/web1 y ese sea el origen para Cloud Front, cuando quiero un cambio, actualizo la web en www.dsinfo.com.ar/web1, supuestamente, Cloud Front debería detectarlo ???
Cloudfront es un CDN de tipo pull, es decir, no tienes que subir los cambios, él solo se encarga de comprobar que los archivos han cambiado y actualizarlos.
Cuando el origen es un dominio, se copia todo lo que es públicamente accesible, va a copiar toda la web salvo que especifiques un directorio concreto.
El contenido dinámico se sirve directamente desde tu servidor, dado que Cloudfront no puede manejarlo. Si quisieras hacerlo tendrías que convertir tu contenido dinámico en estático.
Muchas Gracias Manuel x la información.
Es decir que mi origen, podría ser un dominio que tengo en go daddy, no necesariamente un almacenamiento S3 de amazon, ya que tiene costo y yo en go daddy, pago anualmente ?
Y si yo cambio algo en go daddy, me dices que Cloud Front lo va a saber ?
Saludos
Eduardo
Así es, tu origen puede ser del tipo www.miweb.com y Cloudfront copiará todo lo que sea accesible. Dentro de esa web deberías implementar etiquetas de caché para facilitar la labor a Cloufront dado que si no podría tardar en actualizar los cambios.