Aumenta el rendimiento del sitio web con AWS S3 y CloudFront

Vivimos en un mundo en el que la gente espera cada vez más velocidad. En fracciones de segundo, tu sitio web puede perder valiosas visitas y, a su vez, dinero. Aunque la mayoría de la gente piensa que las CDN son para los "grandes", en realidad son súper baratas e increíblemente fáciles de usar hoy en día.

En este tutorial te mostraré cómo configurar y utilizar los servicios web de Amazon S3 y CloudFront para disminuir el tiempo de carga del sitio web, así como mostrar las diferencias de rendimiento.

¿Qué es una CDN?

Una CDN es una red de entrega (o distribución) de contenidos. Se trata de una red de ordenadores con cada sistema colocado en diferentes puntos con los mismos datos en cada uno. Cuando alguien accede a la red, puede acceder al archivo del sistema más cercano o al que tenga menos carga actual. De este modo, se reduce la latencia y la duración de la descarga de los archivos. Para saber más sobre las CDN, consulta "Content delivery network" en Wikipedia.

En el ejemplo de la imagen anterior, los visitantes acceden al servidor más cercano que les proporcionará el mejor rendimiento posible. La red de servidores sería la CDN. Un alojamiento web normal tendría un servidor central al que tendrían que acceder todos esos visitantes. Ese único servidor podría estar situado solo en EE.UU. o quizás en Europa y daría lugar a una mayor latencia y tiempos de carga para los visitantes más lejanos.

Utilizar más de un servidor, incluso en un solo continente, marcará la diferencia en el rendimiento.

Por qué y la prueba

Muchas personas me han preguntado por qué es importante una CDN, incluso para los sitios web más pequeños, y por qué deberían molestarse en pagar por otro servicio web. La respuesta es sencilla: cuanto más rápido, mejor. Y ¿por qué no ofrecer a tus clientes (visitantes) lo mejor que puedas?

Cuanto más pequeño sea el sitio web, menor será el impacto de una CDN. Aunque, si tus visitantes se traducen en dinero para ti, todo ayuda.

• En 2006, las pruebas de Google demostraron que aumentar el tiempo de carga en 0,5 segundos suponía un descenso del 20% del tráfico.
• En 2007, las pruebas de Amazon demostraron que por cada aumento de 100 ms en el tiempo de carga, las ventas disminuían un 1%.
• Este año (2009) Akamai (líder en CDN) reveló en un estudio que 2 segundos es el nuevo umbral para los tiempos de respuesta de las páginas web de comercio electrónico.

Es barato. Es fácil. Y puede traducirse en más dinero en términos de clientes y ahorro en tus gastos habituales de alojamiento web.

Servicios web de Amazon (AWS)

Amazon ofrece una gran cantidad de fantásticos servicios web. Utilizaremos el Servicio de Almacenamiento Simple de Amazon (S3) y CloudFront. S3 es una solución de almacenamiento de datos en la nube que puede vincularse a CloudFront, el CDN de Amazon.

Si buscas una solución un poco más sencilla, todo en uno, Rackspace Cloud Files es otra gran opción. Se han asociado con la CDN de Limelight Network, que tiene un rendimiento ligeramente mejor que la CDN de Amazon actualmente. Sin embargo, su servicio tiene algunas desventajas que no encontrarás con Amazon. No voy a entrar en todos ellos, pero uno de los más importantes para mí fue la falta de soporte de CNAME personalizado, que supuestamente llegará en algún momento en el futuro. Con el soporte de CNAME puedes configurar un subdominio personalizado para acceder a tus archivos como "cdn.sudominio.com".

Para ver comparaciones de resultados recientes, visita http://www.cloudclimate.com/cdns/

Precios

Estos son los precios del S3 de Amazon para Estados Unidos. Para otras zonas, haz clic en la imagen para ver los precios completos.

Estos son los precios de Amazon CloudFront para Estados Unidos. Para otras zonas, haz clic en la imagen para ver los precios completos.

Utiliza la calculadora mensual de Amazon para hacerte una mejor idea de tu factura final. El mes pasado, mi factura total fue de menos de 5 dólares, y la mayor parte se debió a los más de 20 GB de almacenamiento de datos. Como puedes ver, es muy, muy barato, especialmente si tienes en cuenta las ventajas de rendimiento y flexibilidad.

Configurar S3 y CloudFront

Para empezar, tenemos que registrarnos en los servicios S3 y CloudFront de Amazon. Si ya tienes una cuenta en Amazon, solo tendrás que iniciar sesión y finalizar el registro. Si no es así, tendrás que crear una cuenta y luego proceder a registrarte en S3 y CloudFront. El registro consiste simplemente en añadir el servicio a tu cuenta. No hay nada complicado.

