Precarga recursos para acelerar la navegación en el futuro

Obtén información sobre la sugerencia de recursos rel=prefetch y cómo usarla.

Las investigaciones demuestran que los tiempos de carga más rápidos generan porcentajes de conversiones más altos y mejores experiencias del usuario. Si tienes información sobre cómo los usuarios navegan por tu sitio web y qué páginas es probable que visiten a continuación, puedes mejorar los tiempos de carga de las navegaciones futuras si descargas con anticipación los recursos para esas páginas.

En esta guía, se explica cómo lograrlo con <link rel=prefetch>, una sugerencia de recursos que te permite implementar la carga previa de manera fácil y eficiente.

Mejora la navegación con rel=prefetch

Si agregas <link rel=prefetch> a una página web, se le indica al navegador que descargue páginas completas o algunos de los recursos (como secuencias de comandos o archivos CSS) que el usuario podría necesitar en el futuro:

<link rel="prefetch" href="/articles/" as="document">

Diagrama que muestra cómo funciona la carga previa de vínculos.

La sugerencia prefetch consume bytes adicionales para los recursos que no se necesitan de inmediato, por lo que esta técnica debe aplicarse con cuidado. solo realiza una carga previa de los recursos cuando tienes la certeza de que los usuarios los necesitarán. Considera no realizar una carga previa cuando los usuarios tengan conexiones lentas. Puedes detectarlo con la API de Network Information.

Existen diferentes maneras de determinar qué vínculos realizar una carga previa. La más sencilla es cargar previamente el primer vínculo o los primeros vínculos de la página actual. También hay bibliotecas que usan enfoques más sofisticados, que se explican más adelante en esta publicación.

Casos de uso

Cargar de manera previa las páginas siguientes

Precarga los documentos HTML cuando las páginas siguientes sean predecibles, de modo que cuando se haga clic en un vínculo, la página se cargue de forma instantánea.

Por ejemplo, en una página de ficha de producto, puedes cargar previamente la página del producto más popular de la lista. En algunos casos, la siguiente navegación es aún más fácil de anticipar: en una página del carrito de compras, la probabilidad de que un usuario visite la página de confirmación de compras suele ser alta, lo que la convierte en una buena opción para la carga previa.

Si bien la carga previa de los recursos usa ancho de banda adicional, puede mejorar la mayoría de las métricas de rendimiento. El tiempo hasta el primer byte (TTFB) suele ser mucho menor, ya que la solicitud del documento genera un acierto de caché. Debido a que el TTFB será menor, las métricas posteriores basadas en el tiempo también suelen ser menores, incluidas el Procesamiento de imagen con contenido más grande (LCP) y el Primer procesamiento de imagen con contenido (FCP).

Carga previa de recursos estáticos

Realiza una carga previa de los recursos estáticos, como hojas de estilo o secuencias de comandos, cuando se puedan predecir las secciones posteriores que podría visitar el usuario. Esto resulta particularmente útil cuando esos elementos se comparten en varias páginas.

Por ejemplo, Netflix aprovecha el tiempo que los usuarios pasan en las páginas sin acceder a sus cuentas para precargar React, que se usará una vez que los usuarios accedan a sus cuentas. Gracias a esto, redujeron el tiempo de carga en un 30% para futuras navegaciones.

El efecto de la carga previa de recursos estáticos en las métricas de rendimiento depende del recurso que se carga previamente:

  • La carga previa de imágenes puede reducir significativamente los tiempos de LCP para los elementos de imagen de LCP.
  • La carga previa de las hojas de estilo puede mejorar el FCP y el LCP, ya que se eliminará el tiempo de descarga de la hoja de estilo en la red. Dado que las hojas de estilo bloquean la representación, pueden reducir el LCP cuando se realiza una carga previa. En los casos en que el elemento LCP de la página siguiente sea una imagen de fondo CSS solicitada a través de la propiedad background-image, la imagen también se precargará como un recurso dependiente de la hoja de estilo solicitada previamente.
  • La carga previa de JavaScript permitirá que el procesamiento de la secuencia de comandos precargada se produzca mucho antes que si la red necesitara que la recuperara primero durante la navegación. Esto puede afectar la Interacción con la siguiente pintura (INP) de una página. En los casos en que el lenguaje de marcado se renderiza en el cliente a través de JavaScript, se puede mejorar el LCP a través de demoras en la carga de recursos reducidas, y el procesamiento del cliente del lenguaje de marcado que contiene el elemento LCP de una página puede ocurrir antes.
  • La carga previa de fuentes web que la página actual aún no usa puede eliminar los cambios de diseño. Cuando se usa font-display: swap;, se elimina el período de intercambio de la fuente, lo que da como resultado una renderización más rápida del texto y elimina los cambios de diseño. Si una página futura usa la fuente solicitada previamente y el elemento LCP de la página es un bloque de texto que usa una fuente web, el LCP de ese elemento también será más rápido.

Precarga de fragmentos de JavaScript a pedido

