Skip to main content

Image Preload Hints

Issue No: 115

Category: Resource Hints & Performance Issue Type: Issue Priority: Important

Description​

Pages with above-fold images should declare <link rel="preload" as="image"> tags so the browser fetches those images at high priority during HTML parsing, reducing render latency for critical visual content.

Crawler Constraint: The XeoPix crawler can detect <link rel="preload" as="image"> tags in raw HTML and count <img> elements. It cannot determine which specific image is the LCP element — that requires browser rendering and layout measurement. The trigger fires when the page contains <img> elements but declares no image preload hint.

How Do We Capture It​

Where to Find​

Inside HTML <head>:

<link rel="preload" as="image" href="/images/hero.webp">

<!-- With responsive image support -->
<link rel="preload"
      as="image"
      href="/images/hero-800.webp"
      imagesrcset="/images/hero-400.webp 400w, /images/hero-800.webp 800w"
      imagesizes="100vw">

HTML Extraction Flow​

The XeoPix crawler downloads the raw HTML response and parses the <head> block:

  1. Issues an HTTP GET to the target URL.
  2. Reads raw response bytes without JavaScript execution.
  3. Scans the <head> block for all <link rel="preload"> tags.
  4. Filters for tags where the as attribute equals image.
  5. Extracts the href, imagesrcset, and imagesizes attributes from each matched tag.
  6. Records the count and full list of preloaded image URLs.

Validation Logic​

The crawler validates:

  • Whether any <link rel="preload" as="image"> tag exists.
  • Whether the href is a valid non-empty URL.

How to Get It​

Crawler should:

  1. Parse raw HTML <head>.
  2. Find all: link[rel="preload"][as="image"].
  3. Extract href, imagesrcset, imagesizes from each.
  4. Count and store all matched entries.

What to Store​

FieldTypeComment
has_image_preloadBOOLEANWhether any image preload link tag is declared in the page head
preload_image_hrefsTEXT[]Array of image href values declared in preload tags
preload_image_countINTNumber of image preload link tags found on the page
preload_image_has_srcsetBOOLEANWhether any image preload tag declares an imagesrcset attribute for responsive images
img_total_countINTTotal number of img elements found in the page HTML
has_imgs_and_no_image_preloadBOOLEANWhether the page has img elements but no image preload hint declared in the head

Condition for Trigger​

The following trigger rule fires only when the page contains img elements but no image preload hint is declared.

  • Trigger Rule 1: Page Has Images But No Image Preload Hint
    • Target Field: has_imgs_and_no_image_preload
    • Evaluation Logic: = TRUE
    • Severity: WARNING
    • Diagnostic Message: "This page contains img elements but declares no image preload hint. Above-fold images benefit significantly from a preload hint, which instructs the browser to fetch the image at the highest priority during HTML parsing rather than waiting until the render tree is built."

Sources​

Long Description​

The Largest Contentful Paint (LCP) metric measures how long it takes for the largest visible element in the viewport to fully render. For most pages, the LCP element is a hero image displayed above the fold. Google uses LCP as a Core Web Vital — a ranking signal in Search.

Without an image preload hint, the browser's typical image discovery sequence is:

  1. Browser downloads and parses the HTML.
  2. Browser encounters a <link rel="stylesheet"> and downloads the CSS.
  3. CSS is parsed; browser discovers background-image: url(hero.webp) in the CSS.
  4. Only now does the browser request the hero image.

This late discovery adds a full CSS download + parse round trip before the LCP image begins downloading — directly harming LCP time.

With <link rel="preload" as="image"> in <head>:

  1. Browser begins parsing HTML.
  2. Immediately on discovering the preload tag, the browser queues a high-priority fetch for the image.
  3. The image download begins in parallel with CSS and other resources.
  4. By the time rendering reaches the LCP element, the image is already downloaded or close to it.

Responsive image preloading:

For pages using <picture> or srcset, the imagesrcset and imagesizes attributes on the preload tag tell the browser which image variant to preload based on viewport width:

<link rel="preload"
      as="image"
      href="/images/hero-800.webp"
      imagesrcset="/images/hero-400.webp 400w, /images/hero-800.webp 800w"
      imagesizes="100vw">

Common failure scenarios:

1. Hero Image in CSS Background Without Preload​

The LCP image is set as a background-image in CSS. Without a preload hint, the browser cannot discover the image until the CSS is fully downloaded and parsed.

2. Hero Image in HTML Without Preload​

<!-- Image discoverable from HTML but still benefits from preload -->
<img src="/images/hero.webp" alt="Hero">

Even when an image is in the HTML, without a preload hint it competes equally with all other resources. The preload hint elevates it to the highest fetch priority.

3. Hero Image Loaded via JavaScript​

If the image is injected by JavaScript, the crawler cannot capture it. This is a known constraint — the preload hint must still be declared in the HTML <head> to be effective.

4. Preload Declared for Wrong Image​

A preload hint exists but points to a decorative image, not the LCP hero. The crawler cannot detect this without browser rendering.

How to Fix​

Add a <link rel="preload" as="image"> tag for the hero image in the page <head>:

<!-- For a single hero image -->
<link rel="preload" as="image" href="/images/hero.webp">

<!-- For responsive hero images -->
<link rel="preload"
      as="image"
      href="/images/hero-800.webp"
      imagesrcset="/images/hero-400.webp 400w, /images/hero-800.webp 800w"
      imagesizes="(max-width: 600px) 400px, 800px">

Guidelines:

  • Only preload the single most critical above-fold image (the LCP element).
  • Do not preload multiple images — this dilutes the priority benefit.
  • Match the href to the exact URL the browser would request (same format as the src or srcset).
  • Place the preload tag as early as possible in <head>, before any render-blocking resources.
  • If the image format is WebP or AVIF, include a type attribute: type="image/webp".