Cómo usar el parámetro fetchpriority para mejorar la velocidad de carga y LCP en WordPress

Cómo se procesa y analiza el LCP de una página web

El JavaScript, el CSS, las imágenes, iframes y otros recursos afectan la velocidad con la que carga una web, se procesa y es útil para el usuario. La experiencia de carga es crucial para la primera impresión del usuario y la usabilidad general, y es por eso que Google definió la métrica del pintado del contenido pricipal (LCP) para medir la rapidez con la que se carga el contenido principal y se muestra al usuario.

El contenido principal para LCP suele ser el elemento más grande ubicado encima del pliegue (Above the fold). Este elemento puede ser una imagen, un video o simplemente un gran bloque de texto. De todas esas opciones, podemos asumir que el texto es la mejor opción para el rendimiento de LCP porque se carga y se procesa rápidamente, o al menos más rápido que un vídeo o imagen, por simple cuestión de peso de archivo.

Los navegadores siguen una ruta crítica de renderizado para analizar el documento HTML y sus recursos a los que se 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.

Valores por defecto de prioridades de los recursos

Ahora que tenemos claro qué tipo de recursos se cargan y cómo se procesan en el LCP, vamos a ver cómo se realizan las peticiones y cómo se cargan esos recursos.

El documento HTML es el primer recurso que se solicita y descarga, pero ¿cómo saben los navegadores qué descargar a continuación y en qué orden? Los navegadores tienen un conjunto de prioridades por defecto para cada tipo de recurso, para descargarlos en un orden óptimo.

Prioridad	Recursos
La más alta	Recurso principal (normalmente un documento HTML), CSS (lo antes posible – si se solicita antes de cualquier archivo de imagen no precargado – y los archivos de fuentes
Alta	Scripts (lo antes posible – si se solicitan antes de cualquier archivo de imagen no precargado) Elementos con el parámetro preload Imágenes (en la parte visible del dispositivo)
Media	CSS y scrips (carga posterior – si se solicitan después de cualquier archivo de imagen no precargado)
Baja	Scripts (con el parámetro async) Medios e imágenes Documentos SVG
La más baja	CSS adicionales Elementos con el parámetro prefetch

Estas prioridades por defecto funcionan razonablemente bien en la mayoría de los casos y, por lo general, dan como resultado un buen rendimiento.

Sin embargo, puede que, si te tomas tu trabajo de desarrollo web en serio, quieras mejorar el rendimiento más allá de eso haciendo algunos ajustes adicionales.

Como ya deberías saber, un mejor rendimiento de la web da como resultado más conversiones, más tráfico y una mejor experiencia de usuario, así que siempre puedes dar un pasito más para mejorar el rendimiento de tus páginas.

Podemos, por ejemplo, usar el atributo preload de los elementos HTML link 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 renderizado. ¿Cómo podemos indicarle al navegador que el archivo main.css es más importante que el archivo estilos-de-un-plugin-random.css sin recurrir al uso de JavaScript o alguna otra solución?

El atributo HTML fetchpriority  al rescate

Este nuevo atributo se puede asignar a prácticamente cualquier elemento HTML que cargue algún tipo de recurso, como imágenes y scripts y afecte a 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 renderizado.

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, fetchpriority no debe usarse para controlar el orden de carga en sí, como, por ejemplo, para que se cargue una dependencia de JavaScript antes que el script que la use.

Además, este atributo no obliga al navegador a buscar un recurso ni evita que lo haga. Depende del navegador si va a buscar el recurso o no. Este atributo solo ayuda al navegador a priorizarlo cuando se obtenga.

Dicho esto, el atributo fetchpriority acepta los siguientes 3 valores:

• low
  Disminuye la prioridad relativa del recurso.
• high
  Aumenta la prioridad relativa del recurso.
• auto
  Valor por defecto 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 el archivo main.css con una prioridad más alta que el archivo estilos-de-un-plugin-random.css:

<link rel="stylesheet" href="/ruta/a/main.css" fetchpriority="high" />
<link rel="stylesheet" href="/ruta/a/estilos-de-un-plugin-random.css" fetchpriority="low" />

¿A que es fácil?

Usa fetchpriority con moderación

No es recomendable asignar el parámetro fetchpriority a todos los recursos. Los navegadores ya hacen un trabajo suficientemente bueno, por lo que debe usarse con moderación, 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.

Usar excesivamente este atributo, o ejecutar una optimización prematura podría dañar el rendimiento, así que haz pruebas de rendimiento para verificar que los resultados son los esperados y, sobre todo, necesarios para la web.

Disponibilidad de fetchpriority

Actualmente la propiedad HTML fetchpriority solo está disponible en la última versión de Chromium y los navegadores que usan este motor, pero es bastante probable que el resto de navegadores la incorporen pronto.

Conclusión

A modo de resumen, podemos decir que fetchpriority debe usarse solo en casos específicos, tales como:

• Mejorar el rendimiento de LCP para imágenes y otros recursos de medios
• Cambio de prioridades link y script y otros recursos
• Reducir la prioridad de las solicitudes fetch de JavaScript que no son críticas para el contenido o la funcionalidad
• Reducir la prioridad de los elementos iframe

Si quieres profundizar en este atributo, tienes más información y códigos de ejemplo en CSS Tricks.

La entrada Cómo usar el parámetro fetchpriority para mejorar la velocidad de carga y LCP en WordPress la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.