Existen muchas formas distintas de mejorar el rendimiento de un sitio web basado en WordPress, y el día de hoy vamos a ver una que sale un poco de lo tradicional, ya que se trata de un nuevo atributo HTML que se conoce como fetchpriority, así que veamos cómo se puede usar fetchpriority para mejorar la carga y LCP de WordPress.
Contenido
¿Qué es fetchpriority?
Como comentábamos en el párrafo anterior, fetchpriority es un atributo HTML que ha sido lanzado hace poco tiempo, de hecho actualmente todavía es considerado como una tecnología experimental, por lo tanto se recomienda tener mucho cuidado al usarlo ya que no todos los navegadores lo soportan.
Para que nos hagamos una idea de lo anterior, fetchpriority todavía no es soportado en Firefox ni en Safari, aunque sí en otros navegadores como Chrome, Edge y Opera, tanto en versiones móviles como de escritorio, y por supuesto esto aplica solamente para versiones recientes, más concretamente en las versiones lanzadas a fines de mayo y posteriores.
¿Cómo funciona fetchpriority?
Para entender cómo funciona y se utiliza fetchpriority, es importante primero entender cuáles son algunos de los principales elementos que pueden impactar en la velocidad de nuestro sitio, y este estos vamos a encontrar por ejemplo imágenes, iframes, JavaScript y CSS, entre otros. Todos estos recursos impactan en la carga de nuestra web y en cómo esta es mostrada al usuario.
La carga de un sitio web es extremadamente importante para el usuario, al punto de que Google tiene definida una métrica llamada LCP para determinar qué tan rápido el contenido carga y es mostrado a quien accede a nuestro sitio.
El contenido principal para LCP es el más grande ubicado por encima del pliege del sitio, por lo tanto es importante que dicho contenido sea lo más liviano posible, es decir que si tenemos un texto en vez de un video o una imagen vamos a tener una mejor puntuación de LCP, porque obviamente un texto carga mucho más rápido que un contenido multimedia, y si bien estamos hablando de una diferencia de solo unos pocos milisegundos en algunos casos, para esta métrica todo cuenta.
Los navegadores a la hora de cargar un HTML usan una ruta de renderizado, en la cual se basan para cargar el HTML y los recursos a los cuales se hacen referencia, determinando así cómo son mostrados todos estos elementos en la pantalla al usuario. El documento HTML es siempre el primer recurso descargado, ¿pero de qué forma el navegador determina el orden en que se deben descargar el resto de los recursos como CSS, imágenes, etc.?
Sucede que los navegadores tiene definido ese orden por defecto, y dicho orden es el siguiente:
- Primero que nada se carga el documento HTML, seguido del CSS prioritario y fuentes.
- Posteriormente es el turno de scripts prioritarios, recursos con el atributo preload y las imágenes visibles.
- En tercer lugar encontramos el CSS no prioritario y los scripts no prioritarios.
- Siguiendo en la lista están los scripts async, más contenido multimedia y documentos SVG.
- Finalmente, con la prioridad más baja, está el CSS adicional y cualquier recurso con el atributo prefetch.
Se puede decir que, en líneas generales, este orden de carga funciona muy bien, aunque es posible hacerle ajustes usando atributos como preload, sin embargo, si queremos realmente editar a fondo estas prioridades, vamos a necesitar algo más, y aquí es donde entra en juego fetchpriority.
Como comentábamos al comienzo, fetchpriority es un atributo HTML, y teniendo en cuenta lo ya visto, está claro que su función es la de cambiar la prioridad de los elementos HTML de nuestro sitio web que cargan recursos como imágenes, CSS, JavaScript, etc., afectando la prioridad relativa, lo cual quiere decir que solo podemos afectar la prioridad dentro de un mismo tipo de recurso.
Tal como vemos, el uso de este atributo escapa un poco a lo que se suele ver cuando se habla de optimizar un sitio hecho en WordPress, aquí no hay plugins, ni CDNs ni por el estilo, es simplemente un atributo HTML que puede marcar una gran diferencia en nuestro LCP.
Precauciones al usar fetchpriority
Es muy importante dejar en claro que fetchpriority no tiene que ser utilizado como un controlador del orden de la carga de todos los recursos, de hecho el uso de este atributo ni siquiera es garantía de que el navegador vaya a cargar un recurso de forma deseada en el 100% de los casos. A modo de ejemplo, si tenemos un script que usa un JavaScript este último no se cargará primero que el script que lo usa aunque tenga mayor prioridad.
También es de suma importancia destacar que fetchpriority no debe ser utilizado en todos los recursos, no es la idea, los navegadores por defecto ya hacen un estupendo trabajo con su propia prioridad. El uso de fetchpriority es recomendado solamente para los elementos más críticos que puedan afectar nuestro LCP, lo que se busca aquí es usar lo justo y necesario.
Si usas fetchpriority demasiado puedes terminar teniendo el efecto contrario al buscado (reducir el LCP), y si no lo usas lo suficiente puedes estar perdiendo puntos en rendimiento, así que lo mejor es que realices muchas pruebas con distintas configuraciones de fetchpriority y veas cuál es la que te da los mejores resultados.
¿Cuáles son los valores de fetchpriority?
fetchpriority dispone de tres valores que podemos definir para cambiar la prioridad de un recurso HTML, y se trata de los siguientes:
- low: este valor indica que el recurso debe ser tratado con una prioridad baja, reduciendo su prioridad relativa.
- high: contrario a “low”, el valor “high” indicará que el recurso tiene una mayor prioridad, es decir que aumenta su prioridad relativa.
- auto: finalmente tenemos el valor “auto”, que como tal lo único que hace es dejar la prioridad en manos del propio navegador, es decir, no afectará directamente la prioridad relativa de un recurso, siendo el navegador quien decide la prioridad con la que el recurso es cargado.
Ejemplo de uso de fetchpriority
Habiendo visto todo lo anterior, vamos a dejarles un par de ejemplos del uso del atributo fetchpriority, que es extremadamente fácil de implementar:
<link rel="stylesheet" href="/ruta/al/archivo-principal.css" fetchpriority="high" />
En este ejemplo de arriba, estamos asignando una prioridad alta a un recurso css, nótese el uso del valor «high» en fetchpriority.
<link rel="stylesheet" href="/ruta/a/otro-archivo.css" fetchpriority="low" />
Y en este otro ejemplo, estamos haciendo lo contrario, dándole a un css una prioridad baja mediante el valor «low» en fetchpriority.
El valor «auto» se puede aplicar de la misma forma.
Ya lo dijimos pero lo volvemos a reiterar: jueguen con fetchpriority, hagan muchas pruebas, guarden los resultados y verifiquen cuáles valores funcionan mejor en su caso.
Por supuesto tengamos en cuenta que fetchpriority no necesariamente está limitado a WordPress, de hecho puede ser utilizado en cualquier sitio web, aquí simplemente lo mencionamos como un método adicional para mejorar el rendimiento de sitios basados en WP.
Conclusión
Como hemos visto en esta ocasión, fetchpriority es un atributo HTML que tiene muchísimo potencial, aunque es una espada de doble filo, tenemos que usarlo muy cuidadosamente y probarlo a fondo para encontrar la configuración correcta que mejor se adapte a nuestra web.
Si implementamos fetchpriority correctamente, vamos a ver una mejora en nuestro LCP, lo cual mejorará la carga a los ojos del usuario y también a los ojos de Google. Solo se debe usar fetchpriority para cambiar la prioridad de determinados recursos críticos, recuerden que la idea no es controlar la prioridad de todos los recursos, dejemos parte de esa tarea a los navegadores.