Core/Dash Dimension: LCP Priority

Dimension: Resource: LCP Priority

The LCP Priority dimension segments performance data based on how the browser discovered and prioritized the LCP resource. While the "Element Type" dimension tells you what the element is (Text vs. Image), this dimension tells you why the browser delayed loading it.

This is your primary audit tool for Load Delay. It exposes whether your LCP asset is fighting for bandwidth or is being artificially delayed by incorrect HTML attributes.

The Priority Hierarchy

The browser assigns a download priority to every resource. This dimension maps the LCP element to one of five specific loading states, ranked from most destructive (Lazy Loaded) to most optimal (Text/High Priority).

Background: When a user returns to your page via the "Back" or "Reload" button,  most browsers return them to their previous vertical position. If this position is below the fold, your optimized Hero Image is no longer the LCP. Instead, the browser measures the largest element in the current viewport. This creates an unavoidable set of "Not Preloaded" events in your dataset.  And that is perfectly fine!

1. Lazy Loaded 

If more the 10% of your LCP elementw appears in this bucket, you have identified a problem. Lazy loading images are enqueued much later (by the slow DOM parser and not the fast preload scanner). The loading="lazy" attribute  instructs the browser to wait witht he  the download until the layout is calculated and the element is near the viewport.

The Fix: You must remove this loading attribute. The LCP element should never be lazy-loaded.

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

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

2. Not Preloaded

This represents the default browser behavior. The browser discovered the image in the HTML during the initial parse but was not given any signal to prioritize it over other images.

The impact on pagespeed depends on the complexity of your web page. LCP image enters a resource contention queue. If your page has many scripts, fonts, other non-lazy images or styles to download the browser may delay downloading this image, increasing Load Delay.

3. Preloaded

This indicates the resource was discovered via a <link rel="preload"> tag in the document head. This preload links basically means an early discovery, even if the image reference is buried deep in the DOM or hidden in a CSS file (background image).

Preloading is the most effective way to force an early download, preloading requires maintaining a separate link tag that must match the image URL exactly. If they drift apart, you double-download an asset.

4. High fetchpriority

This is the modern engineering standard. The browser was instructed via the fetchpriority="high" attribute to treat this specific image as a critical resource.

The Strategy: This is the target state for image-based LCP. It signals importance directly on the element, boosting it above other assets in the download queue without the maintenance overhead of manual preload tags.

5. Not an Image

Status: Text Node / SVG

The LCP element is a block of text (h1, p) or a raw SVG. This is the ideal architectural state because text incurs zero Load Delay (it is already present in the HTML document).

The Optimization: If your LCP is in this category but still slow, the bottleneck is exclusively Render Delay. You must optimize your Critical Rendering Path (CSS/JS blocking) or your font loading strategy (font-display: swap), as there is no image file to download.

Workflow: Optimizing Load Delay

Use this dimension to validate your frontend resource strategy.

1. Eliminate Lazy Loading: Filter by Lazy Loaded. If this value is greater than 0%, find the component adding loading="lazy" to the hero image and strip it. This is common in CMS templates that apply lazy loading globally to all media.
2. Migrate to Fetchpriority: Move traffic from Not Preloaded and Preloaded to High fetchpriority. Replacing <link rel="preload"> with fetchpriority="high" cleans up your <head> and couples priority logic directly to the component.
3. Audit Background Images: If you have high volume in Not Preloaded and your LCP is a background image, the browser is discovering it too late (only after CSS is parsed). You must refactor this to an HTML <img> tag with fetchpriority="high" or force a Preload header.

Engineering Rule of Thumb

Your distribution goal for this dimension is strict:

• <10% Lazy Loaded
• > 90% High fetchpriority (for Image LCPs)
• 100% Not an image (for Text LCPs)

Any traffic falling into "Not Preloaded" represents an unoptimized state where you are surrendering control of resource priority to the browser's default heuristics.