Dimensión de Core/Dash: LCP Priority

Dimensión: Recurso: LCP Priority

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

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

La jerarquía de prioridades

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/High Priority).

Contexto: Cuando un usuario regresa a su 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á por debajo del pliegue (below the fold), su 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 "Not Preloaded" en su conjunto de datos. ¡Y eso está perfectamente bien!

1. Lazy Loaded

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

La solución: Debe eliminar este atributo de carga. El elemento LCP nunca debe cargarse de forma diferida (lazy-loaded).

<!-- 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 su página web. La imagen LCP entra en una cola de contención de recursos. Si su página tiene muchos scripts, fuentes, otras imágenes sin lazy loading o estilos para descargar, el navegador puede retrasar la descarga de esta imagen, aumentando el Load Delay.

3. Preloaded

Esto indica que el recurso se descubrió a través de una etiqueta <link rel="preload"> en el head del documento. Estos enlaces de precarga básicamente significan un descubrimiento temprano, incluso si la referencia de la imagen está enterrada profundamente en el DOM u oculta en un archivo CSS (imagen de fondo).

La precarga es la forma más eficaz de forzar una descarga temprana, pero requiere mantener una etiqueta de enlace separada que debe coincidir exactamente con la URL de la imagen. Si se desincronizan, descargará el mismo activo dos veces.

4. High fetchpriority

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

La estrategia: Este es el estado objetivo para un 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 que implican 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 sin procesar. Este es el estado arquitectónico ideal porque el texto incurre en un Load Delay nulo (ya está presente en el documento HTML).

La optimización: Si su LCP está en esta categoría pero sigue siendo lento, el cuello de botella es exclusivamente el Render Delay. Debe optimizar su Critical Rendering Path (bloqueo de CSS/JavaScript) o su estrategia de carga de fuentes (font-display: swap), ya que no hay ningún archivo de imagen para descargar.

Flujo de trabajo: Optimización del Load Delay

Utilice esta dimensión para validar su estrategia de recursos del frontend.

1. Elimine el Lazy Loading: Filtre por Lazy Loaded. Si este valor es superior al 0%, encuentre el componente que agrega loading="lazy" a la imagen hero y elimínelo. Esto es común en las plantillas de CMS que aplican lazy loading de forma global a todos los medios.
2. Migre a Fetchpriority: Mueva el tráfico de Not Preloaded y Preloaded a High fetchpriority. Reemplazar <link rel="preload"> con fetchpriority="high" limpia su <head> y acopla la lógica de prioridad directamente al componente.
3. Audite las imágenes de fondo: Si tiene un alto volumen en Not Preloaded y su LCP es una imagen de fondo, el navegador la está descubriendo demasiado tarde (solo después de analizar el CSS). Debe refactorizar esto a una etiqueta HTML <img> con fetchpriority="high" o forzar un encabezado Preload.

Regla general de ingeniería

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

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

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