Obtén más información sobre la sugerencia de recursos rel=prefetch y cómo usarla.
Según estudios, 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 probablemente visiten a continuación, puedes mejorar los tiempos de carga de las navegaciones futuras si descargas 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 carga previa de forma fácil y eficiente.
Mejora la navegación con rel=prefetch
Si agregas <link rel=prefetch> a una página web, se le indicará 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 se debe aplicar con cuidado; solo realiza una carga previa de los recursos cuando estás seguro de que los usuarios los necesitarán. Te recomendamos no realizar la carga previa cuando los usuarios tengan conexiones lentas. Puedes detectar esto con la API de Network Information.
Existen diferentes maneras de determinar qué vínculos se deben cargar previamente. La más simple es hacer una carga previa del primer o de los primeros vínculos de la página actual. También hay bibliotecas que utilizan enfoques más sofisticados, que se explican más adelante en esta publicación.
casos de uso
Carga previa de páginas posteriores
Los documentos HTML precargados cuando las páginas siguientes son predecibles, de modo que cuando se hace clic en un vínculo, la página se carga al instante.
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 pago suele ser alta, lo que la convierte en un buen candidato para la carga previa.
Si bien la carga previa 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 menor, ya que la solicitud de documento genera un acierto de caché. Como el TTFB será más bajo, las métricas posteriores basadas en el tiempo también suelen ser más bajas, lo que incluye Largest Contentful Paint (LCP) y First Contentful Paint (FCP).
Carga previa de recursos estáticos
Se puede predecir la carga previa de recursos estáticos, como secuencias de comandos u hojas de estilo, cuando el usuario puede visitar secciones posteriores. Esto es especialmente útil cuando esos recursos se comparten en muchas páginas.
Por ejemplo, Netflix aprovecha el tiempo que los usuarios pasan en páginas sin acceder a su cuenta para realizar una carga previa de React, que se usará una vez que los usuarios accedan. Gracias a esto, redujeron el tiempo de carga en un 30% para navegaciones futuras.
El efecto de la carga previa de elementos 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 LCP.
- La carga previa de hojas de estilo puede mejorar tanto el FCP como el LCP, ya que se eliminará el tiempo de red para descargar la hoja de estilo. Dado que las hojas de estilo bloquean la renderización, pueden reducir el LCP cuando se realiza la 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 cargará previamente como un recurso dependiente de la hoja de estilo precargada. - La carga previa de JavaScript permitirá que el procesamiento de la secuencia de comandos solicitada previamente tenga lugar mucho antes que si fuera necesario que la red la recuperara primero durante la navegación. Esto puede tener un efecto en las métricas de capacidad de respuesta, como el retraso de primera entrada (FID) y la interacción hasta la siguiente pintura (INP). En los casos en los que el lenguaje de marcado se renderiza en el cliente a través de JavaScript, se puede mejorar el LCP mediante la reducción de demoras en la carga de recursos. Además, la renderización del cliente que contiene el elemento LCP de una página puede ocurrir antes.
- La precarga de fuentes web que aún no se utilizan en la página actual 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 acelera la renderización del texto y elimina los cambios de diseño. Si en una página futura se usa la fuente cargada 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 en paquetes de JavaScript te permite cargar inicialmente solo partes de una app y cargar de forma diferida el resto. Si usas esta técnica, puedes aplicar una carga previa a las rutas o los componentes que no son inmediatamente necesarios, pero que es probable que 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 dividirla en tres bloques de JavaScript: página principal, diálogo y selector. La página principal y el diálogo se podían cargar inicialmente, mientras que el selector se podía cargar a pedido. Las herramientas como webpack te permiten indicar al navegador que cargue previamente estos fragmentos a pedido.
Cómo implementar rel=prefetch
La forma más simple 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 a determinar si el recurso ya está en la caché. Algunos ejemplos de valores para este atributo son 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
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 recurso, lo que puede ofrecer pequeñas mejoras en algunos casos.
Carga previa de módulos de JavaScript con comentarios mágicos de webpack
webpack te permite realizar una carga previa de secuencias de comandos para rutas o funcionalidades que seguramente los usuarios visitarán o usarán pronto.
En el siguiente fragmento de código, se carga de forma diferida una funcionalidad de ordenación de la biblioteca de 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 a que se produzca el evento "submit" 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 eso mediante 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 matizados, pero, en términos generales, podrías 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 otorgar un beneficio al INP de una página.
La carga previa en general también tiene en cuenta la priorización de recursos general. Cuando un recurso se carga previamente, 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 vínculo rápido 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 llegan vínculos al viewport y realiza una carga previa de los recursos vinculados durante el tiempo de inactividad. Contenido adicional: El vínculo rápido pesa menos de 1 KB.
- Guess.js usa informes de estadísticas para crear un modelo predictivo que se usa con el objetivo de cargar previamente de forma inteligente solo lo que probablemente necesite el usuario.
Tanto Quicklink como Guess.js usan la API de Network Information para evitar la carga previa si un usuario usa una red lenta o tiene activado Save-Data.
Carga previa en funcionamiento
Las sugerencias de recursos no son instrucciones obligatorias y depende del navegador decidir si se ejecutan y cuándo se ejecutan.
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á idle. 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 curso como la navegación (otros proveedores de navegadores 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 requeridos en la página actual.
Los archivos precargados se almacenan en la caché HTTP o en la memoria caché (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, después de lo cual se aplican las reglas Cache-Control normales para el recurso.
Conclusión
El uso de prefetch puede mejorar en gran medida los tiempos de carga de las navegaciones futuras e incluso hacer que las páginas parezcan cargarse de forma instantánea. 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 lo uses; hazlo solo cuando sea necesario y, idealmente, solo en redes rápidas.