Cómo ayudar al navegador con las sugerencias de recursos

En el último módulo sobre la optimización de la carga de recursos, aprendiste cómo varios recursos de la página, como CSS y JavaScript, pueden afectar la velocidad de carga de la página y cómo puedes optimizarlos y optimizar su entrega para acelerar la renderización de una página. Este es el momento perfecto para abordar un aspecto más avanzado de la carga de recursos, que consiste en ayudar al navegador a cargarlos más rápido con sugerencias de recursos.

Las optimizaciones de recursos pueden ayudar a los desarrolladores a optimizar aún más el tiempo de carga de la página, ya que le indican al navegador cómo cargar y priorizar los recursos. Se introdujo un conjunto inicial de sugerencias de recursos, como preconnect y dns-prefetch. Sin embargo, con el tiempo, preload y la API de Fetch Priority se han agregado para proporcionar capacidades adicionales.

Las optimizaciones de recursos indican al navegador que realice ciertas acciones con anticipación que podrían mejorar el rendimiento de la carga. Las sugerencias de recursos pueden realizar acciones como búsquedas de DNS anticipadas, conexiones a servidores con anticipación e incluso recuperación de recursos antes de que el navegador los descubra normalmente.

Las sugerencias de recursos se pueden especificar en HTML, por lo general, al principio del elemento <head>, o establecer como un encabezado HTTP. Para el alcance de este módulo, se abordan preconnect, dns-prefetch y preload, así como los comportamientos de recuperación especulativa que proporciona prefetch.

preconnect

La sugerencia preconnect se usa para establecer una conexión con otro origen desde el que recuperas recursos críticos. Por ejemplo, es posible que alojes tus imágenes o recursos en una CDN o en otro origen cruzado:

<link rel="preconnect" href="https://example.com">

Con preconnect, anticipas que el navegador planea conectarse a un servidor de origen cruzado específico en un futuro muy cercano y que el navegador debería abrir esa conexión lo antes posible, idealmente antes de esperar a que el analizador de HTML o el escáner de carga previa lo hagan.

Si tienes una gran cantidad de recursos de origen cruzado en una página, usa preconnect para aquellos que sean más importantes para la página actual.

Captura de pantalla de los tiempos de conexión de un recurso en el panel de red de Herramientas para desarrolladores de Chrome. La configuración de la conexión incluye el tiempo de detención, la negociación del proxy, la búsqueda de DNS, la configuración de la conexión y la negociación de TLS.
Una visualización de los tiempos de conexión tal como se ven en el panel de red de las Herramientas para desarrolladores de Chrome. Los tiempos dentro del cuadro rojo son los que se relacionan con la configuración de una conexión con un servidor de origen cruzado, que preconnect puede aliviar estableciendo conexiones antes, en lugar de en el momento del descubrimiento del recurso de origen cruzado.

Un caso de uso común para preconnect son las fuentes de Google. Google Fonts recomienda que preconnect al dominio https://fonts.googleapis.com que publica las declaraciones @font-face y al dominio https://fonts.gstatic.com que publica los archivos de fuentes.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

El atributo crossorigin se usa para indicar si un recurso se debe recuperar con uso compartido de recursos entre dominios (CORS). Cuando uses la sugerencia preconnect, si el recurso que se descarga del origen usa CORS (como los archivos de fuentes), deberás agregar el atributo crossorigin a la sugerencia preconnect.

dns-prefetch

Si bien abrir conexiones a servidores de origen cruzado de forma anticipada puede mejorar significativamente el tiempo de carga inicial de la página, es posible que no sea razonable ni posible establecer conexiones a muchos servidores de origen cruzado a la vez. Si te preocupa que puedas estar usando demasiado preconnect, una sugerencia de recurso mucho menos costosa es la sugerencia dns-prefetch.

Como su nombre lo indica, dns-prefetch no establece una conexión con un servidor de origen cruzado, sino que solo realiza la búsqueda de DNS para él con anticipación. Una búsqueda de DNS se produce cuando un nombre de dominio se resuelve en su dirección IP subyacente. Si bien las capas de cachés de DNS a nivel del dispositivo y de la red ayudan a que este sea un proceso generalmente rápido, aún lleva algo de tiempo.

<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">

Las búsquedas de DNS son bastante económicas y, debido a su costo relativamente bajo, pueden ser una herramienta más adecuada en algunos casos que un preconnect. En particular, puede ser una sugerencia de recursos deseable para usar en casos de vínculos que navegan a otros sitios web que crees que es probable que el usuario siga. dnstradamus es una de esas herramientas que hace esto automáticamente con JavaScript y usa la API de Intersection Observer para insertar sugerencias de dns-prefetch en el HTML de la página actual cuando los vínculos a otros sitios web se desplazan al viewport del usuario.

preload

La directiva preload se usa para iniciar una solicitud anticipada de un recurso necesario para renderizar la página:

