Home Artículos técnicos Maximizar el rendimiento de CDN para su aplicación con EdgeJS by Edgio
Applications

Maximizar el rendimiento de CDN para su aplicación con EdgeJS by Edgio

About The Author

Outline

Una introducción sobre el almacenamiento en caché estratégico de contenido dinámico en el borde: Cómo funciona y por qué es mejor que las CDN tradicionales.

Cuando se trata de rendimiento, la mayoría de las CDN hacen algunas cosas bien, entregan archivos estáticos rápidamente, proporcionan sobrecarga de red para los tiempos de tráfico pico 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 otro contenido estático. A medida que las tecnologías web han evolucionado, los beneficios mencionados anteriormente son esencialmente solo los desafíos 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 se desarrolló 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é diseñado con cierta cantidad de contenido dinámico renderizado del lado del servidor. Si estás usando una CDN heredada, probablemente estés acostumbrado a ver algo como esto en tus encabezados de respuesta cuando extraes 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 su sitio? Significa que sacrificarás la velocidad porque tu contenido dinámico casi siempre proviene de tu origen simple y sencillo. Sus páginas de categoría y productos, artículos y solicitudes de API se envían directamente a su origen casi el 100% del tiempo. La mayoría de las CDN sufren de la misma plaga. Si tienes suerte, puedes introducir alrededor del 10 al 11 por ciento de las respuestas dinámicas de tu servidor en tu caché de borde. Rápidamente descubrirá que no tiene un control lo suficientemente granular como para ajustar sus reglas de almacenamiento en caché para crear un sitio web que se cargue al instante y se sienta 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 Pops dispersos a nivel mundial y 250 TBS de capacidad. Estamos seguros, con rendimiento y en todas partes del mundo. Pero como dijimos antes, eso es solo lo que está en juego. En Edgio, estamos abordando el problema de las CDN desde una perspectiva diferente. En lugar de estar atados a reglas de veinte años, 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 ofrece a sus desarrolladores y miembros del equipo de DevOps la flexibilidad y el control granular 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 de esa manera, 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 estamos reuniendo al permitirle incorporar su lógica de CDN en sus entornos locales, de puesta en escena y de producción.

Almacenar en caché fácilmente 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 de CI/CD y su flujo de desarrollo normal. El resultado es una mayor velocidad del desarrollador sin sacrificar el rendimiento y el control. Gestiona tu CDN como tú haces tu base de código.

Estoy acostumbrado a publicar mis cambios de configuración en un portal o haciendo solicitudes de API. ¿Cómo es Edgio diferente?

No se preocupe, tenemos endpoints API y una interfaz de usuario tradicional disponible cuando lo desee, pero para maximizar por completo su tasa de aciertos de caché, el rendimiento del sitio y la velocidad del desarrollador, 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 nuestro CLI. Un archivo define sus servidores de origen.

				
					module.exports = {
backends: {
  origin: {
    domainOrIp: "example.com",
    hostHeader: "example.com",
  },
},
				
			

Agregue sus puntos finales de API, depósitos de medios o cualquier otro origen que necesite. Fácilmente y con unas pocas líneas de código.

¿Qué hay de esa flexibilidad de 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 borde, navegador y trabajador de servicio como lo 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, guárdela en caché en Edgio y el navegador del cliente durante veinticuatro horas”.

Si estás probando 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. Enciende una ventana de incógnito para que estés seguro de que la caché de tu navegador está vacía y ver tus visitas de caché localmente. Sí localmente. No hay necesidad de desplegar esto para verlo funcionar. Usted sabe exactamente cómo interactuará su código con nuestra CDN.

¿Qué pasa con ese contenido dinámico que mencionaste?

Oh, no te preocupes que no olvidamos. Estamos a solo 10 minutos y estamos haciendo coincidir esas CDN heredadas. Ahora vamos a encender los posquemadores y dejarlos en el polvo. Supongamos que desea 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 expirado, sirva la antigua durante una hora mientras buscamos una nueva versión”

Ahora has visto la flexibilidad y entiendes lo básico. Con suerte, te estás imaginando qué tipo de impacto puede tener la implementación de tu CDN en Edgio en la velocidad y el rendimiento de tu 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?

  • Reenvía las solicitudes a un camino diferente en tu origen,
  • Modificar las solicitudes
  • Modificar 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 la respuesta de tu origen por completo.

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 de rendimiento, por lo que decidimos ir un paso más allá, más allá del borde y en el navegador de sus visitantes con nuestra solución única de HTML y preobtención de activos.

Para averiguar 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 consultar nuestro artículo de seguimiento: Reducir las tasas de rebote y mejorar la experiencia del sitio con Prefetching predictivo de Edgio.