Haz clic en cada imagen para ir a la página de información e inscripción del servicio.

Una vez que te hayas inscrito, obtendrás un ID de clave de acceso y una clave de acceso secreta que puedes encontrar en "Tu cuenta" > "Credenciales de seguridad". Esto es básicamente tu nombre de usuario y contraseña para acceder a S3.

Configura el cubo S3 para los archivos

Primero tenemos que crear un bucket para almacenar todos nuestros archivos. Para obtener más información sobre los "buckets" lee "Amazon S3 Buckets Described in Plain English".

Para ello, primero entraremos en nuestra cuenta de S3 utilizando el ID de la clave de acceso y la clave de acceso secreta con una aplicación como Transmit (OS X), que es la que yo utilizaré. Para ver más aplicaciones o complementos del navegador para acceder a S3 consulta "Amazon S3 Simple Storage Service - Everything You Wanted to Know".

Una vez iniciada la sesión, crearemos un cubo para poner nuestros archivos. Yo he llamado al mío "files.jremick.com". Los cubos deben tener nombres únicos, deben tener entre 3 y 63 caracteres y pueden contener letras, números y guiones (pero no pueden terminar con un guión).

Por único, quieren decir único en la red de AWS. Así que es una buena idea usar algo como una URL o algo similar.

Ahora se puede acceder a los archivos que pusimos en este cubo en "files.jremick.com.s3.amazonaws.com". Sin embargo, esta URL es bastante larga y podemos configurar rápidamente una más corta. Para ello, configuraremos una nueva entrada CNAME en nuestro alojamiento web.

Configura un subdominio S3 personalizado

Para acortar la URL por defecto crearemos una entrada CNAME como he hecho yo a continuación (esto es en tu alojamiento web). He elegido "archivos" como subdominio, pero puedes usar lo que quieras.

Ahora podemos acceder a estos archivos del cubo en "files.jremick.com". Mucho mejor. A continuación, solo tienes que subir los archivos que quieras dentro del bucket "files.jremick.com".

Una vez subidos los archivos, querrás configurar la ACL (lista de control de acceso) para permitir que todo el mundo pueda leer los archivos (si los quieres públicos). En Transmit solo tienes que hacer clic con el botón derecho del ratón, seleccionar obtener información, en los permisos establecer "Lectura" a "Mundo" y hacer clic en "Aplicar a los elementos adjuntos...". Esto dará a todos los archivos dentro de este cubo acceso de lectura al mundo.

Por defecto, los archivos subidos a tu cuenta de S3 solo permitirán el acceso de lectura y escritura al propietario. Por lo tanto, si subes nuevos archivos más adelante, tendrás que volver a realizar estos pasos o aplicar permisos diferentes solo para esos archivos.

Crea la distribución de CloudFiles

Ahora que hemos configurado S3, creado una URL más corta y subido nuestros archivos, vamos a querer hacer que esos archivos sean accesibles a través de CloudFront para obtener una latencia súper baja para reducir nuestros tiempos de carga. Para ello necesitamos crear una distribución de CloudFront.

Inicia sesión en tu cuenta de AWS y navega hasta tu consola de administración de Amazon CloudFront (en el menú desplegable "Tu cuenta"). A continuación, haz clic en el botón "Crear distribución".

Seleccionaremos el cubo de origen (el cubo que hemos creado antes), activaremos el registro si lo deseamos, especificaremos un CNAME y los comentarios y, finalmente, activaremos o desactivaremos la distribución. No tienes que introducir un CNAME o comentarios pero querremos configurar una URL más corta más tarde como hicimos para S3. Me gustaría usar "cdn.jremick.com" así que eso es lo que estoy configurando aquí.

Como puedes ver, la URL por defecto es bastante fea. No es algo que quieras tratar de recordar. Así que ahora vamos a configurar un CNAME para la bonita y corta URL.

Configura el subdominio personalizado de CloudFiles

Para configurar el subdominio personalizado de CloudFiles, haremos el mismo proceso que hicimos para S3.

Ahora podemos acceder a los archivos a través de CloudFront usando "cdn.jremick.com".

Cómo funciona todo

Cuando alguien accede a un archivo a través de tu bucket de S3, éste actúa como un host de archivos normal. Sin embargo, cuando alguien accede a un archivo a través de CloudFiles, solicita el archivo desde su cubo de S3 (el origen) y lo almacena en caché en el servidor CDN más cercano a la solicitud original para todas las solicitudes posteriores. Es un poco más complicado que eso, pero esa es la idea general.