<link rel="preload" href="/lcp-image.jpg" as="image">

Las directivas preload se deben limitar a los recursos críticos descubiertos tarde. Los casos de uso más comunes son los archivos de fuentes, los archivos CSS recuperados a través de declaraciones @import o los recursos CSS background-image que probablemente sean candidatos para el procesamiento de imagen con contenido más grande (LCP). En estos casos, el verificador de carga previa no descubriría estos archivos, ya que se hace referencia al recurso en recursos externos.

De manera similar a preconnect, la directiva preload requiere el atributo crossorigin si precargas un recurso de CORS, como fuentes. Si no agregas el atributo crossorigin (o lo agregas para solicitudes que no son de CORS), el navegador descargará el recurso dos veces, lo que desperdiciará ancho de banda que podría haberse utilizado mejor en otros recursos.

<link rel="preload" href="/font.woff2" as="font" crossorigin>

En el fragmento de HTML anterior, se le indica al navegador que precargue /font.woff2 con una solicitud de CORS, incluso si /font.woff2 se encuentra en el mismo dominio.

prefetch

La directiva prefetch se usa para iniciar una solicitud de baja prioridad para un recurso que probablemente se use en navegaciones futuras:

<link rel="prefetch" href="/next-page.css" as="style">

Esta directiva sigue en gran medida el mismo formato que la directiva preload, solo que el atributo rel del elemento <link> usa un valor de "prefetch". Sin embargo, a diferencia de la directiva preload, prefetch es en gran medida especulativa, ya que inicias una recuperación de un recurso para una navegación futura que puede ocurrir o no.

Hay ocasiones en las que prefetch puede ser beneficioso. Por ejemplo, si identificaste un flujo de usuarios en tu sitio web que la mayoría de los usuarios siguen hasta completarlo, un prefetch para un recurso crítico para la renderización de esas páginas futuras puede ayudar a reducir los tiempos de carga.

API de Fetch Priority

Puedes usar Fetch Priority API a través de su atributo fetchpriority para aumentar la prioridad de un recurso. Puedes usar el atributo con los elementos <link>, <img> y <script>.

<div class="gallery">
  <div class="poster">
    <img src="img/poster-1.jpg" fetchpriority="high">
  </div>
  <div class="thumbnails">
    <img src="img/thumbnail-2.jpg" fetchpriority="low">
    <img src="img/thumbnail-3.jpg" fetchpriority="low">
    <img src="img/thumbnail-4.jpg" fetchpriority="low">
  </div>
</div>

De forma predeterminada, las imágenes se recuperan con una prioridad más baja. Después del diseño, si se determina que la imagen se encuentra dentro de la ventana gráfica inicial, la prioridad aumenta a Alta. En el fragmento de HTML anterior, fetchpriority le indica de inmediato al navegador que descargue la imagen del LCP más grande con una prioridad alta, mientras que las imágenes de miniaturas menos importantes se descargan con una prioridad más baja.

Los navegadores modernos cargan los recursos en dos fases. La primera fase se reserva para los recursos críticos y finaliza una vez que se descargan y ejecutan todas las secuencias de comandos que provocan bloqueos. Durante esta fase, es posible que se retrase la descarga de los recursos de prioridad baja. Si usas fetchpriority="high", puedes aumentar la prioridad de un recurso, lo que permite que el navegador lo descargue durante la primera fase.

Demos de sugerencias de recursos

Ponga a prueba sus conocimientos

¿Qué hace la sugerencia de recurso preconnect?

Solo realiza una búsqueda de DNS para el servidor de origen cruzado.
Abre una conexión a un servidor de origen cruzado, incluida la búsqueda de DNS, así como la conexión y la negociación de TLS antes de que el navegador la descubra.

¿Qué te permite hacer la API de Fetch Priority?

Especifica la prioridad relativa de los elementos <link>, <img> y <script>.
Especifica la prioridad con la que se descarga el código HTML de la página actual.

¿Cuándo deberías usar la sugerencia prefetch?

Cuando tengas alta confianza en que el usuario necesita los recursos o las páginas que deseas realizar una recuperación previa.
Si el usuario no indicó una preferencia explícita por reducir el uso de datos
Para todos los recursos o páginas que el usuario podría necesitar, independientemente de si los necesita en el futuro.

A continuación: Rendimiento de la imagen

A estas alturas, probablemente te sientas bastante seguro de tus conocimientos sobre las consideraciones generales de rendimiento cuando se trata del HTML de la página, el elemento <head> y las sugerencias de recursos. Sin embargo, existen optimizaciones adicionales que son específicas para los diferentes tipos de recursos que suelen cargar las páginas. A continuación, en el próximo módulo, se abordará el rendimiento de las imágenes, lo que puede ayudarte a que las imágenes de tu sitio web se carguen lo más rápido posible, independientemente del dispositivo del usuario.