Home Blogs Reduzca las tasas de rebote y mejore la experiencia del sitio con Prefetching predictivo de Edgio
Applications

Reduzca las tasas de rebote y mejore la experiencia del sitio con Prefetching predictivo de Edgio

About The Author

Outline

Transiciones instantáneas: Cómo extender la caché Edge al navegador con Prefetching predictivo

Es de conocimiento común que los retrasos en la 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, es probable que hayan visto este escenario desarrollarse. Esperemos que también hayas visto lo inverso. Has visto un aumento de la conversión cuando los tiempos de navegación y carga de la página mejoran.

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 ROI positivo. Los visitantes pasarán más tiempo, harán más compras y regresarán con más frecuencia. Tiene sentido, ¿no? Si estás leyendo esto, probablemente ya sabes que es verdad. Pero, ¿qué sigue? ¿Podemos ir un paso más allá y eliminar por completo 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é el 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 aplicación web similar a las aplicaciones nativas para los visitantes de nuestro sitio?”

Con Edgio, puedes.

Empecemos 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 sin duda aprecian las mejoras de rendimiento obtenidas al descargar e instalar aplicaciones en sus dispositivos. Es simple, carga la aplicación, navega por las pantallas y las transiciones son instantáneas. Ficha de una cosa a la siguiente, añadir un artículo a su carrito y disfrutar 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 los usuarios de tu 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 desde su origen al borde. Un gran primer paso, pero no te lleva hasta 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 hasta el navegador antes de hacer clic, la prebúsqueda de Edgio es una integración de navegador que lleva el borde directamente al dispositivo. Algo de lo que los CDN tradicionales no son capaces.

“Bueno, eso suena como magia, ¿cómo funciona?”

Gran pregunta y entendemos totalmente su escepticismo. Para entender cómo funciona, necesitamos comenzar con lo básico. Mira este explicador rápido a continuación, luego echemos un vistazo a lo que es la preobtención en su núcleo.

Lo que es prefetching … ¿de verdad?

Veamos MDN para una definición de prefetching como su navegador lo entiende. La preobtención de enlaces es una indicación para el agente de usuario de que debe descargar un activo que podría ser necesario más adelante cuando los recursos se liberen. En primer lugar, su página carga y comienza a procesar solicitudes asíncronas. Cuando la red y la CPU se liberen, el navegador tomará los recursos adicionales que haya agregado al documento. Para la preobtención 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é localmente que aparecerá instantáneamente. Claro, es posible que sea necesario descargar CSS, JS y otros activos adicionales, pero hemos traído las piezas más críticas del viaje al 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 página de destino 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 cada imagen y página en la cabecera de todas nuestras páginas, ¿verdad?”

Nope, y no tienes que hacerlo. Usando los plugins Predictive Prefetching y Deep fetching de Edgio , puede omitir la ingeniería y las conjeturas mientras el navegador de su usuario trabaja con nuestra red perimetral para obtener recursos críticos.

Bueno, ¿cómo hacemos eso?

La Prefetching Predictiva de Edgio utiliza algo llamado trabajador de servicio. Un SW es algo que todos los navegadores modernos entienden, en realidad ha sido soportado desde Chrome 40. El SW es un proceso en segundo plano vinculado a su sitio que funciona mientras que las solicitudes primarias están inactivas. Es posible que haya estado expuesto a los trabajadores de servicio si alguna vez ha trabajado en el desarrollo front-end o en 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.

Registrar e instalar 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 has añadido un service-worker y se está registrando en tu 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é de service-worker se almacena durante dos minutos. Para maximizar el rendimiento podemos ajustar eso en nuestro archivo 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 el Edge para mantener la frescura de la respuesta de nuestra API al validarla durante veinticuatro horas y le hemos indicado al navegador que no solo lo prebusque, sino que se aferre a él durante una hora.

Si estás familiarizado con Edgio sabes que puedes probar esto localmente. Abre las herramientas de desarrollador de tu navegador y mira la pestaña de red mientras visitas el sitio. Verás al service-worker agarrando el HTML crudo para los enlaces en tu archivo de rutas mientras navegas. Observe el icono distintivo del engranaje y el “service-worker” anotado 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 la vista de tu usuario para que ellos hagan clic en ella. Si hacen clic, se llevarán instantáneamente a la página siguiente.

Un gran comienzo, pero ¿qué pasa si tienes un sitio lleno de contenido con imágenes de productos o artículos que también deben obtenerse? Entonces es hora de Edgio’s uno-de-un-tipo Deep Fetch plugin.

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 las páginas de sus productos estén plantillas. Su LCP puede parecer algo así, donde cada página tiene una imagen diferente, pero 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 de mage principal y prebusque el src como una imagen. En el ejemplo, hemos establecido maxMatches en 1. Lo que significa que solo vamos a pre-buscar la primera partida. Sin embargo, no hay necesidad de detenerse allí. Ajuste maxMatches como considere conveniente dependiendo del tipo de activo que esté obteniendo previamente.

Ahora su service-worker prebuscará enlaces en el viewport, escaneará a través del HTML para ese selector y agregará un enlace de prebúsqueda para la imagen en cuestión. Cuando el usuario hace 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á las solicitudes de prebúsqueda 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 transmitiremos al origen como lo haríamos para cualquier otra solicitud y cumpliremos las reglas de proxy que tenga en su lugar. Tenga la seguridad de que su origen es seguro con Edgio. El tráfico natural a través del sitio calentará la caché y las respuestas de 412 disminuirán. Para mantener su sitio web ágil, asegúrese de usar obsoleto mientras revalidado para que podamos entregar un artículo obsoleto mientras buscamos uno nuevo.

¿Quieres ver todo esto en acción sin tener que investigar las herramientas de desarrollo de Chrome? Edgio puede ayudar allí también. Hemos visto lo valioso que es la Prefetching predictiva para nuestros clientes, por lo que tenemos un panel diseñado específicamente dentro de la consola Edgio. Monitoree fácilmente su rendimiento de preobtención tanto para su solicitud de preobtención como para la proporción de aciertos.

Esperemos que ahora veas cómo la Prefetching Predictiva de Edgio puede ofrecer a tus usuarios una experiencia digital verdaderamente increíble, aumentar las conversiones y disminuir las tasas de rebote al llevar la caché de borde hasta tu usuario.