Share
Vivimos en un mundo donde las personas esperan cada vez más y velocidades más rápidas. En fracciones de segundo, su sitio web puede perder visitantes valiosos y, a su vez, dinero. Aunque la mayoría de las personas piensan que los CDN son para los "perros grandes", en realidad son súper baratos e increíblemente fáciles de usar en estos días.
En este tutorial, le mostraré cómo configurar y usar los servicios web de Amazon S3 y CloudFront para disminuir el tiempo de carga del sitio web y para mostrar las diferencias de rendimiento..
Un CDN es una red de entrega (o distribución) de contenido. Es una red de computadoras con cada sistema colocado en diferentes puntos con los mismos datos en cada uno. Cuando alguien accede a la red, puede acceder al archivo en el sistema más cercano o al que tiene menos carga actual. Esto resulta en una mejor latencia menor y en la duración de la descarga del archivo. Para obtener más información sobre las CDN, consulte "Red de entrega de contenido" en Wikipedia.
En la imagen de ejemplo anterior, los visitantes acceden al servidor más cercano que proporcionará el mejor rendimiento posible. La red de servidores sería la CDN. Un servidor web normal tendría un servidor central al que todos los visitantes tendrían que acceder. Ese único servidor podría ubicarse solo en los Estados Unidos o quizás en Europa y daría lugar a tiempos de latencia y carga más largos para los visitantes que se encuentran más lejos..
El uso de más de un servidor, incluso en un solo continente, marcará la diferencia en el rendimiento.
Muchas personas me han preguntado por qué un CDN es importante, incluso para sitios web más pequeños, y por qué deberían molestarse en pagar por otro servicio web. La respuesta simple es: cuanto más rápido, mejor. ¿Y por qué no ofrecer a sus clientes (visitantes) lo mejor que pueda??
Cuanto más pequeño sea el sitio web, menor será el impacto que tendrá un CDN. Sin embargo, si sus visitantes se convierten en dinero para usted, entonces cada poco ayuda..
Es barato. Es fácil. Y puede traducirse en más dinero en términos de clientes y ahorrar en sus gastos de host web habituales.
Amazon proporciona una gran cantidad de servicios web fantásticos. Usaremos el Servicio de almacenamiento simple (S3) de Amazon y CloudFront. S3 es una solución de almacenamiento de datos en la nube que puede vincularse a CloudFront, el CDN de Amazon..
Si está buscando una solución todo en uno, algo más simple, Rackspace Cloud Files es otra excelente opción. Se han asociado con el CDN de Limelight Network, que tiene un rendimiento ligeramente mejor que el CDN de Amazon actualmente. Sin embargo, su servicio tiene algunos inconvenientes que no encontrará con Amazon. No me ocuparé de todo esto, pero uno de los más importantes para mí fue la falta de soporte personalizado de CNAME, que supuestamente llegará en algún momento en el futuro. Con la compatibilidad con CNAME, puede configurar un subdominio personalizado para acceder a sus archivos, como "cdn.yourdomain.com".
Para ver comparaciones recientes de rendimiento, visite http://www.cloudclimate.com/cdns/
Aquí está el precio S3 de Amazon para los Estados Unidos. Para otras áreas, haga clic en la imagen para ver el precio completo..
Aquí está el precio de Amazon CloudFront para los Estados Unidos. Para otras áreas, haga clic en la imagen para ver el precio completo..
Use la calculadora mensual de Amazon para tener una mejor idea de su factura final. El mes pasado, mi factura total fue de menos de $ 5, con la mayoría de eso incurrida desde más de 20GB de almacenamiento de datos. Como puede ver, es muy, muy barato, especialmente si tiene en cuenta los beneficios de rendimiento y flexibilidad.
Para comenzar, debemos registrarnos en los servicios S3 y CloudFront de Amazon. Si ya tiene una cuenta en Amazon, solo tendrá que iniciar sesión y finalizar el registro. De lo contrario, deberá crear una cuenta y luego registrarse para S3 y CloudFront. El registro es simplemente agregar el servicio a su cuenta. No hay nada complicado involucrado.
Haga clic en cada imagen para ir a la página de información y registro del servicio..
Una vez que se haya registrado, obtendrá una ID de clave de acceso y una Clave de acceso secreta que se pueden encontrar en "Su cuenta"> "Credenciales de seguridad". Este es básicamente su nombre de usuario y contraseña para acceder a S3.
Primero debemos crear un grupo para almacenar todos nuestros archivos. Para obtener más información sobre los "grupos", lea "Amazon S3 Buckets Described in Plain English".
Para hacer esto, primero iniciaremos sesión en nuestra cuenta S3 utilizando la ID de clave de acceso y la Clave de acceso secreta con una aplicación como Transmit (OS X), que es lo que usaré. Para ver más aplicaciones o complementos del navegador para acceder a S3, consulte "Servicio de almacenamiento simple de Amazon S3: todo lo que quería saber".
Una vez que haya iniciado sesión, crearemos un grupo para colocar nuestros archivos. He llamado a 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 únicos, significan únicos 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 colocamos 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. Vamos a configurar una nueva entrada CNAME en nuestro servidor web para hacer esto.
Para acortar la URL predeterminada, crearemos una entrada CNAME como lo he hecho a continuación (esto es en su servidor web). He elegido "archivos" como mi subdominio pero podrías usar lo que quieras.
Ahora podemos acceder a estos archivos de depósito en "files.jremick.com". ¡Mucho mejor! Luego simplemente cargue los archivos que desee en el contenedor "files.jremick.com".
Una vez que se carguen sus archivos, querrá configurar la ACL (Lista de control de acceso) para que todos puedan leer los archivos (si los desea públicos). En Transmitir, simplemente haga clic con el botón derecho, seleccione obtener información, bajo los permisos establecidos en "Leer" en "Mundo" y haga clic en "Aplicar a los elementos adjuntos ...". Esto le dará a todos los archivos dentro de este cubo acceso de lectura al mundo.
De forma predeterminada, los archivos cargados en su cuenta S3 solo permitirán el acceso de lectura y escritura al propietario. Entonces, si carga nuevos archivos más adelante, deberá seguir estos pasos nuevamente o aplicar permisos diferentes solo para esos archivos..
Ahora que configuramos S3, creamos una URL más corta y subimos nuestros archivos, desearemos 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 CloudFront..
Inicie sesión en su cuenta de AWS y navegue hasta la consola de administración de Amazon CloudFront (en el menú desplegable "Su cuenta"). Luego haga clic en el botón "Crear distribución".
Seleccionaremos el grupo de origen (el grupo que creamos anteriormente), activaremos el registro si lo desea, especificaremos un CNAME y comentarios y finalmente habilitaremos o inhabilitaremos la distribución. No es necesario que ingrese un CNAME o comentarios, pero más adelante desearemos configurar una URL más corta, como hicimos con 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. Eso no es algo que quieras recordar. Así que ahora vamos a configurar un CNAME para la URL bonita y corta.
Para configurar el subdominio de CloudFiles personalizado, realizaremos el mismo proceso que hicimos para S3.
Ahora podemos acceder a los archivos a través de CloudFront usando "cdn.jremick.com".
Cuando alguien accede a un archivo a través de su grupo de S3, actúa como un host de archivos normal. Sin embargo, cuando alguien accede a un archivo a través de CloudFiles, solicita el archivo de su grupo de S3 (el origen) y lo almacena 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.
Piense en un CDN como una red inteligente que puede determinar la ruta más rápida posible para la entrega de solicitudes. Otro ejemplo sería si el servidor más cercano está atascado con el tráfico, puede ser más rápido obtener el archivo de un servidor un poco más lejos pero con menos tráfico. Entonces, CloudFront entregará el archivo solicitado desde esa ubicación..
Una vez que un archivo se almacena en caché en los servidores de red de CloudFront, no se reemplaza hasta que caduca y se elimina automáticamente (después de 24 horas de inactividad de forma predeterminada). Esto puede ser un gran problema si está intentando eliminar las actualizaciones inmediatamente. Para solucionar esto necesitarás una versión de tus archivos. Por ejemplo, "my-stylesheet.css" podría ser "my-stylesheet-v1.0.css". Luego, cuando realice una actualización que deba salir inmediatamente, cambiará el nombre a "my-stylesheet-v1.1.css" o algo similar..
Nuestro contenido se carga en nuestro grupo de S3, nuestra distribución de CloudFront se implementa y nuestros subdominios personalizados se configuran para un fácil acceso. Es hora de ponerlo a prueba para ver qué tipo de beneficios de rendimiento podemos esperar.
He configurado 44 imágenes de ejemplo que varían en tamaño desde aproximadamente 2 KB hasta 45 KB. Podría estar pensando que se trata de más imágenes de las que cargarán la mayoría de los sitios web en una sola página. Eso puede ser cierto, pero hay muchos sitios web como carteras, sitios de comercio electrónico, blogs, etc. que cargan la misma cantidad y posiblemente más imágenes..
Aunque solo uso imágenes para este ejemplo, lo importante es el tamaño del archivo y la cantidad para la comparación. Los sitios web de hoy están cargando varios archivos javascript, CSS, HTML y de imagen en cada página. 44 solicitudes de archivos es probablemente menos de lo que la mayoría de los sitios web realizan, por lo que un CDN podría tener un impacto aún mayor en su sitio web del 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 shift + refresh 10-15 veces (aproximadamente cada 2-3 segundos) para cada prueba para obtener un promedio decente del tiempo total de carga, latencia y duración.
Aquí están los resultados de rendimiento cuando se alojan a través de mi servidor web regular. Ordenado por latencia.
Ordenados por duración.
Los mismos archivos se utilizaron para probar S3. Ordenado por latencia.
Ordenados por duración.
S3 es más rápido que mi host web normal pero solo marginalmente. Si no tenía ganas de perder el tiempo con un CDN, S3 sigue siendo una excelente opción para darle a su sitio web un aumento de velocidad decente. Aun así, recomiendo usar un CDN y veremos por qué en esta próxima prueba.
Los mismos archivos se utilizaron para probar CloudFront.
Ordenados por duración.
Aquí hay un rápido desglose de la comparación de rendimiento entre mi servidor web normal y los mismos archivos en el servicio CloudFront de Amazon.
Comparación de duración
50 ms o incluso 100 ms no suena como mucho tiempo de espera (0,1 segundos), pero cuando lo repites para 30, 40, 50 o más archivos, puedes ver cómo se acumulan rápidamente en segundos..
Aquí hay un video rápido para mostrar cuán notable es el aumento en el tiempo de carga. He deshabilitado las memorias caché y hago una actualización forzada (shift + actualizar) para asegurar que las imágenes no se almacenen en la memoria caché.
Hay varias otras formas de aumentar el rendimiento del sitio web cuando se utiliza un CDN..
Consulte Mejores prácticas para acelerar su sitio web para obtener más información..
Una de las opciones anteriores para aumentar aún más el rendimiento fue proporcionar archivos comprimidos. Desafortunadamente, CloudFront no puede determinar automáticamente si un visitante puede aceptar archivos comprimidos o no y entregar el correcto. Afortunadamente, todos los navegadores modernos admiten archivos comprimidos en estos días..
Para servir archivos comprimidos desde CloudFront, podemos darle a nuestro sitio web cierta lógica para entregar los archivos correctos o podemos configurar la codificación de contenido y el tipo de contenido en algunos archivos específicos para simplificar un poco las cosas. Gzip los archivos que desee y cámbieles el nombre para que no los finalice .gz. Por ejemplo, "filename.css.gz" se convertiría en "filename.css" o para recordarse que se trata de un archivo comprimido, asígnele el nombre "filename.gz.css". Ahora cargue el archivo comprimido en gzip en la ubicación en su cubo de S3 que desee (no olvide configurar la ACL / Permisos).
Si no está seguro de cómo gzip un archivo, consulte http://www.gzip.org (OS X puede hacer esto en la terminal)
Necesitamos configurar la codificación de contenido y el tipo de contenido (si aún no está configurado) en nuestros archivos para que, cuando se solicite a través del navegador, sepa que el contenido está comprimido y que pueda descomprimirlo correctamente. De lo contrario, se verá así.
Podemos hacerlo fácilmente con Bucket Explorer. Una vez que lo haya descargado, ingrese su clave de acceso y clave secreta de AWS para iniciar sesión en su cuenta S3. Encuentre el archivo comprimido que cargó anteriormente, haga clic con el botón derecho y seleccione "Actualizar metadatos".
Como puede ver, ya tiene el tipo de contenido configurado en texto / css, por lo que no necesitamos establecerlo (javascript sería text / javascript). Solo necesitamos agregar la codificación de contenido correcta. Haga clic en "Agregar" y, en el cuadro de diálogo emergente, ingrese "Codificación de contenido" en el campo Clave y "gzip" en el campo Valor. Haga clic en Aceptar, luego Guardar y listo! Ahora el navegador verá el archivo correctamente.
Gzipping un archivo puede reducir enormemente el tamaño del archivo. Por ejemplo, esta hoja de estilo de prueba fue de alrededor de 22 KB y se redujo a aproximadamente 5 KB. Para mi blog, he combinado todos mis complementos de jQuery con las pestañas de interfaz de usuario de jQuery. Después de la minificación, se redujo a 26.49KB, luego de ser comprimido, se redujo a 8.17KB..
Hay muchas formas de aumentar el rendimiento de su sitio web y, en mi opinión, vale la pena intentarlo. Si los visitantes están a solo 0,5 segundos o incluso 1 segundo de abandonar su sitio web, una CDN podría evitar que eso suceda. Además, la mayoría de nosotros somos fanáticos de la velocidad de todos modos, ¿por qué no aumentar el rendimiento de su sitio web si puede? Especialmente si podría ahorrarle dinero en el proceso..
Si tiene alguna pregunta, hágamelo saber en los comentarios e intentaré responderlos. Gracias!
Accentsconagua