Piensa en una CDN como una red inteligente que es capaz de determinar la ruta más rápida posible para la entrega de solicitudes. Otro ejemplo sería que si el servidor más cercano está saturado de tráfico, puede ser más rápido obtener el archivo de un servidor un poco más lejano pero con menos tráfico. Entonces CloudFront entregará el archivo solicitado desde esa ubicación.

Problemas de caché

Una vez que un archivo se almacena en la caché de los servidores de red de CloudFront, no se sustituye hasta que caduca y se elimina automáticamente (tras 24 horas de inactividad por defecto). Esto puede ser una gran molestia si estás tratando de enviar actualizaciones inmediatamente. Para evitarlo, tendrás que versionar tus archivos. Por ejemplo, "my-stylesheet.css" podría ser "my-stylesheet-v1.0.css". Luego, cuando hagas una actualización que deba salir inmediatamente, cambiarás el nombre a "mi-hoja-de-estilo-v1.1.css" o algo similar.

Pruebas de rendimiento

Nuestro contenido está subido a nuestro bucket de S3, nuestra distribución de CloudFront está desplegada y nuestros subdominios personalizados están configurados para facilitar el acceso. Es hora de ponerlo a prueba para ver qué tipo de beneficios de rendimiento podemos esperar.

He configurado 44 imágenes de ejemplo cuyo tamaño oscila entre aproximadamente 2KB y 45KB. Puede que pienses que son más imágenes de las que la mayoría de los sitios web pueden cargar en una sola página. Eso puede ser cierto, pero hay muchos sitios web como portafolios, sitios de comercio electrónico, blogs, etc. que cargan tantas y posiblemente más imágenes.

Aunque para este ejemplo solo estoy utilizando imágenes, lo importante es el tamaño del archivo y la cantidad para la comparación. Los sitios web actuales cargan varios archivos javascript, CSS, HTML e imágenes en cada página. 44 solicitudes de archivos es probablemente menos de lo que la mayoría de los sitios web hacen en realidad, por lo que una CDN podría tener un impacto aún mayor en tu sitio web de lo que veremos en esta comparación.

Estoy usando el Inspector Web de Safari para ver los resultados de rendimiento, he deshabilitado las cachés y he hecho shift + refresh 10-15 veces (aproximadamente cada 2-3 segundos) para cada prueba para obtener un promedio decente del tiempo de carga total, la latencia y la duración.

• 45 Archivos totales (incluyendo el documento HTML)
• 561,13KB Tamaño total del archivo combinado

Anfitrión habitual de la web

Aquí están los resultados de rendimiento cuando se aloja a través de mi anfitrión web habitual. Ordenados por latencia.

• 1,82-1,95 segundos de tiempo total de carga
• 90ms Latencia más rápida (última prueba)
• 161ms Latencia más lenta (última prueba)
• ~65% de las imágenes tenían una latencia inferior a 110ms

Ordenados por duración.

• 92ms Duración más rápida (última prueba)
• 396ms Duración más lenta (última prueba)

Amazon S3

Se utilizaron exactamente los mismos archivos para las pruebas de S3. Ordenados por latencia.

• 1,3-1,6 segundos de tiempo total de carga
• 55ms Latencia más rápida (última prueba)
• 135ms Latencia más lenta (última prueba)
• ~90% de las imágenes tenían una latencia inferior a 100ms

Ordenados por duración.

• 56ms Duración más rápida (última prueba)
• 279ms Duración más lenta (última prueba)

S3 es más rápido que mi alojamiento web habitual, pero solo marginalmente. Si no te apetece jugar con un CDN, S3 sigue siendo una gran opción para dar a tu sitio web un impulso de velocidad decente. Sin embargo, sigo recomendando el uso de una CDN y veremos por qué en la siguiente prueba.

Amazon CloudFiles

Se utilizaron exactamente los mismos archivos para probar CloudFront.

• 750-850ms Tiempo total de carga
• 25ms Latencia más rápida (última prueba)
• 112ms Latencia más lenta (última prueba)
• El ~85% de las imágenes tenían una latencia inferior a 55ms.
• Solo un archivo tuvo una latencia de más de 100ms.

Ordenados por duración.

• 38ms Duración más rápida (última prueba)
• 183ms Duración más lenta (última prueba)

Comparación

He aquí un rápido desglose de la comparación de rendimiento entre mi host web habitual y los mismos archivos en el servicio CloudFront de Amazon.

• 1,82-1,95 segundos frente a 0,75-0,85 segundos de tiempo de carga total (~1,1 segundos más rápido)
• 90ms contra 25ms de latencia más rápida (65ms más rápido)
• 161ms contra 112ms de latencia más lenta (49ms más rápido)
• CloudFront: Solo un archivo con latencia superior a 100ms y el 85% de los archivos con latencia inferior a 55ms
• Anfitrión web normal: Solo el 65% de los archivos tenían una latencia inferior a 110ms

