Gracias por seguir Google I/O. Mira contenido a pedido.

Se usó la API de Cloud Translation para traducir esta página.

Cómo ayudar al navegador con las sugerencias de recursos

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.

Captura de pantalla de los tiempos de conexión para un recurso en el panel de red de las Herramientas para desarrolladores de Chrome. La configuración de la conexión incluye el tiempo de bloqueo, la negociación del proxy, la búsqueda de DNS, la configuración de la conexión y la negociación de TLS. — Visualización de los tiempos de conexión, tal como se ve en el panel de red de Chrome Herramientas para desarrolladores. Los tiempos dentro del cuadro rojo son los involucrados en la configuración de una con un servidor de origen cruzado, que `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.

Precaución: Si usas preload para descarga una imagen especificada por un elemento <img> que varía según el viewport del usuario, asegúrate de agregar el imagesrcset atributo a la sugerencia preload para descargar la imagen correcta para el viewport actual También debes excluir src. para que los navegadores que no admiten la precarga responsiva no descarguen la imagen de resguardo.

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>

Importante: Es un recurso especificado en un La directiva preload se descarga dos veces si el elemento as falta el atributo en el elemento <link> de la directiva. Para obtener una lista de los valores del atributo as, consulta el Documentación de MDN sobre los valores del atributo as

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

Precaución: La directiva preload es una una optimización del rendimiento potente que, de hecho, puede usarse en exceso. Recursos descargados con la directiva preload son efectivos se descargan con prioridad alta y, si se usan en exceso, preload puede crear de ancho de banda de un modo que afecte negativamente la velocidad de carga de la página.

`prefetch`

Importante: Esta es una explicación muy general de la Sugerencia del recurso prefetch. Por lo tanto, en esta sección no se aborda detalle detallado sobre algunas de las consideraciones y compensaciones que debe tener en cuenta cuando se usa. En un módulo posterior de este curso, se detallarán prefetching recursos necesarios en el futuro cercano con baja prioridad prefetching páginas para acelerar las navegaciones futuras.

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.

Precaución: Dada la naturaleza especulativa de prefetch, su uso conlleva la desventaja potencial de que los datos usada para recuperar el recurso podrían no usarse si el usuario no navega a la que termina necesitando el recurso cargado previamente. Confía en tus estadísticas o otras fuentes de datos para los patrones de uso de tu sitio web para decidir por ti mismo si Se recomienda usar prefetch. Como alternativa, puedes usar el Save-Data sugerencia para inhabilitar las cargas previas de los usuarios que: especificó una preferencia para reducir el uso de datos.

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>

Importante: El atributo fetchpriority es particularmente Efectivo cuando se usa para la imagen LCP de una página. Si se eleva la prioridad de un con este atributo, puedes mejorar el LCP de una página con relativamente poco esfuerzo.

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?

Abre una conexión a un servidor de origen cruzado, incluida la búsqueda de DNS. así como la negociación de conexión y TLS antes de que el navegador de lo contrario, los descubriría.

Correcto.

Solo realiza una búsqueda de DNS para el servidor de origen cruzado.

Vuelve a intentarlo.

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

Especifica la prioridad con la que se descarga el HTML de la página actual.

Vuelve a intentarlo.

Especifica la prioridad relativa para <link>: Elementos <img> y <script>.

Correcto.

¿Cuándo debes usar la sugerencia prefetch?

Para todos los recursos o páginas que el usuario podría necesitar, ya sea o no las necesitará en el futuro.

Vuelve a intentarlo.

Cuando tengas una confianza alta en que los recursos o las páginas que intentas cargar previamente si son necesarias para el usuario.

Correcto.

Si el usuario no indicó una preferencia explícita por la reducción de datos de uso de la nube.

Correcto.

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.