La división de código de tus paquetes de JavaScript te permite cargar inicialmente solo partes de una app y realizar una carga diferida del resto. Si usas esta técnica, puedes aplicar la carga previa a las rutas o los componentes que no son inmediatamente necesarios, pero que probablemente se soliciten pronto.

Por ejemplo, si tienes una página que contiene un botón que abre un cuadro de diálogo con un selector de emojis, puedes dividirlo en tres bloques de JavaScript: página principal, diálogo y selector. Inicialmente, podrían cargarse la página principal y el diálogo, mientras que el selector se podría cargar a pedido. Las herramientas como webpack te permiten indicarle al navegador que cargue previamente estos fragmentos a pedido.

Cómo implementar rel=prefetch

La forma más sencilla de implementar prefetch es agregar una etiqueta <link> al <head> del documento:

<head>
  ...
  <link rel="prefetch" href="/articles/" as="document">
  ...
</head>

El atributo as ayuda al navegador a establecer los encabezados correctos y determinar si el recurso ya está en la caché. Entre los valores de ejemplo para este atributo, se incluyen los siguientes: document, script, style, font, image y otros.

También puedes iniciar la carga previa a través del encabezado HTTP Link:

Link: </css/style.css>; rel=prefetch

Uno de los beneficios de especificar una sugerencia de carga previa en el encabezado HTTP es que el navegador no necesita analizar el documento para encontrar la sugerencia de recursos, lo que puede ofrecer pequeñas mejoras en algunos casos.

Cargar previamente los módulos de JavaScript con los comentarios mágicos del webpack

webpack te permite cargar secuencias de comandos previamente para rutas o funcionalidades que razonablemente visitarán o usarán ciertos usuarios.

El siguiente fragmento de código carga de forma diferida una funcionalidad de ordenamiento de la biblioteca lodash para ordenar un grupo de números que se enviarán mediante un formulario:

form.addEventListener("submit", e => {
  e.preventDefault()
  import('lodash.sortby')
    .then(module => module.default)
    .then(sortInput())
    .catch(err => { alert(err) });
});

En lugar de esperar el mensaje "enviar" para cargar esta funcionalidad, puedes cargar previamente este recurso para aumentar las posibilidades de que esté disponible en la caché cuando el usuario envíe el formulario. webpack permite hacerlo usando los comentarios mágicos dentro de import():

form.addEventListener("submit", e => {
   e.preventDefault()
   import(/* webpackPrefetch: true */ 'lodash.sortby')
         .then(module => module.default)
         .then(sortInput())
         .catch(err => { alert(err) });
});

Esto le indica a webpack que debe insertar la etiqueta <link rel="prefetch"> en el documento HTML:

<link rel="prefetch" as="script" href="1.bundle.js">

Los beneficios de rendimiento de la carga previa de fragmentos a pedido son un poco sutiles, pero, en términos generales, puedes esperar ver respuestas más rápidas a las interacciones que dependen de esos fragmentos a pedido, ya que estarán disponibles de inmediato. Según la naturaleza de la interacción, esto podría traer un beneficio al INP de la página.

En general, la carga previa también tiene en cuenta la priorización de recursos general. Cuando se realiza la carga previa de un recurso, se hace con la prioridad más baja posible. De este modo, los recursos cargados previamente no competirán por el ancho de banda para los recursos que necesita la página actual.

También puedes implementar una carga previa más inteligente con bibliotecas que usan prefetch de forma interna:

Tanto Quicklink como Guess.js usan la API de Network Information para evitar la carga previa si un usuario utiliza una red lenta o tiene Save-Data activado.

Carga previa interna

Las sugerencias de recursos no son instrucciones obligatorias y depende del navegador decidir si se ejecutan y cuándo.

Puedes usar la carga previa varias veces en la misma página. El navegador pone en cola todas las sugerencias y solicita cada recurso cuando está inactivo. En Chrome, si no terminó de cargarse una carga previa y el usuario navega al recurso de carga previa destinado, el navegador recoge la carga en tránsito como la navegación (otros proveedores de navegador pueden implementar esto de manera diferente).

La carga previa se realiza en el "Más bajo" prioritaria, de manera que los recursos cargados previamente no compiten por el ancho de banda con los recursos requeridos en la página actual.

Los archivos precargados se almacenan en la caché de HTTP o en la caché de memoria (según si el recurso se puede almacenar en caché o no) durante un período que varía según el navegador. Por ejemplo, en Chrome, los recursos se mantienen durante cinco minutos. Luego, se aplican las reglas Cache-Control normales del recurso.

Conclusión

El uso de prefetch puede mejorar en gran medida los tiempos de carga de futuras navegaciones e incluso hacer que las páginas parezcan cargarse instantáneamente. prefetch es ampliamente compatible con los navegadores modernos, por lo que es una técnica atractiva para mejorar la experiencia de navegación de muchos usuarios. Esta técnica requiere cargar bytes adicionales que podrían no usarse, así que ten cuidado cuando la uses. hacerlo solo cuando sea necesario y, idealmente, solo en redes rápidas.