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 estadísticas sobre cómo los usuarios se desplazan 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 descargando los recursos de esas páginas con anticipación.
En esta guía, se explica cómo lograrlo con <link rel=prefetch>
, una sugerencia de recursos que te permite implementar la precarga de forma fácil y eficiente.
Mejora la navegación con rel=prefetch
Si agregas <link rel=prefetch>
a una página web, le indicas 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">
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 la precarga de recursos cuando tengas 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 documentos HTML cuando las páginas posteriores sean predecibles, de modo que, cuando se haga clic en un vínculo, la página se cargue de inmediato.
Por ejemplo, en una página de ficha de producto, puedes recuperar previamente la página del producto más popular de la lista. En algunos casos, es aún más fácil anticipar la siguiente navegación. En una página de carrito de compras, la probabilidad de que un usuario visite la página de confirmación de la compra suele ser alta, lo que la convierte en una buena opción para la carga previa.
Si bien la búsqueda anticipada de 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 más bajo, ya que la solicitud del documento genera un acierto de caché. Debido a que el TTFB será más bajo, las métricas posteriores basadas en el tiempo también suelen ser más bajas, incluidas Largest Contentful Paint (LCP) y First Contentful Paint (FCP).
Carga previa de recursos estáticos
Precarga recursos estáticos, como secuencias de comandos o hojas de estilo, cuando se puedan predecir las secciones posteriores que podría visitar el usuario. Esto resulta particularmente útil cuando esos elementos se comparten en muchas páginas.
Por ejemplo, Netflix aprovecha el tiempo que los usuarios pasan en las páginas sin haber accedido a sus cuentas para realizar la carga previa de 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 las navegaciones futuras.
El efecto de la carga previa de recursos estáticos en las métricas de rendimiento depende del recurso que se carga de forma previa:
- La precarga 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 los diseños de página bloquean la renderización, pueden reducir el LCP cuando se precargan. En los casos en que el elemento LCP de la página posterior 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 precargada. - La recuperación anticipada de JavaScript permitirá que el procesamiento de la secuencia de comandos recuperada anticipadamente se realice mucho antes que si la red tuviera que recuperarla 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 marcado se renderiza en el cliente a través de JavaScript, se puede mejorar el LCP reduciendo los retrasos en la carga de recursos, y la renderización del marcado del cliente que contiene el elemento LCP de una página puede ocurrir antes.
- La precarga de fuentes web que la página actual aún no usa puede eliminar los cambios de diseño. En los casos en que se usa
font-display: swap;
, se elimina el período de intercambio de la fuente, lo que genera 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.
Carga previa 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 que contiene un selector de emojis, puedes dividirlo en tres fragmentos de JavaScript: 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. Herramientas como webpack te permiten indicarle al navegador que realice la carga previa de estos fragmentos a pedido.
Cómo implementar rel=prefetch
La forma más sencilla de implementar prefetch
es agregar una etiqueta <link>
a la <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 precarga a través del encabezado HTTP Link
:
Link: </css/style.css>; rel=prefetch
Un beneficio 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.
Cómo realizar la precarga de módulos de JavaScript con comentarios mágicos de webpack
webpack te permite cargar secuencias de comandos previamente para rutas o funciones que razonablemente visitarán o usarán ciertos usuarios.
En el siguiente fragmento de código, se carga de forma diferida una funcionalidad de ordenamiento de la biblioteca lodash para ordenar un grupo de números que se enviará 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 a que se produzca el evento "enviar" para cargar esta funcionalidad, puedes recuperar este recurso de antemano para aumentar las probabilidades de que esté disponible en la caché cuando el usuario envíe el formulario. webpack permite hacerlo con 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 inserte 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. Por lo tanto, los recursos cargados previamente no competirán por el ancho de banda de los recursos que necesita la página actual.
Carga previa inteligente con Quicklink y Guess.js
También puedes implementar una carga previa más inteligente con bibliotecas que usan prefetch
de forma interna:
- quicklink usa la API de Intersection Observer para detectar cuándo los vínculos ingresan al viewport y precarga los recursos vinculados durante el tiempo inactivo. Bonificación: El vínculo rápido pesa menos de 1 KB.
- Guess.js usa informes de estadísticas para compilar un modelo predictivo que se usa para cargar previamente de manera inteligente solo lo que el usuario podría necesitar.
Tanto quicklink como Guess.js usan la API de Network Information para evitar la carga previa si un usuario está en una red lenta o tiene activada Save-Data
.
Funcionamiento interno de la carga previa
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 termina de cargarse una carga previa y el usuario navega al recurso de carga previa destinado, el navegador recoge la carga en tránsito como navegación (otros proveedores de navegador pueden implementar esto de manera diferente).
La carga previa se realiza con la prioridad "Más baja", por lo que los recursos cargados previamente no compiten por el ancho de banda con los recursos necesarios en la página actual.
Los archivos almacenados previamente se almacenan en la caché 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 conservan durante cinco minutos, después de los cuales se aplican las reglas normales de Cache-Control
para el recurso.
Conclusión
El uso de prefetch
puede mejorar en gran medida los tiempos de carga de las navegaciones futuras y hasta hacer que las páginas parezcan cargarse al instante. prefetch
es ampliamente compatible con los navegadores modernos, lo que la convierte en 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. Solo hazlo cuando sea necesario y, de preferencia, solo en redes rápidas.