¿Cómo se procesa y analiza el LCP de una página web? El jаvascript, el CSS, las imágenes, iframes y otros recursos pueden influir en la velocidad de carga de una web, lo que afecta la primera impresión de los usuarios y la usabilidad general. 

Por eso, Google creó la métrica de pintado del contenido principal (LCP) para medir la rapidez con la que se muestra el contenido principal. El contenido principal para LCP suele ser el elemento más grande ubicado encima del pliegue (Above the fold). Esto puede ser una imagen, un video o un bloque de texto. De todas estas opciones, el texto es la mejor opción para el rendimiento de LCP, ya que se carga y procesa más rápido que un vídeo o imagen debido al peso de los archivos.

Los navegadores siguen una ruta crítica de renderizado para analizar el documento HTML y los recursos a los que hace referencia (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 procesa una vez que todos los recursos que bloquean el renderizado, como CSS, archivos de fuentes y scripts, han sido analizados y procesados.

<!-- Cargue la hoja de estilo que hará referencia a la imagen LCP -->
<link rel="stylesheet" href="styles.css">

<!-- Precargue la imagen LCP con una alta prioridad de búsqueda para que comience a cargarse con la hoja de estilo. -->
<link rel="preload" fetchpriority="high" as="image" href="tu-imagen.webp" type="image/webp">

<img fetchpriority="high" src="tu-imagen.webp" alt="" width="450" height="300">

Es una buena idea configurar fetchpriority="high" a un elemento <img> si cree que es probable que sea el elemento LCP de su página.

Los navegadores tienen una jerarquía predeterminada de recursos para descargar y procesar. Esto comienza con el documento HTML, que se solicita y descarga primero. Luego, los navegadores se basan en estas prioridades predefinidas para determinar qué descargar a continuación y en qué orden. Esto asegura que los recursos se carguen de forma óptima para una experiencia de usuario óptima.

Los recursos deben priorizarse de la siguiente manera: el recurso principal (normalmente un documento HTML) debe tener la prioridad más alta, seguido por los archivos de fuentes, scripts (si se solicitan antes de cualquier archivo de imagen no precargado) y elementos con el parámetro preload. Las imágenes de la parte visible del dispositivo deben tener prioridad media. Los scripts con el parámetro async, los medios e imágenes, los documentos SVG y los css adicionales deben tener prioridad baja. Los css y scripts (carga posterior) deben tener prioridad media, si se solicitan después de cualquier archivo de imagen no precargado.

Optimizar el rendimiento de una página web da como resultado beneficios como más conversiones, tráfico y una mejor experiencia de usuario. Por ello, es recomendable hacer algunos ajustes adicionales para mejorar el rendimiento más allá de los valores por defecto. Por ejemplo, el atributo preload de los elementos HTML link permite optimizar el rendimiento de carga asegurándonos de que el navegador descargue y almacene en caché el recurso antes. Sin embargo, esto no da un control granular sobre un tipo de recurso en particular. Por ejemplo, si estamos cargando dos hojas de estilo que bloquean el renderizado, podemos indicarle al navegador que el archivo style.css es más importante que el archivo style-plugin.css sin recurrir a la utilización de jаvascript o alguna otra solución.

¡El atributo HTML fetchpriority viene al rescate! 

Esta nueva característica nos permite asignar una prioridad relativa a prácticamente cualquier elemento HTML que cargue algún tipo de recurso, como imágenes y scripts. Aquí es importante tener en cuenta que solo podemos establecer la prioridad dentro del mismo tipo de recurso, por lo que no podemos decirle a los navegadores que carguen imágenes antes que el jаvascript que bloquea el renderizado.

Además, hay que aclarar que fetchpriority no garantiza que un recurso de mayor prioridad se cargue antes que otros recursos (de menor prioridad) del mismo tipo. Por lo tanto, no deberíamos usarlo para controlar el orden de carga, como por ejemplo, para que se cargue una dependencia de jаvascript antes que el script que la use.

Este atributo acepta los siguientes 3 valores: 

• low para disminuir la prioridad relativa del recurso, 
• high para aumentarla,
• auto para permitir al navegador decidir la prioridad. 

Por ejemplo, podemos usarlo para indicarle al navegador que queremos que el archivo style.css tenga una prioridad más alta que el archivo style-plugin.css.

<link rel="stylesheet" href="style.css" fetchpriority="high" />
<link rel="stylesheet" href="style-plugin.css" fetchpriority="low" />

Utiliza fetchpriority con precaución

No es recomendable asignar el parámetro fetchpriority a cualquier recurso. Los navegadores ya realizan un trabajo excelente, por lo que deberías usarlo con cautela y solo para casos de uso muy específicos en los que queremos priorizar solicitudes para mejorar el LCP, priorizar un recurso diferido sobre otro del mismo tipo, priorizar solicitudes de precarga, etc. Abusar de este atributo, o realizar una optimización prematura, podría perjudicar el rendimiento, así que antes de aplicarlo, asegúrate de realizar pruebas de rendimiento para verificar que los resultados son los esperados y, sobre todo, necesarios para la web.

Se espera que otros navegadores la incorporen a su funcionalidad pronto.

Conclusión

La velocidad de carga y el LCP son factores importantes para mejorar la experiencia de usuario de una página web. El parámetro FetchPriority de Google Chrome puede ayudar a mejorar la velocidad de carga y el LCP de una página web. Esta herramienta permite a los desarrolladores web priorizar los recursos para mejorar el rendimiento de la página web. Implementar esta herramienta puede ayudar a mejorar la primera impresión de los usuarios y la usabilidad general de una página web.

Tener esto en cuenta, fetchPriority debería usarse solo en situaciones específicas, como: optimizar el rendimiento de LCP para imágenes y otros elementos multimedia; cambiar la prioridad de los enlaces y scripts; reducir la prioridad de fetch para solicitudes de jаvascript que no sean esenciales para el contenido o la funcionalidad; y disminuir la prioridad de los elementos iframe. ¡Así que, mantén esto en mente cuando decidas usar fetchPriority!