Dimensión de Core/Dash: LCP Priority

Dimensión: Recurso: LCP Priority

La dimensión LCP Priority segmenta los datos de rendimiento según cómo descubrió y priorizó el navegador el recurso del LCP. Mientras que la dimensión "Element Type" te dice qué es el elemento (Texto vs. Imagen), esta dimensión te indica por qué el navegador retrasó su carga.

Esta es tu herramienta principal de auditoría para el retraso de carga. Revela si tu recurso LCP está compitiendo por ancho de banda o si se está retrasando artificialmente debido a atributos HTML incorrectos.

La jerarquía de prioridad

El navegador asigna una prioridad de descarga a cada recurso. Esta dimensión asocia el elemento LCP a uno de los cinco estados de carga específicos, ordenados desde el más perjudicial (Lazy Loaded) al más óptimo (Texto/Prioridad alta).

Contexto: Cuando un usuario vuelve a tu página a través del botón "Atrás" o "Recargar", la mayoría de los navegadores lo devuelven a su posición vertical anterior. Si esta posición está debajo del pliegue, tu Hero Image optimizada ya no es el LCP. En su lugar, el navegador mide el elemento más grande en el viewport actual. Esto genera un conjunto inevitable de eventos "Not Preloaded" en tu conjunto de datos. ¡Y eso está perfectamente bien!

1. Lazy Loaded

Si más del 10% de tus elementos LCP aparecen en esta categoría, has detectado un problema. Las imágenes con lazy loading se encolan mucho más tarde (por el lento analizador DOM y no por el rápido escáner de precarga). El atributo loading="lazy" le indica al navegador que espere para iniciar la descarga hasta que se calcule el layout y el elemento esté cerca del viewport.

La solución: Elimina este atributo de carga. El elemento LCP nunca debe usar lazy loading.

<!-- INCORRECTO -->
<img src="hero.jpg" loading="lazy" alt="Hero Image" />

<!-- CORRECTO -->
<img src="hero.jpg" fetchpriority="high" alt="Hero Image" />

2. Not Preloaded

Esto representa el comportamiento predeterminado del navegador. El navegador descubrió la imagen en el HTML durante el análisis inicial, pero no recibió ninguna señal para priorizarla sobre otras imágenes.

El impacto en la velocidad de la página depende de la complejidad de tu página web. La imagen del LCP entra en una cola de competencia por recursos. Si tu página tiene muchos scripts, fuentes, otras imágenes sin lazy loading o estilos que descargar, el navegador puede retrasar la descarga de esta imagen, aumentando el retraso de carga.

3. Preloaded

Esto indica que el recurso se descubrió mediante una etiqueta <link rel="preload"> en la cabecera del documento. Este enlace de precarga básicamente permite un descubrimiento temprano, incluso si la referencia de la imagen está oculta en lo profundo del DOM o en un archivo CSS (imagen de fondo).

La precarga es la forma más efectiva de forzar una descarga temprana, pero requiere mantener una etiqueta de enlace independiente que coincida exactamente con la URL de la imagen. Si difieren, descargarás el recurso dos veces.

4. High fetchpriority

Este es el estándar de ingeniería moderno. Se le indica al navegador, mediante el atributo fetchpriority="high", que trate esta imagen específica como un recurso crítico.

La estrategia: Este es el estado objetivo para los LCP basados en imágenes. Señala la importancia directamente en el elemento, lo que lo prioriza por encima de otros recursos en la cola de descarga sin la sobrecarga de mantenimiento de las etiquetas de precarga manuales.

5. Not an Image

Estado: Nodo de texto / SVG

El elemento LCP es un bloque de texto (h1, p) o un SVG puro. Este es el estado arquitectónico ideal porque el texto no genera retraso de carga (ya está presente en el documento HTML).

La optimización: Si tu LCP está en esta categoría pero sigue siendo lento, el cuello de botella es exclusivamente el retraso de renderizado. Debes optimizar la ruta de renderizado crítica (bloqueo de CSS/JS) o tu estrategia de carga de fuentes (font-display: swap), ya que no hay ningún archivo de imagen que descargar.

Flujo de trabajo: Optimizar el retraso de carga

Usa esta dimensión para validar tu estrategia de recursos del frontend.

1. Elimina el lazy loading: Filtra por Lazy Loaded. Si este valor es mayor que 0%, busca el componente que añade loading="lazy" a la imagen principal y quítalo. Esto es común en las plantillas de CMS que aplican lazy loading de forma global a todos los archivos multimedia.
2. Migra a Fetchpriority: Mueve el tráfico de Not Preloaded y Preloaded a High fetchpriority. Reemplazar <link rel="preload"> por fetchpriority="high" limpia tu <head> y acopla la lógica de prioridad directamente al componente.
3. Audita las imágenes de fondo: Si tienes un volumen alto en Not Preloaded y tu LCP es una imagen de fondo, el navegador la está descubriendo demasiado tarde (solo después de analizar el CSS). Debes refactorizar esto a una etiqueta HTML <img> con fetchpriority="high" o forzar una cabecera Preload.

Regla general de ingeniería

Tu objetivo de distribución para esta dimensión es estricto:

• <10% Lazy Loaded
• > 90% High fetchpriority (para LCP de imagen)
• 100% Not an image (para LCP de texto)

Cualquier tráfico que caiga en "Not Preloaded" representa un estado no optimizado en el que estás cediendo el control de la prioridad de los recursos a la heurística predeterminada del navegador.