Transiciones instantáneas: Cómo extender la caché Edge al navegador con Prefetching predictivo
Es de conocimiento común que los retrasos de navegación disminuyen la conversión y aumentan las tasas de rebote. Para aquellos de ustedes que administran y rastrean la conversión en sitios con mucho tráfico, probablemente hayan visto este escenario desarrollarse. Con suerte, también has visto lo contrario. Has visto aumentar la conversión cuando mejoran los tiempos de navegación y carga de la página.
Rendimiento y conversión van de la mano.
Las empresas de CDN a menudo utilizan esta ilustración como ejemplo para probar el ROI de sus servicios. La solución es simple. Obtenga contenido estático lo más cerca posible de sus usuarios para acelerar la entrega y la inversión es positiva en el ROI. Los visitantes se quedarán más tiempo, harán más compras y regresarán con más frecuencia. Tiene sentido, ¿no? Si estás leyendo esto, entonces probablemente ya sabes que es verdad. Pero, ¿qué sigue? ¿Podemos ir un paso más allá y eliminar completamente los tiempos de respuesta de la red de la experiencia web y hacerla similar a una aplicación nativa? Si podemos reducir el retraso a cero, ¿no maximizaríamos la conversión? Si podemos almacenar en caché contenido de borde en el navegador antes de que el usuario haga clic, las transiciones podrían ser instantáneas, similares a una aplicación nativa.
“¿Podemos realmente tener un rendimiento de aplicaciones web similar al de las aplicaciones nativas para los visitantes de nuestro sitio?”
Con Edgio, puedes.
Comencemos por echar un vistazo a lo que hace que las aplicaciones móviles nativas sean excelentes. La mayoría de los usuarios de aplicaciones móviles no saben lo que está sucediendo detrás de escena, pero ciertamente aprecian las mejoras de rendimiento obtenidas al descargar e instalar aplicaciones en sus dispositivos. Es simple, cargar la aplicación, navegar a través de las pantallas y las transiciones son instantáneas. Pestaña De una cosa a la siguiente, añade un artículo a tu carrito y disfruta de una experiencia sin fricciones. Rara vez el usuario ve un indicador de “carga” y, cuando lo hace, tiene sentido; como enviar información de pago durante el pago. Todo es posible con un desarrollo inteligente y una plataforma capaz.
Ingrese Prefetching predictivo por Edgio. Ahora tus usuarios web pueden disfrutar del mismo tipo de experiencia.
Muchas compañías de CDN ofrecen opciones de calentamiento de caché que llaman «prefetching» para ayudar a llevar el contenido de su origen al borde. Un gran primer paso, pero no te lleva todo el camino allí. El usuario todavía tiene que esperar mientras el contenido se mueve a su dispositivo. Entonces, ¿cómo lo llevamos un paso más allá? Desde el origen hasta el borde y todo el camino en el navegador antes de hacer clic, la prefetching de Edgio es una integración del navegador que lleva el borde directamente al dispositivo. Algo que las CDN tradicionales no son capaces de hacer.
“Bueno, eso suena como magia, ¿cómo funciona?”
Gran pregunta y entendemos totalmente su escepticismo. Para entender cómo funciona, tenemos que comenzar con lo básico. Mira este explicador rápido a continuación, luego echemos un vistazo a lo que la prefetching es en su núcleo.
¿Qué es prefetching… en realidad?
Echemos un vistazo a MDN para una definición de prefetching como su navegador lo entiende. Link prefetching es una pista para el agente de usuario de que debe descargar un activo que podría ser necesario más tarde cuando los recursos se liberan. Primero, tu página carga y comienza a procesar solicitudes asíncronas. Cuando la red y la CPU se liberen, el navegador agarrará los recursos adicionales que hayas agregado al documento. Para la obtención previa básica, como el navegador lo entiende, puede verse un poco como esto:
<head>
…
<link rel="prefetch" href="/next-page.html" />
<link rel="prefetch" href="/next-image.jpg" />
…
</head>
El resultado neto es que next-page.html y next-image.jpg serán descargados y almacenados en caché por el navegador mientras el usuario está interactuando con la página original. Si hacen clic, tendrán el esqueleto de la siguiente página y una imagen adicional ya almacenada en caché local que aparecerá instantáneamente. Claro, CSS, JS y otros activos adicionales podrían necesitar ser descargados, pero hemos traído las piezas más críticas del viaje en el navegador antes de que sea necesario. Ese es un gran comienzo y, como se puede ver en el ejemplo, funciona muy bien para un caso de uso pequeño. Sitios de viaje secuencial, tal vez una landing page o dos, pero lo que probablemente estés pensando es esto…
“Mi sitio tiene miles de imágenes y páginas, de ninguna manera puedo hacer esto.
No podemos vincular todas las imágenes y páginas en la cabeza de todas nuestras páginas, ¿verdad?”
No, y no tienes que hacerlo. Usando los plugins Prefetching Predictivo y Deep fetching de Edgio, puede evitar la ingeniería y las conjeturas mientras el navegador de su usuario trabaja con nuestra red perimetral para extraer recursos críticos.
Bueno, ¿cómo hacemos eso?
El Prefetching Predictivo de Edgio utiliza algo llamado un service worker. Un SW es algo que todos los navegadores modernos entienden, en realidad ha sido compatible desde Chrome 40. El SW es un proceso de fondo vinculado a su sitio que funciona mientras las solicitudes primarias están inactivas. Es posible que haya estado expuesto a los trabajadores de servicio si alguna vez ha trabajado en desarrollo front-end o aplicaciones web progresivas más modernas. Si no estás usando un service worker en tu sitio ahora, puedes agregar uno fácilmente sin ningún impacto en tu experiencia de usuario actual. Edgio puede ayudarle a configurar fácilmente uno con uno de nuestros trabajadores de servicio preconstruidos.
El registro e instalación de un service-worker puede variar dependiendo de si está utilizando o no un framework front-end. Asegúrese de revisar nuestra documentación para encontrar instrucciones más detalladas para múltiples métodos.
Ahora que ha agregado un service-worker y se está registrando en su sitio, necesita algo que hacer. Después de agregar el paquete Edgio Prefetch, es hora de agregar nuestras rutas para poner el navegador del usuario a trabajar. De forma predeterminada, la caché service-worker se almacena durante dos minutos. Para maximizar el rendimiento podemos ajustar eso en nuestro archivo de rutas:
import {Router} from '@edgio/core';
export default new Router()
.get('/api/products/:id.json', ({cache, proxy}) => {
cache({
edge: {
maxAgeSeconds: 60 * 60,
staleWhileRevalidateSeconds: 60 * 60 * 24,
},
browser: {
serviceWorkerSeconds: 60 * 60,
},
});
});
Con una simple regla, hemos configurado The Edge para mantener la frescura de la respuesta de nuestra API validándola durante veinticuatro horas y hemos indicado al navegador que no solo la recupere previamente, sino que se aferre a ella durante una hora.
Si estás familiarizado con Edgio sabes que puedes probar esto localmente. Abra las herramientas de desarrollador de su navegador y vea la pestaña de red mientras examina el sitio. Verás al service-worker capturando el HTML sin procesar para los enlaces en tu archivo de rutas mientras navegas. Observe el icono distintivo del engranaje y “service-worker” señalado como el iniciador.
También puede ver la caché de service-worker por separado revisando la pestaña de aplicación y mirando a través de la caché.
El script de prefetch de Edgio funciona para extraer enlaces en el viewport de su usuario para que haga clic en él. Si hacen clic, serán llevados instantáneamente a la página siguiente.
Un gran comienzo, pero ¿qué pasa si tienes un sitio con mucho contenido con imágenes de productos o artículos que también necesitan ser obtenidas? Entonces es el momento para el plugin único de Edgio Deep Fetch.
Habilitar el plugin Deep Fetch es fácil. Simplemente importa el plugin a tu proyecto existente y elige algunos selectores HTML que el plugin debería buscar. Si está ejecutando un sitio de comercio electrónico, es probable que sus páginas de productos estén plantilladas. Su LCP puede verse algo así – donde cada página tiene una imagen diferente, pero usted utiliza el selector CSS de “imagen principal” para mantener el estilo en todo su sitio.
<img src=”/images/product-image.jpg” class=”main-image” />
Intente agregar el selector de “imagen principal” a la matriz Deep Fetch y deje que el service-worker vaya a trabajar.
import {Prefetcher} from '@edgio/prefetch/sw';
import DeepFetchPlugin from '@edgio/prefetch/sw/DeepFetchPlugin';
new Prefetcher({
plugins: [
new DeepFetchPlugin([
{
selector: 'img.main-image',
maxMatches: 1,
attribute: 'src',
as: 'image',
},
]),
],
});
En resumen, esto le dice al plugin Deep Fetch que busque el selector main-mage y obtenga previamente el src como una imagen. En el ejemplo, hemos establecido maxMatches en 1. Lo que significa que solo vamos a prerecuperar el primer partido. Sin embargo, no hay necesidad de parar allí. Ajusta maxMatches como veas conveniente dependiendo del tipo de activo que estés prefetching.
Ahora tu service-worker obtendrá previamente enlaces en la vista, escaneará el HTML para ese selector y agregará un enlace de prefetch para la imagen en cuestión. Cuando su usuario haga clic en la imagen, la página se presentará al instante.
“¿Qué hay de nuestro origen? No podemos soportar un aumento en el tráfico para cada usuario”.
Edgio te tiene cubierto. Nuestro WebCDN de próxima generación no pasará solicitudes de prefetch a su origen si el activo no se almacena en caché. Edgio simplemente responderá con un 412. Si el usuario hace clic en el enlace no almacenado en caché, lo pasaremos al origen como lo haríamos para cualquier otra solicitud y respetaremos las reglas de proxy que tenga en su lugar. Tenga la seguridad de que su origen está seguro con Edgio. El tráfico natural a través del sitio calentará el caché y las respuestas de 412 disminuirán. Para mantener tu sitio rápido, asegúrate de usar Rancio-Mientras-revalidate para que podamos entregar un artículo viejo mientras buscamos uno nuevo.
¿Quieres ver todo esto en acción sin tener que profundizar en las herramientas para desarrolladores de Chrome? Edgio puede ayudar allí también. Hemos visto lo valioso que es Prefetching predictivo para nuestros clientes, por lo que tenemos un panel de control diseñado específicamente dentro de la consola de Edgio. Supervise fácilmente su rendimiento de prefetching tanto para su solicitud de prefetch como para su ratio de aciertos.
Con suerte, ahora verás cómo la Prefetching predictiva de Edgio puede ofrecer a tus usuarios una experiencia digital realmente increíble, aumentar las conversiones y disminuir las tasas de rebote al llevar la caché de borde hasta tu usuario.
