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.

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
?
¿Qué te permite hacer la API de Fetch Priority?
<link>
, <img>
y <script>
.
¿Cuándo deberías usar la sugerencia prefetch
?
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.