Una introducción sobre el almacenamiento estratégico en caché de contenido dinámico en el perímetro: Cómo funciona y por qué es mejor que las CDN tradicionales.
Cuando se trata de rendimiento, la mayoría de las CDN hacen bien algunas cosas, entregan archivos estáticos rápidamente, proporcionan sobrecarga de red para los tiempos pico de tráfico y protegen contra ataques DDoS a nivel de red. Históricamente, eso significó un aumento tangible en el rendimiento y la seguridad de activos como imágenes, videos y otros contenidos estáticos. A medida que las tecnologías web han evolucionado, los beneficios antes mencionados son esencialmente solo las apuestas de mesa que se establecieron cuando las CDN se convirtieron en parte de las soluciones de entrega web convencionales.
El problema es que la arquitectura CDN fue desarrollada hace años. La arquitectura del sitio web ha cambiado a pasos agigantados, pero la mayoría de las CDN no se han adaptado al panorama cambiante.
Si está leyendo esto, tiene un sitio que probablemente está arquitectado con cierta cantidad de contenido dinámico renderizado en el lado del servidor. Si estás usando una CDN heredada, probablemente estés acostumbrado a ver algo como esto en tus cabeceras de respuesta cuando sacas las herramientas de desarrollador de tu navegador.
cdn-cache: pase
Sustituye el valor de este par dependiendo de tu proveedor: Pass, miss o dynamic-content. Todo significa lo mismo.
“Esta respuesta viene de tu origen porque era demasiado complicada”.
¿Y qué significa eso para el rendimiento de tu sitio? Significa que sacrificarás velocidad porque tu contenido dinámico casi siempre viene de tu origen simple y simple. Sus páginas de categorías y productos, artículos y solicitudes de API se envían directamente a su origen casi el 100% de las veces. La mayoría de las CDN sufren de la misma plaga. Si tienes suerte, puedes introducir entre el 10 y el 11 por ciento de las respuestas dinámicas de tu servidor en tu caché de borde. Rápidamente descubrirás que no tienes suficiente control para ajustar tus reglas de almacenamiento en caché para crear un sitio web que se carga al instante y se siente como una aplicación nativa.
Bienvenido a Edgio
En Edgio contamos con la segunda CDN más grande del planeta con más de 300 COP dispersos a nivel mundial y 250 TBS de capacidad. Somos seguros, actuantes y en todas partes del mundo. Pero como dijimos antes, esas son solo las cosas en juego. En Edgio, estamos abordando el problema de CDN desde una perspectiva diferente. En lugar de estar atados a reglas de veinte años de antigüedad, hemos construido una CDN flexible y receptiva para los próximos veinte años y más allá. Hemos desarrollado la primera CDN configurable de código del mundo que brinda a sus desarrolladores y miembros del equipo de DevOps la flexibilidad y el control detallado que necesitarán para entregar sitios web en menos de un segundo.
No es magia, es el futuro de las CDN y está disponible ahora
En este punto, probablemente estás pensando que esto suena como magia, bueno, podría sentirse así, pero no lo es, es el futuro de la entrega de aplicaciones web. En lugar de separar sus equipos de DevOps e Ingeniería, los reunimos al permitirle incorporar su lógica de CDN en sus entornos locales, de preparación y de producción.
Fácilmente caché lo que quieras, por cuánto tiempo quieras
Cada configuración de Edgio comienza con un repositorio de código que usted posee y controla. Cada despliegue es único y atómico, lo que significa que puede volver a cualquier versión en menos de un minuto. Usted es libre de implementar la configuración junto con su proyecto o mantenerla en un flujo de trabajo separado. La mayoría de nuestros clientes terminan incorporando sus reglas de CDN en su canalización CI/CD y su flujo de desarrollo normal. El resultado es una mayor velocidad del desarrollador sin sacrificar el rendimiento y el control. Administra tu CDN como lo haces con tu base de código.
Estoy acostumbrado a publicar mis cambios de configuración en un portal o a realizar solicitudes de API. ¿En qué es diferente Edgio?
No se preocupe, tenemos puntos finales API y una interfaz de usuario tradicional disponible cuando lo desee, pero para maximizar al máximo la tasa de aciertos de la caché, el rendimiento del sitio y la velocidad de los desarrolladores, querrá comenzar a usar EdgeJS. Vamos a sumergirnos.
Cuando se inicializa un proyecto, comenzará con un archivo de configuración simple que incluye un conjunto de reglas recomendado. Su configuración está escrita en JavaScript, el lenguaje de desarrollo más popular del planeta, y se implementa en segundos con nuestra CLI. Un archivo define sus servidores de origen.
module.exports = {
backends: {
origin: {
domainOrIp: "example.com",
hostHeader: "example.com",
},
},
Agrega tus puntos finales API, depósitos de medios o cualquier otro origen que necesites. Fácilmente y con unas pocas líneas de código.
¿Qué hay de esa flexibilidad de almacenamiento en caché?
Gran pregunta, aquí es donde comienza la diversión. Añadimos otro archivo para que puedas configurar tus rutas y escribir algunas reglas de almacenamiento en caché. Cree reglas para su contenido y establezca sus reglas de almacenamiento en caché de edge, navegador y service worker como considere conveniente.
Comencemos con esos activos estáticos que las CDN manejan tan bien.
.match(
'/:path*/:file.:ext(js|css|png|svg|jpg|woff)',
({ cache, proxy }) => {
cache({
edge: {
maxAgeSeconds: 60 * 60 * 24,
staleWhileRevalidateSeconds: 60 * 60
},
browser: {
maxAgeSeconds: 60 * 60 * 24,
},
})
proxy('origin')
}
)
Con una regla hemos establecido algo como esto para cualquier solicitud:
“Si vemos una solicitud con una extensión de archivo coincidente, almacénala en caché en Edgio y el navegador del cliente durante veinticuatro horas”.
Si estás intentando esto en casa, puedes hacer clic en tu sitio localmente y ver cómo almacenamos en caché y entregamos imágenes, tus imágenes, fuentes, CSS y JS. Activa una ventana de incógnito para que estés seguro de que la caché de tu navegador está vacía y visualiza tus golpes de caché localmente. Sí localmente. No hay necesidad de desplegar esto para verlo funcionar. Usted sabe exactamente cómo su código interactuará con nuestra CDN.
¿Qué hay de ese contenido dinámico que mencionaste?
Oh, no te preocupes que no olvidamos. Estamos a solo 10 minutos y estamos haciendo coincidir esos CDN heredados. Ahora vamos a encender las posquemadoras y dejarlas en el polvo. Supongamos que quieres agregar una ruta para algún contenido dinámico.
router.match('/products/:productId', ({ cache, proxy }) => {
cache({
edge: {
maxAgeSeconds: 60 * 60 * 24
staleWhileRevalidateSeconds: 60 * 60
}
})
proxy('origin')
})
Y traducido esto significa lo siguiente:
“Cache todas las páginas de productos por un día.
Cuando esa caché haya caducado, sirve la antigua durante una hora mientras buscamos una nueva versión”
Ahora has visto la flexibilidad y entiendes lo básico. Con suerte, se está imaginando qué tipo de impacto puede tener la implementación de su CDN en Edgio en la velocidad y el rendimiento de su sitio. Puede definir fácilmente sus propias rutas y asignarles reglas de almacenamiento en caché. Pero, ¿qué más puedes hacer con la plataforma de aplicaciones de Edgio y EdgeJS?
- Reenviar solicitudes a un camino diferente en su origen,
- Alterar las solicitudes
- Alterar las respuestas
- Manipular las cookies
- Servir archivos estáticos
- Ruta a funciones sin servidor
- Vuelva a la renderización del lado del servidor
- Redirecciones
- Bloqueo de tráfico
- Purga selectiva con claves de caché personalizadas
- O transforma completamente la respuesta de tu origen.
Depende de ti decidir cómo aprovecharás la tecnología de próxima generación de Edgio y los ejemplos anteriores son solo la punta del iceberg. De hecho, en Edgio estamos en constante búsqueda del rendimiento, por lo que decidimos ir un paso más allá, más allá del límite y en el navegador de su visitante con nuestra solución única de prefetching de activos y HTML.
Para saber cómo puede eliminar virtualmente los tiempos de respuesta de la red y transformar completamente su sitio web dándole la sensación de una aplicación nativa, asegúrese de revisar nuestro artículo de seguimiento: Reducir las tasas de rebote y mejorar la experiencia del sitio con Prefetching predictivo de Edgio.
