Aumente la carga de recursos con fetchpriority, una nueva sugerencia de prioridad

 

 

 

  • Creación y mantenimiento de sistemas de diseño exitosos, con Brad Fost
  • Accesibilidad para diseñadores, con Stéphanie Walter

  • Índice
    1. Valores predeterminados de prioridades de recursos
    2. fetchpriorityatributo HTML
      1. Úselo con moderación
    3. Ejemplos y casos de uso
      1. Mejora del rendimiento de la pintura con contenido más grande
      2. Imágenes diferidas
      3. Hojas de estilo diferidas
      4. Ajuste de las prioridades de recursos de JavaScript
      5. Priorizar fetchsolicitudes de JavaScript
      6. iframeElementos incrustados
    4. Conclusión
      1. Referencias

    Este nuevo atributo nos permitirá ajustar la prioridad relativa de los recursos, mejorar el rendimiento de LCP, quitar la prioridad a las llamadas de recuperación de JavaScript y mucho más. Revisemos fetchpriorityy exploremos algunos casos de uso potenciales.

     

    JavaScript, CSS, imágenes, iframes y otros recursos afectan la rapidez con la que el sitio web se carga, se representa y se vuelve utilizable para el usuario. La experiencia de carga es crucial para la primera impresión del usuario y la usabilidad general, por lo que Google definió la métrica Largest Contentful Paint (LCP) para medir la rapidez con la que el contenido principal se carga y se muestra al usuario.

    El contenido principal de LCP suele ser el elemento más grande ubicado en la mitad superior de la página. Este elemento podría ser una imagen, un vídeo o simplemente un gran bloque de texto. De todas esas opciones, es seguro asumir que el texto es la mejor opción para el rendimiento de LCP porque se carga y procesa rápidamente.

    El contenido principal de web.dev es una imagen según LCP (la prueba se realizó en WebPageTest). ( Vista previa grande )

     

    Los navegadores siguen una ruta de procesamiento crítica para analizar el documento HTML y sus recursos referenciados (CSS, JS, imágenes, etc.) para mostrar el contenido en la pantalla. Los navegadores construyen un árbol de renderizado usando DOM y CSSOM, y la página se renderiza una vez que se han analizado y procesado todos los recursos que bloquean el renderizado, como CSS, archivos de fuentes y scripts.

    Valores predeterminados de prioridades de recursos

    Centrémonos en cómo se solicitan y descargan estos recursos. El documento HTML es el primer recurso que se solicita y descarga, pero ¿cómo determinan los navegadores qué descargar a continuación y en qué orden? Los navegadores tienen un conjunto de prioridades predeterminadas para cada tipo de recurso, por lo que se pueden descargar en un orden óptimo.

    Aquí hay un resumen aproximado según “ Priorización y programación de la recuperación de recursos en Chromium ” de Patrick Meenan:

    Prioridad
    más alto
    • Recurso principal (normalmente un documento HTML),
    • CSS (temprano, si se solicita antes de cualquier archivo de imagen no precargado) y archivos de fuentes;
    Alto
    • Script (temprano, si se solicita antes de cualquier archivo de imagen no precargado),
    • precarga,
    • Imagen (en ventana gráfica);
    Medio
    • CSS y Script (tarde, si se solicita después de un archivo de imagen no precargado).
    Bajo
    • Guión (asincrónico),
    • Medios e imágenes,
    • Documento SVG.
    Más bajo
    • CSS no coincide,
    • Captación previa.

    Estas prioridades predeterminadas funcionan razonablemente bien en la mayoría de los casos y normalmente dan como resultado un buen rendimiento. Sin embargo, los desarrolladores con un conocimiento profundo del proyecto pueden querer mejorar el rendimiento más allá haciendo algunos ajustes internos. Es de conocimiento común que un mejor rendimiento de un sitio web genera más conversiones, más tráfico y una mejor experiencia de usuario.

    Podemos utilizar el preloadatributo del linkelemento HTML para optimizar el rendimiento de carga asegurándonos de que el navegador descubra el recurso antes, lo descargue y lo almacene en caché. Sin embargo, eso no nos proporciona un control más granular sobre un tipo de recurso en particular.

    Por ejemplo, digamos que estamos cargando dos hojas de estilo que bloquean el procesamiento. ¿Cómo podemos indicarle al navegador que el main.cssarchivo es más importante que third-party-plugin.cssel archivo sin recurrir al uso de JavaScript o alguna otra solución?

    fetchpriorityatributo HTML

    Introduzca fetchpriorityel atributo HTML. Este nuevo atributo se puede asignar a prácticamente cualquier elemento HTML que cargue algún tipo de recursos como imágenes y scripts y afecte su prioridad relativa. Prioridad relativa significa que solo podemos afectar una prioridad dentro del mismo tipo de recurso. Lo que significa que no podemos decirle a los navegadores que carguen imágenes antes de cargar el JavaScript que bloquea el procesamiento.

    Es importante tener en cuenta que este atributo no garantiza que un recurso de mayor prioridad se cargue antes que otros recursos (de menor prioridad) del mismo tipo. Por lo tanto, fetchpriorityno debería usarse para controlar el orden de carga en sí, como en el caso en el que quisiéramos que se cargara una dependencia de JavaScript antes que un script que la use.

    Además, este atributo no obliga al navegador a buscar un recurso ni impide que lo busque. Depende del navegador si va a buscar el recurso o no. Este atributo simplemente ayuda al navegador a priorizarlo cuando se recupera.

    Dicho esto, fetchpriorityel atributo acepta uno de los tres valores siguientes:

    • low
      Disminuir la prioridad relativa del recurso.
    • high
      Incrementar la prioridad relativa del recurso.
    • auto
      Valor predeterminado que permite al navegador decidir la prioridad.

    Volviendo a nuestro ejemplo anterior, podemos usar este atributo para indicarle al navegador que queremos iniciar una solicitud y descargar con main.cssuna prioridad más alta que la third-party-plugin.cssque es el mismo recurso CSS que bloquea la representación main.css.

    link rel="stylesheet" href="/path/to/main.css" fetchpriority="high" /link rel="stylesheet" href="/path/to/third-party-plugin.css" fetchpriority="low" /

    Bastante simple, ¿verdad?

    Nota : En el momento de escribir este artículo, el fetchpriorityatributo es actualmente compatible con Chrome Canary con la versión completa configurada para Chrome versión 101, y otros navegadores seguirán su ejemplo.

    Úselo con moderación

    No se recomienda asignar fetchprioritya todos los recursos. Los navegadores ya hacen un trabajo bastante bueno, por lo que se debe usar con moderación para casos de uso muy específicos en los que queremos priorizar solicitudes para mejorar LCP, priorizar un recurso diferido sobre otro del mismo tipo, priorizar solicitudes de precarga, etc. Este atributo o ejecutar una optimización prematura podría perjudicar el rendimiento, así que asegúrese de ejecutar pruebas de rendimiento para verificarlo.

    Con eso en mente, pasemos a algunos de esos ejemplos y escenarios del mundo real, para que podamos usar este nuevo atributo de manera efectiva.

    Ejemplos y casos de uso

    Mejora del rendimiento de la pintura con contenido más grande

    Este es actualmente el mejor caso de uso para fetchpriority. Las imágenes se procesan después de que todos los recursos críticos y de bloqueo de renderizado ya se hayan renderizado, e incluso el uso preloado loading="eager"no cambiará eso. Sin embargo, fetchprioritypodemos intentar asegurarnos de que es más probable que la imagen LCP esté lista para ese renderizado inicial, lo que resulta en un aumento considerable del rendimiento.

     

    Teniendo esto en cuenta, el bloque de texto es el candidato a LCP más opcional en la mayoría de los casos , ya que funciona mejor que la imagen u otro contenido multimedia. Para los casos en los que las imágenes son críticas o la parte principal del contenido, no tenemos otra opción que simplemente mostrarlas. Por lo tanto, debemos optimizarlos para que se carguen lo más rápido posible. Todo sobre salud dental

    Echemos un vistazo a un ejemplo sencillo de un carrusel de imágenes que también es el contenido principal de la ventana gráfica y un candidato principal para LCP.

    Vea el Pen [Ejemplo: sin prioridad de recuperación](https://codepen.io/smashingmag/pen/oNppEoX) de Adrian Bece .

    Podemos ejecutar la prueba Lighthouse para verificar las métricas y usar estos datos para comparar.

    Tenga en cuenta : varios factores pueden afectar las estadísticas, por lo que los resultados pueden diferir, pero la esencia general es la misma.

    Sin pistas de prioridad. ( Vista previa grande )

    Usemos fetchpriorityy asignemos highprioridad a la imagen principal (activa) y lowprioridad a las miniaturas.

    !-- Carousel is above the fold -- nav ul li img fetchpriority="low" src="..." / /li li img fetchpriority="low" src="..." / /li !-- ... -- figure img fetchpriority="high" src="..."/img !-- ... --

    Vea el Pen [Ejemplo: con prioridad de recuperación (https://codepen.io/smashingmag/pen/mdppXLR) de Adrian Bece .

    Ejecutemos Lighthouse en el ejemplo modificado y podremos notar que nuestro LCP ha mejorado.

    Con fetchpriority='high' en la imagen principal y fetchPriority='low' en las miniaturas. ( Vista previa grande )

    Al usar fetchpriority, marcamos cuáles de las imágenes eran más importantes para el contenido y cuáles no. Entonces, el navegador tomó en cuenta estas señales al buscar recursos, priorizando la imagen del contenido principal, lo que a su vez permitió que el contenido principal se mostrara antes, ¡mejorando la métrica LCP!

    Imágenes diferidas

    De manera similar, podemos usar fetchpriorityatributos para priorizar los recursos de la mitad inferior de la página que tienen loading="lazy"atributos. Aunque esto no afectará los tiempos de LCP, aún podemos indicarle al navegador que dé prioridad a la imagen del carrusel más grande (activa) sobre las miniaturas pequeñas cuando el navegador decida cargarlas. De esa manera, podemos mejorar incluso la experiencia del usuario con carga diferida.

    Recuerde, este atributo no obliga a los navegadores a buscar un recurso . Incluso si fetchpriorityestá configurado en high, el navegador seguirá decidiendo si el recurso se recuperará o no. Sólo indicamos al navegador cuál de estas solicitudes es más importante de cada grupo.

     

    !-- Carousel is below the fold -- nav ul li imgfetchpriority="low" src="..." / /li li img fetchpriority="low" src="..." / /li !-- ... -- figure img fetchpriority="high" src="..."/img !-- ... --

    Hojas de estilo diferidas

    También podemos usarlo fetchprioritypara indicar qué scripts y hojas de estilo deben tener mayor prioridad al cargar.

    Tenga en cuenta : los scripts y las hojas de estilo siguen bloqueando el procesamiento si no se aplazan.

    Echemos un vistazo al siguiente ejemplo. Si desea seguir este ejemplo en CodePen, asegúrese de inspeccionar la configuración de la pestaña HTML en el ejemplo de CodePen a continuación. El código al que se hace referencia a continuación se incluye allí, ya que la pestaña HTML de CodePen solo cubre HTML bodyy headse agrega con esta configuración separada.

    Consulte Pen [Priorización de hojas de estilo] (https://codepen.io/smashingmag/pen/oNppEQx) de Adrian Bece .

    Estamos cargando los siguientes recursos:

    • Hoja de estilo de Google Fonts
      Diferir la carga justo después del primer renderizado. Este cambio de fuente es visible para el usuario (FOUT).
    • Hoja de estilos no crítica en la parte inferior de la página ( Bootstrap se usa solo como ejemplo para un archivo CSS de mayor tamaño ).
      Aplaza la carga después del primer renderizado con baja prioridad, porque esos estilos se usan en la parte inferior de la página.

    • Bloqueo de renderizado CSS crítico y aplicado inmediatamente.

    Usaremos una técnica común para diferir la carga de hojas de estilo no críticas y agregaremos un preloadwith apropiado fetchprioritypara garantizar que la fuente se cargue lo antes posible, de modo que FOUT (Destello de texto sin estilo) ocurra justo después del primer renderizado.

    !-- Increase priority for fonts to load fonts right after the first render --link rel="preload" as="style" fetchpriority="high" onload="this.onload=null;this.rel='stylesheet'" href="https://fonts.googleapis.com/css2?family=Crete+Roundfamily=Roboto:wght@400;700display=swap" /!-- Preload non-critical, below-the-fold CSS with low priority --link rel="preload" as="style" fetchpriority="low" onload="this.onload=null;this.rel='stylesheet'" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" /!-- No JS fallback for stylesheets --noscript !-- --/noscript!-- Inline critical CSS (above-the-fold styles) --style /* Critical CSS *//style

    Aunque esta configuración no afectará LCP ni otras métricas de rendimiento, muestra cómo podemos fetchprioritymejorar la experiencia de carga priorizando un recurso sobre otro dentro del mismo tipo.

    Consulte Pen [Priorización de hojas de estilo - con fetchpriority] (https://codepen.io/smashingmag/pen/oNppEVL) de Adrian Bece .

    Ajuste de las prioridades de recursos de JavaScript

    Aunque podemos usar asyncy defercambiar cuándo se cargan y analizan los scripts, fetchprioritypodemos tener un control más granular sobre los recursos de JavaScript.

     

    Estos dos ejemplos de web.dev muestran perfectamente cómo podemos combinar estos atributos para obtener aún más opciones de carga de scripts:

    script src="async_but_important.js" async fetchpriority="high"/scriptscript src="blocking_but_unimportant.js" fetchpriority="low"/script

    Priorizar fetchsolicitudes de JavaScript

    Este atributo no se limita a HTML, también se puede utilizar en JavaScript fetchpara priorizar algunas llamadas API sobre otras.

    Por ejemplo, digamos que estamos cargando una publicación de blog. Queremos priorizar el contenido principal sobre los comentarios, por lo que debemos pasar un priorityatributo en fetchel objeto de opciones.

    Tenga en cuenta : el priorityvalor es highel predeterminado, por lo que solo necesitamos asignarlo lowcuando queremos reducir la prioridad de la fetchsolicitud.

    /* High-priority fetch for post content (default) */function loadPost() { fetch("https://jsonplaceholder.typicode.com/posts/1") .then(parseResponse) .then(parsePostData) .catch(handleError);}/* Lower-priority fetch for comments (with priority option) */function loadComments() { fetch("https://jsonplaceholder.typicode.com/posts/1/comments", { priority: "low" }) .then(parseResponse) .then(parseCommentsData) .catch(handleError);}

    Vea el bolígrafo [Buscar con prioridad] (https://codepen.io/smashingmag/pen/ExooQBa) de Adrian Bece .

    iframeElementos incrustados

    Podemos asignar fetchpriorityelementos iframecomo cualquier otro recurso. Sin embargo, tenga en cuenta que este atributo solo afecta al recurso principal del iframe y no se aplica a los recursos dentro del archivo iframe. El navegador cargará recursos dentro del iframe con prioridades predeterminadas. Sin embargo, todavía los estamos retrasando para comenzar más tarde.

    iframe fetchpriority="low" type="text/html" src="https://www.youtube.com/embed/..." frameborder="0"/iframe

    Conclusión

    Últimamente, hemos visto características nuevas e interesantes que nos permiten controlar el navegador y el comportamiento de carga: las capas en cascada CSS nos permiten controlar las capas de reglas CSS y ahora fetchprioritynos permitirán un control más granular sobre la prioridad de carga de recursos. Sin embargo, este control sobre los conceptos centrales requiere que los desarrolladores tengan cuidado y los utilicen de acuerdo con las mejores prácticas, ya que un uso incorrecto puede perjudicar tanto el rendimiento como la experiencia del usuario.

    Teniendo esto en cuenta, fetchpriorityse debe utilizar sólo en casos específicos, como por ejemplo:

    • Mejorar el rendimiento de LCP para imágenes y otros recursos multimedia;
    • Cambio de prioridades linky scriptrecursos;
    • Reducir la prioridad de fetchlas solicitudes de JavaScript que no son críticas para el contenido o la funcionalidad;
    • Reducir la prioridad de los elementos del iframe.

    Al momento de escribir este artículo, este atributo está disponible en Chrome Canary y se lanzará en la versión 101 de Chrome , y otros navegadores seguirán su ejemplo. Será fantástico ver a la comunidad de desarrollo proponer casos de uso y mejoras de rendimiento más interesantes.

    Referencias

    • Consejos de prioridad , borrador del informe del grupo comunitario
    • “ Optimización de la carga de recursos con sugerencias de prioridad ”, Leena Sohoni, Addy Osmani y Patrick Meenan

    (vf, yk, il)Explora más en

    • Actuación
    • javascript
    • Mejoramiento





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Aumente la carga de recursos con fetchpriority, una nueva sugerencia de prioridad

    Aumente la carga de recursos con fetchpriority, una nueva sugerencia de prioridad

    Creación y mantenimiento de sistemas de diseño exitosos, con Brad Fost Accesibilidad para diseñadores, con Stéphanie Walter Índice

    programar

    es

    https://aprendeprogramando.es/static/images/programar-aumente-la-carga-de-recursos-con-fetchpriority-1137-0.jpg

    2024-04-04

     

    Aumente la carga de recursos con fetchpriority, una nueva sugerencia de prioridad
    Aumente la carga de recursos con fetchpriority, una nueva sugerencia de prioridad

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20