Skip to main content

filter · Image filters

Prioritize critical images (prioritize_critical_images)

Category:
Image
CoreFilters:
No
OptimizeForBandwidth:
No
Risk:
Test first

prioritize_critical_images sets fetchpriority="high" on the images the critical-images beacon has reported above the fold, so the browser front-loads the fetches that most influence Largest Contentful Paint. It is beacon-driven: the page is instrumented, real browsers report which images render above the fold, and the attribute is applied on subsequent responses. It rewrites attributes only and injects no scripts.

How it works

Enabling the filter also turns on critical-images beaconing.

The filter is a strict no-op until beacon data is available — with no data it would have to guess, and a wrong guess would prioritize a below-the-fold image at the real LCP image’s expense. An author-supplied fetchpriority always wins, so hand-tuned markup is left untouched.

This filter is opt-in and is not part of any rewrite level. Enable it by name.

When to use it

  • Not in CoreFilters: it runs only when you enable it by name.
  • Risk rating on these docs: Test first.

Risks

  • Above-fold detection is data-driven and imperfect. The strict no-op-without-data behavior avoids the worst case, but on unusual layouts the beacon may still flag an image that is not truly the largest one.

  • The filter backs off on Save-Data requests, AMP documents, and disallowed URLs.

Configuration

Enable it in the module configuration, at server, virtual-host or location scope:

Apache

ModPagespeedEnableFilters prioritize_critical_images

nginx

pagespeed EnableFilters prioritize_critical_images;

IIS (pagespeed.config)

pagespeed EnableFilters prioritize_critical_images

Scoping, ForbidFilters and the thresholds filters read: Choosing filters .

Live example

Marks the largest above-the-fold image fetchpriority=high so the browser loads it first.

mod_pagespeed applies this only after a real browser loads the page and reports back, so the example shows it live rather than as a captured diff.

See the before and after, with the source diff →

Frequently asked questions

What does the prioritize_critical_images filter do?
prioritize_critical_images sets fetchpriority="high" on the images the critical-images beacon has reported above the fold, so the browser front-loads the fetches that most influence Largest Contentful Paint. It is beacon-driven: the page is instrumented, real browsers report which images render above the fold, and the attribute is applied on subsequent responses. It rewrites attributes only and injects no scripts.
Is prioritize_critical_images enabled by default?
No. prioritize_critical_images is not in CoreFilters, the default RewriteLevel; it runs only when you enable it by name with EnableFilters.
How do I enable prioritize_critical_images on Apache and nginx?
Add ModPagespeedEnableFilters prioritize_critical_images on Apache or pagespeed EnableFilters prioritize_critical_images; on nginx. On IIS, add pagespeed EnableFilters prioritize_critical_images to pagespeed.config.

This page is drawn from the prioritize_critical_images entry on Image filters. Every filter in one table: PageSpeed filters.

Search