Comparación de la duración

• 92ms vs 38ms Duración más rápida (54ms más rápido)
• 396ms vs 183ms Duración más lenta (213ms más rápida)

50ms o incluso 100ms no parece un tiempo de espera muy largo (0,1 segundos), pero cuando repites esto para 30, 40, 50 o más archivos, puedes ver cómo se suman rápidamente los segundos.

Comparación visual

Aquí hay un vídeo rápido para mostrar lo notable que es el aumento del tiempo de carga. He desactivado las cachés y he hecho una actualización forzada (shift + refresh) para asegurarme de que las imágenes no se están almacenando en la caché.

Otras formas de aumentar el rendimiento

Hay otras formas de aumentar el rendimiento del sitio web cuando se utiliza una CDN.

• Crea diferentes subdominios para diferentes tipos de archivos para maximizar las descargas paralelas. Por ejemplo, carga las imágenes desde "images.jremick.com" y otros archivos como scripts y CSS desde "cdn.jremick.com". Esto permitirá que se carguen más archivos en paralelo reduciendo el tiempo total de carga.
• Archivos gzip como JavaScript y CSS
• Configura ETags

Para más información, consulta las mejores prácticas para acelerar tu sitio web.

Servir archivos comprimidos desde CloudFiles

Una de las opciones anteriores para aumentar aún más el rendimiento era proporcionar archivos comprimidos en gzip. Lamentablemente, CloudFront no es capaz de determinar automáticamente si un visitante puede aceptar archivos gzipped o no y servir el correcto. Afortunadamente, todos los navegadores modernos son compatibles con los archivos comprimidos.

Crea y sube tus archivos comprimidos en Gzip

Para servir archivos gzipped desde CloudFront, podemos dar a nuestro sitio web algo de lógica para servir los archivos correctos o podemos establecer el Content-Encoding y Content-Type en algunos archivos específicos para mantener las cosas un poco más simples. Comprime los archivos que quieras y renómbralos para que no terminen en .gz. Por ejemplo, "nombrearchivo.css.gz" se convertiría en "nombrearchivo.css" o para recordar que es un archivo gzipado, nómbralo "nombrearchivo.gz.css". Ahora sube el archivo gzipped a la ubicación de tu bucket de S3 que quieras (no te olvides de configurar los ACL/Permisos).

Si no estás seguro de cómo comprimir un archivo, consulta http://www.gzip.org (OS X puede hacerlo en el terminal)

Establece la codificación del contenido y el tipo de contenido

Necesitamos establecer el Content-Encoding y el Content-Type (si no está ya establecido) en nuestros archivos para que cuando se solicite a través del navegador sepa que el contenido está comprimido en gzip y sea capaz de descomprimirlo correctamente. De lo contrario, se verá así.

Podemos hacerlo fácilmente con Bucket Explorer. Una vez que lo hayas descargado, introduce tu clave de acceso y clave secreta de AWS para iniciar sesión en tu cuenta de S3. Busca el archivo gzipped que has subido antes, haz clic con el botón derecho y selecciona "Actualizar metadatos".

Como puedes ver, ya tiene el Content-Type configurado como text/css así que no necesitamos configurarlo (javascript sería text/javascript). Solo tenemos que añadir el Content-Encoding correcto. Haz clic en "Añadir" y en el diálogo emergente introduce "Content-Encoding" en el campo Key y "gzip" en el campo Value. Haz clic en Aceptar, luego en Guardar y ya está. Ahora el navegador verá el archivo correctamente.

Al comprimir un archivo se puede reducir en gran medida su tamaño. Por ejemplo, esta hoja de estilo de prueba tenía unos 22KB y se redujo a aproximadamente 5KB. Para mi blog he combinado todos mis plugins jQuery con jQuery UI Tabs. Después de la minificación se redujo a 26,49KB, después de ser gzipped se redujo a 8,17KB.

Conclusión

Hay muchas maneras de aumentar el rendimiento de tu sitio web y, en mi opinión, vale la pena probarlas. Si los visitantes están a solo 0,5 segundos o incluso a 1 segundo de abandonar tu sitio web, una CDN podría evitar que eso ocurra. Además, la mayoría de nosotros somos fanáticos de la velocidad, así que ¿por qué no aumentar el rendimiento de tu sitio web si puedes? Especialmente si puede ahorrarte dinero en el proceso.

Si tienes alguna pregunta, házmelo saber en los comentarios e intentaré responderla. ¡gracias!

• Síguenos en Twitter, o suscríbete a la fuente RSS de Nettuts+ para obtener más tuts y artículos diarios sobre desarrollo web.