Krypton Solid

Control de la caché: uso de Edge Side Incluye en barniz

Control de la caché: uso de Edge Side Incluye en barniz

Creo firmemente que la mejor manera de optimizar los sitios móviles de carga rápida es optimizar para todos. No sabemos cuando alguien está en un dispositivo que no es móvil, pero está conectado a su teléfono, o simplemente tiene una conexión Wi-Fi terrible.

En un artículo anterior para Smashing Magazine, expliqué cómo puede acelerar sus sitios web al ofrecer páginas dinámicas desde un proxy inverso como Varnish. Si es nuevo en Varnish, entonces ese artículo es el lugar para comenzar, ya que me sumergiré directamente en los detalles de configuración aquí.

Otras lecturas en SmashingMag:

En este artículo, explicaré cómo puede beneficiarse del uso de Varnish incluso cuando hay partes de sus páginas que no se pueden almacenar en caché durante períodos prolongados, utilizando Edge Side Included.

El problema con el almacenamiento en caché

La mayor parte de la mayoría de las páginas web es contenido que no cambia con mucha frecuencia. Generalmente, cuando publica algún contenido, permanece bastante estático, e incluso si se actualiza, es posible que tomar unos minutos antes de que aparezca la nueva versión no sea un problema. Si es vital que la caché se invalide en la publicación, puede usar la invalidación de caché para borrar esa página de la caché. Sin embargo, es posible que haya contenido que no desee almacenar en caché, como contenido personalizado. También puede haber contenido que le gustaría almacenar en caché pero por períodos de tiempo más cortos, tal vez un widget de noticias que se actualiza con mucha frecuencia. Cuando las páginas contienen este tipo de contenido, podría pensar que no se pueden almacenar en caché. Sin embargo, es aquí donde Edge Side Incluye (ESI) puede salvar el día y el rendimiento de su sitio.

¿Qué incluye Edge Side?

ESI es una especificación de lenguaje para ensamblar fragmentos de páginas web dentro de otras páginas web. La especificación fue enviada al W3C en 2001, pero sigue siendo una “Nota del W3C” disponible para discusión y no respaldada por el W3C ni actualizada por un Grupo de Trabajo.

ESI funciona de manera similar a otros métodos de inclusión de fragmentos en sus páginas, como Server Side Include (SSI) o PHP include sentencias, pero ha sido diseñado para proxies inversos como Varnish que se ubican frente a un servidor web y contenido de caché. .

¿Cómo funciona ESI con el barniz?

Varnish ha implementado un subconjunto de características ESI, tres de las siete declaraciones disponibles. Las declaraciones admitidas se enumeran en el Documentación de barniz. Esto significa que podemos usar ESI en nuestras páginas y decirle a Varnish que almacene en caché una inclusión por un tiempo más corto que el documento principal, o incluso que no almacene en caché la inclusión en absoluto. Si ya está en funcionamiento con Varnish, es realmente sencillo comenzar con ESI y marcar una gran diferencia en su tasa de aciertos: la cantidad de páginas servidas desde la caché.

Un ejemplo

Si quieres seguir adelante y no tienes una instalación de Varnish para jugar, puedes descargar mi paquete Vagrant de GitHub que instalará un servidor LAMP básico y Varnish. Eche un vistazo a README en GitHub para ver cómo configurarlo para su entorno.

Tengo un diseño que utiliza una plantilla Bootstrap de código abierto, que es un diseño de blog estándar. En la barra lateral tengo la intención de colocar algún contenido que se actualizará con frecuencia y quiero asegurarme de que no se almacena en caché por mucho tiempo. La publicación del blog y otro contenido que quiero que se almacene en caché durante varios minutos, ya que no cambiará con frecuencia.

El diseño con el que estoy trabajando como ejemplo. (Ver versión grande)

Lo primero que debe hacer es hacer que la barra lateral incluya PHP. Guardo el incluir como inc/sidebar.php y luego agregue una inclusión de PHP a la página principal para incluirla. Mi página tiene el mismo aspecto, pero el contenido de la barra lateral ahora está separado en una inclusión.

En mi página principal y en mi inclusión, estoy generando la fecha y hora actuales. Esto solo me ayuda a ver si mi caché está funcionando. Si no estuviera haciendo almacenamiento en caché, cada vez que recargo la página esperaría que cambie el tiempo. Con Varnish en un estado predeterminado, ambos tiempos deberían ser iguales y se actualizarán solo cuando se borre la caché.

Captura de pantalla con fecha y hora
Los tiempos cambian en la recarga de la página y deberían ser los mismos. (Ver versión grande)

Incluir el archivo usando ESI

Ahora voy a usar dos etiquetas ESI que son compatibles con Varnish:

esi:include
esi:remove

La esi:include La etiqueta se utiliza para incluir el archivo a través de ESI. Así que reemplazo mi PHP include con esto:

<esi:include src="https://www.smashingmagazine.com/2015/02/using-edge-side-includes-in-varnish/inc/sidebar.php"/>

Cree un respaldo cuando los ESI no estén disponibles

Justo después del esi:include etiqueta que agregamos esi:remove etiquetas, y dentro de esas etiquetas se incluye el PHP original. Mientras probaba, también agregué la línea «¡No ESI!» para que pueda ver si PHP o ESI está agregando la inclusión.

<esi:include src="https://www.smashingmagazine.com/2015/02/using-edge-side-includes-in-varnish/inc/sidebar.php"/>
<esi:remove>
  <?php include("https://www.smashingmagazine.com/2015/02/using-edge-side-includes-in-varnish/inc/sidebar.php"); ?>
  <p>Not ESI!</p> 
</esi:remove>

Si ahora carga la página en un servidor que ejecuta Varnish que no tiene ESI configurado, debería ver el mensaje «¡No ESI!» texto. ESI no se está ejecutando, por lo que se cargará la inclusión de PHP original.

