Resumen

Este complemento es necesario para facilitar el uso de la red de distribución de contenidos (CDN) de Triumph. Para utilizarlo, es necesario disponer de una suscripción activa a la CDN de Triumph. Puedes obtener más información sobre la CDN de Triumph en: https://www.triumph.tech/cdn.

Para maximizar el impacto de la CDN de Triumph, también recomendamos encarecidamente adquirir el complemento Triumph Web Agility. Más adelante se explica con más detalle cómo se utiliza este complemento junto con la CDN.

Implementación de una CDN

El almacenamiento en caché mediante una CDN es una herramienta increíblemente potente que ofrece enormes ventajas en cuanto a rendimiento, ahorra ancho de banda, reduce el tráfico del servidor, etc., pero solo si se hace correctamente. Si se configura de forma incorrecta, no solo se pierden las ventajas, sino que también puede acarrear un montón de problemas, ya que los datos erróneos pueden servirse a la persona equivocada en el momento equivocado. Adentrarse en el mundo de las CDN requiere un cierto grado de conocimientos técnicos y experiencia que quizá no esté al alcance de todo el mundo.

Activar una CDN para tu aplicación web es una tarea sencilla. Sin embargo, una vez activada, el trabajo no ha terminado ni mucho menos. Las CDN no tienen ningún conocimiento inherente de tu aplicación y no saben qué hay que almacenar en caché y qué no. Depende de ti ayudarla a comprender qué es lo que quieres que almacene en caché por ti. Para ello, hay dos principios básicos que debes comprender:

1. Encabezados de control de caché: mediante los encabezados de control de caché, le indicas a la CDN qué contenido deseas que almacene en caché. Rock ofrece varias formas diferentes de configurar estos encabezados. Más abajo encontrarás una sección completa sobre cómo ajustar estos encabezados para tu sitio web.
2. Especificidad de la URL: al analizar una solicitud HTTP, la CDN trata la URL completa (incluidos los parámetros de la cadena de consulta) como un elemento único que se puede almacenar en caché. Esto significa que las dos solicitudes que se muestran a continuación, aunque representan la misma página, serán tratadas por la CDN como dos recursos diferentes:

https://rock.rocksolidchurchdemo.com/group-detail?GroupId=12

https://rock.rocksolidchurchdemo.com/group-detail?GroupId=13

Esto tiene sentido en el caso anterior y es exactamente lo que se busca. El contenido del grupo con ID 12 será muy diferente al del 13. Ahora, consideremos este ejemplo de una solicitud de API:

https://api.rocksolidchurchdemo.com/api/People/GetCurrentPerson

Ten en cuenta que este punto final de la API obtiene la persona actual analizando la cookie de autenticación incluida en la solicitud. Sin embargo, la URL será la misma para todas las personas que accedan al punto final. En este caso, tendrás que indicar explícitamente a la CDN que nunca almacene en caché esta solicitud (más adelante se explica cómo hacerlo).

Una vez claros estos conceptos básicos, comencemos nuestro recorrido por la configuración de una CDN para su uso con Rock.

Configuración del complemento

Una vez instalado el plugin, tendrás que añadir los valores de configuración del CDN. Triumph Tech te los facilitará una vez que haya configurado el CDN. El bloque de configuración se encuentra en «Herramientas de administración > Plugins instalados > Triumph CDN».

Optimización de tu CDN

Ahora ya estamos listos para empezar a ajustar el CDN de Triumph para tu instancia de Rock. Las necesidades de cada organización serán diferentes, por lo que nos centraremos en todas las áreas de Rock que te permiten configurar la información de control de caché.

Comprender los encabezados de control de caché

Antes de pasar a la configuración de Rock, dediquemos un momento a analizar el encabezado de respuesta de control de caché. Como hemos mencionado anteriormente, es este encabezado el que indica al mundo exterior cómo debe almacenarse en caché el contenido de la solicitud. Los dos principales elementos que almacenarían el contenido en caché son el navegador web del cliente y una CDN (o un proxy similar).

