Una de las posibles causas por las que pueden verse perjudicadas tus estadísticas de rendimiento, es por la oportunidades de mejora a aplicar sobre algunas de las métricas Core Web Vitals.
Como sabemos, las Core Web Vitals comenzaron a ser consideradas como un factor de ranking diferencial en SEO por Google en Mayo 2021.
Esto incluía todas las métricas que afectaban directamente a la experiencia de la página, tales como el CLS, LCP y FID.
Pues bien, en concreto sobre la métrica LCP, que mide el tiempo que tarda en cargarse el elemento de contenido más grande de la página, existen algunas acciones que se pueden aplicar directamente para reducir ese tiempo y quedarse en el adecuado a ojo de Google (verde).
A raíz de este post publicado por WebDev en enero de 2023, me surgió la duda para investigar sobre cómo mejorar los tiempos de LCP que afectaban a mi sitio.
En el post vienen a resumir cuáles son las recomendaciones que esta comunidad de desarrolladores recomienda de manera fácil y efectiva hacer para mejorar los datos de las diferentes CWV.
En concreto me llamó la atención una referida a reducir los tiempos de LCP, y que algunos sitios ya lo están aplicando … me refiero en concreto al atributo «fetchpriority».
Además, es interesante destacar que, WebDev en su página, ya publicó mejoras sobre este atributo en su web en octubre del 2021, y ahora (agosto 2023) WordPress, en su versión 6.3, lo está incluyendo como atributo por defecto en las imágenes destacadas (valor high).
Es una gran mejora de WP encaminada a optimizar el rendimiento de los sitios web.
Estructura del contenido
En qué consiste el atributo «Fetch Priority«
El atributo html llamado «fetch priority» se utiliza para indicar la prioridad de descarga de un recurso en una página web.
Este atributo permite a los desarrolladores indicar al navegador la importancia relativa de los recursos y la velocidad con la que deben descargarse. Esto puede ser muy útil para mejorar la velocidad de carga de la página y la experiencia del usuario, con lo que estaríamos mejorando nuestros datos de LCP.
Los valores que acompañan al atributo «fetch priority» son una cadena de texto que indica la prioridad de descarga del recurso. Estos valores incluyen «very-low», «low», «medium», «high» y «very-high», donde «very-high» indica la máxima prioridad de descarga.
Por ejemplo, si lo que quieres es dar una prioridad alta a un archivo de imagen porque suele ser el elemento más grande de un artículo o post (LCP), puedes añadir el atributo «fetch priority» con el valor «high» a la etiqueta de imagen de esta forma:
<img src="ruta-a-tu-imagen.jpg" alt="Imagen" fetchpriority="high">También puedes usar este atributo en otras etiquetas de recursos, como enlaces de CSS o scripts de JavaScript.
En cualquier caso es importante tener en cuenta que no todos los navegadores admiten este atributo, por lo que te recomiendo que antes de implementarlo analices el tipo de tráfico de tu sitio web y el navegador/dispositivo por el que recibes la mayor cantidad de tráfico, ya que de lo contrario podrías verte afectado negativamente.
El listado de navegadores y versiones que soportan el atributo fetch priority lo puedes consultar en las web de CanIUse y la web oficial de Mozilla Developers. Debes usarlo con moderación y sólo en recursos críticos para evitar una carga adicional innecesaria en el servidor y el ancho de banda de la red.
Otras formas de mejorar el LCP de tu sitio
Además de la que mencionaba anteriormente, para reducir los tiempos y mejorar la métrica LCP, se pueden utilizar otras técnicas como la optimización del tamaño de las imágenes (herramientas online como Iloveimg te permite redimensionarlas y comprimirlas en WebP), la minimización del código CSS y JavaScript y la eliminación de recursos innecesarios. También se puede mejorar el LCP utilizando la funcionalidad del «preloading» (precarga) de recursos críticos, lo que implica indicar al navegador que se deben cargar ciertos recursos prioritarios de antemano.
Para hacer esto, se puede utilizar un atributo de HTML llamado «rel» con el valor «preload», y especificar el tipo de recurso y la URL del recurso que se desea precargar. Por ejemplo, si lo que quieres es precargar una imagen, podrías agregar la siguiente línea de código en el head de la página:
<link rel="preload" href="ruta-a-tu-imagen.jpg" as="image">También puedes utilizar el valor «font» para precargar fuentes, «script» para precargar archivos JavaScript, y «style» para precargar archivos CSS. Al precargar recursos críticos, mejoras el tiempo de carga de la página y por tanto, mejoras la métrica LCP. Sin embargo, debes tener en cuenta de no abusar de esta técnica y precargar sólo los recursos críticos y necesarios de la página.
Cómo monitorizar los resultados
Si te has decidido por incluir este atributo en la imagen, te recomiendo que previamente hagas un análisis del estado previo y lo compares con el resultado después de la implementación. De esta forma podrás documentar los cambios y hacer un roll-back si no ha tenido su efecto deseado.
Para hacer esto, te recomiendo utilizar las diferentes herramientas de medición que Google pone a disposición de los propietarios de sitios web, y que he analizado en este post a todo detalle.
Básicamente te recomiendo utilizar las herramientas de PageSpeedInsights, Lighthouse de la herramienta de desarrolladores de Chrome y la tool online gratis WebPageTest, para que puedas comparar resultados y sacar más insights.
Además de esto, sí o sí te recomiendo que hagas el seguimiento a través de Search Console una vez hayas verificado tu dominio. Dentro de la herramienta irías a Experiencia – Métricas web principales, y allí podrás ver por dispositivo las estadísticas de rendimiento y filtrar.
Otras fuentes:
Documentación oficial de la especificación de HTML del W3C – Fetch priority attributes.
Cómo Usar El Parámetro Fetchpriority Para Mejorar La Velocidad De Carga Y LCP En WordPress de Ayuda WordPress.
