Dimensión Core/Dash: Prioridad del LCP

Dimensión: Recurso: Prioridad del LCP

La dimensión Prioridad del LCP segmenta los datos de rendimiento basándose en cómo el navegador descubrió y priorizó el recurso LCP. Mientras que la dimensión "Tipo de Elemento" te dice qué es el elemento (Texto vs. Imagen), esta dimensión te dice por qué el navegador retrasó su carga.

Esta es tu herramienta de auditoría principal para el Retraso de Carga. Expone si tu activo LCP está luchando por el ancho de banda o si está siendo retrasado artificialmente por atributos HTML incorrectos.

La Jerarquía de Prioridad

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

Contexto: Cuando un usuario regresa a tu página mediante el 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á por debajo del pliegue (below the fold), 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 crea un conjunto inevitable de eventos "No Precargado" en tu conjunto de datos.  ¡Y eso está perfectamente bien!

1. Lazy Loaded 

Si más del 10% de tus elementos LCP aparecen en este grupo, has identificado un problema. Las imágenes con lazy loading se ponen en cola mucho más tarde (por el lento analizador del DOM y no por el rápido escáner de precarga). El atributo loading="lazy" indica al navegador que espere con la  descarga hasta que se calcule el diseño y el elemento esté cerca del viewport.

La Solución: Debes eliminar este atributo de carga. El elemento LCP nunca debe tener lazy-loading.

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

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

2. No Precargado (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 sitio web. La imagen LCP entra en una cola de contención de recursos. Si tu página tiene muchos scripts, fuentes, otras imágenes no lazy o estilos para descargar, el navegador puede retrasar la descarga de esta imagen, aumentando el Retraso de Carga.

3. Precargado (Preloaded)

Esto indica que el recurso fue descubierto a través de una etiqueta <link rel="preload"> en el head del documento. Estos enlaces de precarga significan básicamente un descubrimiento temprano, incluso si la referencia de la imagen está enterrada profundamente en el DOM o oculta 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 separada que debe coincidir exactamente con la URL de la imagen. Si discrepan, descargarás el activo dos veces.

4. High fetchpriority

Este es el estándar de ingeniería moderno. Se instruyó al navegador a través del atributo fetchpriority="high" para tratar esta imagen específica como un recurso crítico.

La Estrategia: Este es el estado objetivo para el LCP basado en imágenes. Señala la importancia directamente en el elemento, impulsándolo por encima de otros activos en la cola de descarga sin la sobrecarga de mantenimiento de las etiquetas de precarga manuales.

5. No es una Imagen

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 incurre en cero 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 tu 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 para descargar.

Flujo de Trabajo: Optimizando el Retraso de Carga

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

1. Elimina el Lazy Loading: Filtra por Lazy Loaded. Si este valor es mayor al 0%, encuentra el componente que añade loading="lazy" a la hero image y elimínalo. Esto es común en plantillas de CMS que aplican lazy loading globalmente a todos los medios.
2. Migra a Fetchpriority: Mueve el tráfico de No Precargado y Precargado a High fetchpriority. Reemplazar <link rel="preload"> con fetchpriority="high" limpia tu <head> y acopla la lógica de prioridad directamente al componente.
3. Audita Imágenes de Fondo: Si tienes un alto volumen en No Precargado 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 un encabezado Preload.

Regla General de Ingeniería

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

• <10% Lazy Loaded
• > 90% High fetchpriority (para LCPs de Imagen)
• 100% No es una imagen (para LCPs de Texto)

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