En el último módulo sobre cómo optimizar la carga de recursos, aprendiste cómo diversas recursos de la página, como CSS y JavaScript, pueden afectar la velocidad de carga de la página puedes optimizarlas y su publicación para acelerar la renderización de una página. Este es el momento perfecto para pasar a un aspecto más avanzado de los recursos cargando, y eso implica ayudar al navegador a cargarlos más rápido usando sugerencias de recursos.
Las sugerencias de recursos pueden ayudar a los desarrolladores a optimizar aún más el tiempo de carga de las páginas, ya que informan
al navegador cómo cargar y priorizar recursos. Un conjunto inicial de recursos
Las sugerencias, como preconnect y dns-prefetch, fueron las primeras que se ingresaron.
Sin embargo, con el tiempo, preload y la API de Fetch Priority
proporcionan capacidades adicionales.
Las sugerencias de recursos le indican al navegador que realice ciertas acciones con anticipación. que podrían mejorar el rendimiento de carga. Las sugerencias de recursos pueden realizar acciones como como realizar búsquedas tempranas de DNS, conectarse a servidores con anticipación e incluso recuperar recursos antes de que el navegador los descubra normalmente.
Las sugerencias de recursos se pueden especificar en HTML, por lo general al principio de <head>
o configurado como un encabezado HTTP. En el alcance de este módulo,
preconnect, dns-prefetch y preload, así como el
comportamientos de recuperación especulativos que prefetch proporciona.
preconnect
La sugerencia preconnect se usa para establecer una conexión con otro origen desde
en las que se recuperan recursos críticos. Por ejemplo, si alojas tu
imágenes o recursos en una CDN o en otro origen cruzado:
<link rel="preconnect" href="https://example.com">
Si usas preconnect, prevés que el navegador planea conectarse a un
servidor de origen cruzado específico en un futuro muy cercano, y que el
debería abrir esa conexión lo antes posible, idealmente antes de esperar
para hacerlo.
Si tienes una gran cantidad de recursos de origen cruzado en una página, usa preconnect.
para los recursos más importantes
para la página actual.
preconnect puede
reducir estableciendo conexiones más rápido, y no en el momento de la
descubrimiento del recurso de origen cruzado.
Un caso de uso común de preconnect es Google Fonts. Google Fonts recomienda
preconnect al dominio https://fonts.googleapis.com que publica
a las declaraciones @font-face y al dominio https://fonts.gstatic.com que
entrega 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 debe
se recuperan con el uso compartido de recursos entre dominios (CORS). Cuando uses
Sugerencia preconnect, si el recurso que se descarga desde el origen usa
CORS, como los archivos de fuentes, debes agregar el atributo crossorigin al
Sugerencia de preconnect.
dns-prefetch
Si bien abrir conexiones a servidores
de origen cruzado con anticipación puede
mejorar el tiempo de carga inicial de la página, quizás no sea razonable ni posible
establecer conexiones
con muchos servidores de origen cruzado a la vez. Si te preocupa
que puedes estar usando preconnect en exceso, una sugerencia de recursos mucho menos costosa es la
Sugerencia de dns-prefetch.
Según su nombre, dns-prefetch no establece una conexión con un origen cruzado.
servidor, sino que realiza la búsqueda de DNS por adelantado. Un DNS
lookup se produce cuando un nombre de dominio se resuelve en su dirección IP subyacente.
Si bien las capas de caché DNS a nivel del dispositivo y de la red ayudan a que este sea un
es un proceso rápido, todavía demora.
<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 pequeño,
En algunos casos, pueden ser una herramienta más adecuada que preconnect. En
En particular, puede ser una sugerencia de recurso deseable para usar en casos de vínculos que
navegar a otros sitios web que crees que el usuario probablemente seguirá.
dnstradamus es una herramienta que lo hace automáticamente con JavaScript
y usa la API de Intersection Observer para insertar sugerencias dns-prefetch en la
HTML de la página actual cuando los vínculos a otros sitios web se desplazan hasta la página del usuario
viewport.
preload
La directiva preload se usa para iniciar una solicitud anticipada de un recurso.
necesaria para renderizar la página:
<link rel="preload" href="/lcp-image.jpg" as="image">
Las directivas preload deben limitarse a los recursos críticos de detección tardía.
Los casos de uso más comunes son archivos de fuentes, archivos CSS recuperados a través de @import
o recursos background-image de CSS que probablemente sean más grandes
Candidatos al procesamiento de imagen con contenido (LCP). En esos casos, estos archivos no se
detectada por el escáner de precarga cuando se hace referencia al recurso en
de Google Cloud.
Al igual que preconnect, la directiva preload requiere crossorigin.
si estás precargando un recurso de CORS, como las fuentes. Si no agregas
el atributo crossorigin (o agregarlo para solicitudes no CORS), y luego el recurso
se descarga por el navegador dos veces, lo que desperdicia ancho de banda que se podría haber
se puede invertir mejor en otros recursos.
<link rel="preload" href="/font.woff2" as="font" crossorigin>
En el fragmento HTML anterior, el navegador tiene la indicación de precargar.
/font.woff2 con una solicitud de CORS, incluso si /font.woff2 está en el mismo dominio
prefetch
La directiva prefetch se usa para iniciar una solicitud de baja prioridad para un
recurso que probablemente se utilice 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
En su lugar, el atributo rel del elemento <link> usa un valor de "prefetch".
Sin embargo, a diferencia de la directiva preload, prefetch es mayormente especulativa en
que estás iniciando la recuperación de un recurso para una navegación futura que podría
o que no suceda.
Hay ocasiones en las que prefetch puede resultar beneficioso, por ejemplo, si
identificó un flujo de usuarios en su sitio web que la mayoría de los usuarios siguen hasta el final
un prefetch para un recurso de renderización esencial para esas páginas futuras puede ayudar a
reducir los tiempos de carga para ellos.
API de Fetch Priority
Puedes usar el Fetch Priority API a través de su atributo fetchpriority para lo siguiente:
aumentar la prioridad de un recurso. Puedes usar el atributo con <link>.
Elementos <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 el
dentro de la viewport inicial, la prioridad se incrementa a
Prioridad alta. En el fragmento HTML anterior, fetchpriority inmediatamente.
le indica al navegador que descargue la imagen LCP más grande con una prioridad Alta,
mientras que las menos importantes se descargan con una prioridad más baja.
Los navegadores modernos cargan recursos en dos fases. La primera fase está reservada para
recursos críticos y finaliza una vez que se descargan todas las secuencias de comandos de bloqueo y
ejecutado. Durante esta fase, es posible que se retrasen los recursos de prioridad baja
descargas. Si usas fetchpriority="high", puedes aumentar la prioridad de un
lo que permite que el navegador lo descargue durante la primera fase.
Demostraciones de sugerencias de recursos
Ponga a prueba sus conocimientos
¿Qué hace la sugerencia del recurso preconnect?
¿Qué te permite hacer la API de Fetch Priority?
<link>:
Elementos <img> y <script>.
¿Cuándo debes usar la sugerencia prefetch?
A continuación: Rendimiento de las imágenes
A estas alturas, es probable que estés empezando a sentirte bastante seguro de tus conocimientos
de consideraciones generales de rendimiento cuando se trata de HTML de páginas, el <head>
y las sugerencias de recursos. Sin embargo, existen optimizaciones adicionales
son específicas de los diferentes tipos de recursos que las páginas suelen cargar. A continuación,
de rendimiento de las imágenes se aborda en el próximo módulo y puede ayudarte a obtener
que las imágenes de tu sitio web se carguen lo más rápido posible, independientemente del
el dispositivo del usuario.