La esi:remove Las etiquetas le permiten crear un respaldo para situaciones en las que las inclusiones de borde lateral no están disponibles. Esto puede deberse a que Varnish no ha sido configurado para usarlos en esa página, o está sirviendo el sitio directamente a través de Apache, como podría ser el caso en desarrollo.

Donde los ESI están disponibles todo el <esi:remove></esi:remove> El bloque se elimina de la página cuando se analizan las inclusiones. El uso de la esi:remove declaración no detiene la ejecución del código PHP. Se seguirá ejecutando cada vez que se cargue la página si ESI no está disponible, y de acuerdo con la política de almacenamiento en caché si lo está.

Una opción alternativa al uso esi:remove es utilizar la tercera declaración respaldada por Varnish, <!–esi … –>. Usaría esto si no quiere que suceda nada cuando ESI no esté disponible.

<!--esi <esi:include src="https://www.smashingmagazine.com/2015/02/using-edge-side-includes-in-varnish/inc/sidebar.php"/>  -->

En el caso anterior, si ESI no estuviera disponible, la barra lateral no se cargaría, el navegador trata la declaración como un comentario HTML, por lo que nada sería visible para un visitante del sitio. Si ESI los procesa, los comentarios se eliminarán y se analizará la inclusión.

Configurar barniz para usar ESI

Le decimos a Varnish que use ESI en nuestro VCL, dentro de un vcl_backend_response subrutina.

sub vcl_backend_response { 
  set beresp.do_esi = true;  
}

Nota: en Varnish 3 lo pondrías dentro sub vcl_fetch. Vea las otras diferencias entre Varnish 3 y 4 en estos notas de actualización.

Si reinicia Varnish y vuelve a cargar su página, debería encontrar que el mensaje «¡No es ESI!» el texto se ha ido, y si ve el código fuente, no hay rastro de las inclusiones, pero se incluye la barra lateral. Sin embargo, nuestros tiempos deberían seguir siendo los mismos, ya que todavía estamos almacenando en caché ambas partes de la página de la misma manera.

Ajustar el TTL

Quiero que mi barra lateral solo se almacene en caché durante 30 segundos antes de que se actualice, y mi contenido principal 120 segundos. Dentro de vcl_backend_response subrutina agregue lo siguiente:

if (bereq.url ~ "sidebar.php") { 
  set beresp.ttl = 30s; } else { 
  set beresp.ttl = 120s; 
}

Aquí estoy diciendo que si la URL coincide con la cadena sidebar.php caché solo durante 30 segundos, de lo contrario, caché durante 120 segundos.

Guarde el VCL y reinicie Varnish, luego vuelva a cargar su página; ambos tiempos deberían ser iguales. Espere 30 segundos y vuelva a cargar la página; la hora de la barra lateral debería actualizarse, pero la hora principal sigue siendo la misma. Ahora está almacenando en caché estos componentes de la página de manera diferente y ensamblando la página con ESI.

Captura de pantalla después de agregar ESI
El diseño después de agregar ESI, los componentes de la página se almacenan en caché de manera diferente. (Ver versión grande)

El valor pasado a bereq.url es una expresión regular. Algo que le gustaría hacer es colocar archivos que no se pueden almacenar en caché o que tienen un TTL común en una carpeta y luego apuntar a esa carpeta.

if (bereq.url ~ "^/inc") { 
  set beresp.ttl = 30s; } else { 
  set beresp.ttl = 120s; 
}

Hay algunos ejemplos más de expresiones simples en la hoja de referencia de expresiones regulares Fastly.

Configurar parte del contenido para que nunca se almacene en caché

Si hay una inclusión que nunca desea que se almacene en caché (por ejemplo, si contiene algún contenido personalizado), puede marcar de forma selectiva cosas como no almacenables en caché y entregarlas directamente desde el servidor web.

Tengo una carpeta llamada personalized y quiero que cualquier inclusión dentro de esa carpeta sea servida directamente desde el servidor web, sin pasar por el caché. Puedo hacer esto usando un similar if declaración a la que usé para configurar el TTL, nuevamente en vcl_backend_response.

if (bereq.url ~ "^/personalized") {
  set beresp.uncacheable = true; 
  return(deliver); 
}

La línea return(deliver); significa que el contenido omite el caché por completo y siempre se entregará actualizado, mientras que el resto de la página se entregará desde el caché. Puede probar esto creando una inclusión, nuevamente con una hora, y colocándola en el personalized carpeta.

<esi:include src="https://www.smashingmagazine.com/2015/02/using-edge-side-includes-in-varnish/personalized/panel.php"/>  
<esi:remove>  
  <?php include("https://www.smashingmagazine.com/2015/02/using-edge-side-includes-in-varnish/personalized/panel.php"); ?>
</esi:remove>

Este contenido siempre debe mostrar una hora actualizada, ya que se sirve desde la caché.

La VCL completa se puede encontrar en GitHub. Puede probar diferentes combinaciones de ESI para cumplir con sus propios requisitos de almacenamiento en caché.

Otras lecturas

Edge Side Included puede ser una forma poderosa de modificar el rendimiento de Varnish. Sin embargo, es probable que la forma en que los use sea muy específico de su propio sitio. Con suerte, este artículo ha destacado algunas de las posibilidades. Para terminar, aquí hay algunos enlaces que miré mientras escribía este tutorial y algunos que detallan la implementación de varios CMS. Compruebe cuidadosamente a qué versión de Varnish se refiere el artículo: hay mucha información sobre Varnish 3 o incluso Varnish 2 y la sintaxis ha cambiado significativamente. Sin embargo, la conversión de una a otra suele ser sencilla.

Deja un comentario