La clave estándar del encabezado de respuesta para el almacenamiento en caché es «Cache-Control». El valor de este encabezado puede adoptar varias opciones.

1. Público: esto indica que cualquiera puede almacenar el contenido en caché.
2. Privado: indica que el contenido es específico del usuario y que solo el navegador puede almacenarlo en caché.
3. No-Cache: a pesar de lo que indica el nombre, el contenido con esta etiqueta se puede almacenar en caché, pero la solicitud debe confirmarse con el servidor de origen (Rock) para garantizar que no se haya actualizado (normalmente mediante un ETag).
4. No-Store: esta es la forma definitiva de indicar «no almacenes esto en caché».

Las opciones «Pública» y «Privada» cuentan con una configuración adicional para indicar a la CDN durante cuánto tiempo debe almacenar el contenido en caché. Esto se denomina «Max-Age» y se expresa en segundos.

Ten en cuenta que la opción «Pública» tiene, en realidad, dos ajustes diferentes de «Max-Age». Estos son:

1. Max-Age: el plazo de caducidad de las cachés locales (normalmente de los navegadores).
2. «Max-Age» público: el plazo de caducidad para el almacenamiento en caché basado en la red, como las CDN y los servidores proxy.

Contenido estático

El contenido estático se sirve directamente desde tu servidor web Rock. Rock, como aplicación, no interviene en modo alguno en el servicio de este contenido. Para indicar la ruta a la CDN, tendrás que añadir encabezados HTTP a los encabezados de respuesta de las solicitudes que provengan de tu sitio web. Esto es fácil de hacer utilizando el complemento Triumph Web Agility. Basta con crear una «regla de encabezado de respuesta» similar a la que se muestra a continuación.

Tipos de archivo

Ahora que ya tenemos configuradas las imágenes estáticas, veamos cómo podemos hacer lo mismo con las imágenes que se gestionan dentro de Rock. Como sabéis, las imágenes y los documentos almacenados en Rock se configuran como «tipos de archivo». Estos tipos os permiten determinar dónde se almacenarán los archivos y el nivel de seguridad necesario para visualizarlos. Los tipos de archivo también pueden establecer los encabezados de caché para la CDN.

La configuración del almacenamiento en caché para los tipos de archivo se encuentra en «Admin Herramientas > Configuración general > Tipos de archivo». Selecciona el tipo de archivo que desees configurar y ajusta los parámetros del encabezado de control de caché.

Puntos de conexión de la API

También puedes almacenar en caché los resultados de los puntos finales de la API de Rock. Los parámetros de control de caché se activan a nivel de acción REST. Puedes configurarlo en «Herramientas de administración > Seguridad > Controladores REST». Selecciona el controlador y, a continuación, la acción que desees configurar. La ventana modal te permitirá seleccionar el parámetro de control de caché.

Página de Rock

También puedes optar por almacenar en caché una página completa de Rock. Sin embargo, esto debe hacerse con mucho cuidado; si la página contiene algún contenido personalizado, este se almacenará en caché y se enviará a todas las solicitudes tras la carga inicial. No obstante, esta funcionalidad puede resultar muy útil.

Pueden darse situaciones en las que una página de tu sitio web experimente un aumento repentino del tráfico. Por ejemplo, una página que ofrezca información sobre cierres por mal tiempo o sobre el estado de los campos en un día lluvioso. Crear una página sin ningún contenido personalizado y configurarla para que la CDN la almacene en caché puede proteger tu servidor Rock de verse desbordado por las solicitudes. Ten en cuenta que, en estos casos, aún puedes actualizar el contenido de la página. Basta con establecer una duración de caché muy corta, como de 1 a 2 minutos. Una duración de caché corta, incluso de solo un minuto, reducirá drásticamente el número de solicitudes que llegan a tu servidor durante un pico de tráfico.

Puedes configurar los ajustes de control de caché de una página accediendo al cuadro de diálogo «Propiedades de la página» de dicha página y haciendo clic en la pestaña «Configuración avanzada».

Confirmación de la configuración de tu CDN

Una vez que lo tengas todo listo, querrás comprobar que la CDN está almacenando en caché tal y como esperabas. Comprobar el resultado puede resultar un poco complicado y requiere conocimientos sobre las herramientas de desarrollo del navegador. Empecemos con nuestra prueba. (Las instrucciones que aparecen a continuación son específicas para Chrome en un ordenador.)

1. En primer lugar, abre en tu navegador la página o el recurso que quieras comprobar.
2. Activa las herramientas de desarrollador de tu navegador haciendo clic con el botón derecho del ratón en la página y seleccionando «Inspeccionar».
3. Abre la pestaña «Red» de las herramientas de desarrollo. Al principio estará en blanco.
4. Actualiza la página o el recurso en tu navegador. La información se cargará en la pestaña «Red».
5. Busca el recurso concreto en la lista de archivos y fíjate en la sección «Encabezados de respuesta». Allí verás el encabezado «Cache-Control» y su valor. Comprueba que este valor sea el que esperabas.
6. A continuación, querrás comprobar si el contenido se ha servido desde la caché de la CDN o si se ha cargado desde tu servidor Rock. Esto se muestra en el encabezado «X-Cache». Un valor «HIT» significa que el contenido procedía de la CDN, mientras que un valor «MISS» o «TCP_MISS» significa que procedía de tu servidor Rock.

Aquí es donde las cosas pueden volverse un poco confusas. A menudo verás un «MISS» cuando lo que querrías o esperarías ver es un «HIT». La primera vez que se solicita el contenido, la CDN tendrá que obtenerlo del servidor Rock. Esto se contabilizará como un «MISS». Sin embargo, tras recargar la página, es posible que sigas viendo «MISS», lo cual resulta muy confuso. Esto se debe a que tu navegador ha almacenado el archivo en la caché y esa caché incluye los encabezados HTTP originales. Para asegurarte de que ves la información correcta, haz clic con el botón derecho del ratón sobre el archivo en la pestaña «Red» y selecciona «Borrar la caché del navegador»; a continuación, vuelve a cargar la página.

Una solución alternativa al problema de invalidación consiste en probar la solicitud en otro navegador, como Edge, Firefox o Safari.

Optimización de imágenes

La solución de Triumph va más allá de una CDN convencional para ofrecer una optimización de imágenes de primer nivel, que incluye las siguientes características:

• Cambiar el tamaño y recortar imágenes: esta opción te permite personalizar el tamaño de las imágenes originales de tu sitio web. Puedes optar por convertir algunas imágenes en cuadradas como miniaturas para determinadas páginas y mostrar la imagen completa en otras.
• Compresión: el CDN de Triumph puede comprimir automáticamente tus imágenes utilizando algoritmos basados en las mejores prácticas.
• Selección automática del formato: el CDN de Triumph seleccionará automáticamente el mejor formato de imagen para cada solicitud, teniendo en cuenta el navegador y la plataforma de la solicitud. Algunas personas pueden recibir un archivo JPG y otras un archivo WebP, dependiendo de cuál sea el más adecuado para su solicitud concreta.
• Modificación de imágenes: además de la optimización, la CDN de Triumph también puede aplicar cientos de modificaciones a tus imágenes. Algunos ejemplos de estas modificaciones son el desenfoque, el monocromo, los duotonos, la reducción de ruido, las máscaras, la rotación, la detección de rostros y muchas, muchas más.

La función de optimización de imágenes de Triumph se basa en el popular servicio webimgix. No se necesita ninguna configuración adicional ni conocimientos sobre imgix. Para aplicar la optimización a una imagen de tu página web, solo tienes que utilizar un nuevo filtro Lava, tal y como se muestra a continuación.

<img src="{{ '/content/sample.jpg' | TriumphImgCdn:'auto=compress&auto=format' }}">

Puedes encontrar más información sobre las funciones de imgix visitando supágina de documentación (https://docs.imgix.com/apis/rendering) o probando suentorno de pruebas de imágenes (https://sandbox.imgix.com/create).