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-Datarequests, AMP documents, and disallowed URLs.
Configuration
Enable it in the module configuration, at server, virtual-host or location scope:
Apache
ModPagespeedEnableFilters prioritize_critical_imagesnginx
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.
Frequently asked questions
- What does the prioritize_critical_images filter do?
prioritize_critical_imagessetsfetchpriority="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_imagesis not in CoreFilters, the default RewriteLevel; it runs only when you enable it by name withEnableFilters. - How do I enable prioritize_critical_images on Apache and nginx?
- Add
ModPagespeedEnableFilters prioritize_critical_imageson Apache orpagespeed EnableFilters prioritize_critical_images;on nginx. On IIS, addpagespeed EnableFilters prioritize_critical_imagesto pagespeed.config.
Related filters
- convert_gif_to_png — Convert GIF to PNG
- convert_jpeg_to_avif — Convert JPEG to AVIF
- convert_jpeg_to_progressive — Progressive JPEG
- convert_jpeg_to_webp — Convert JPEG to WebP
- convert_png_to_jpeg — Convert PNG to JPEG
- convert_to_avif_animated — Animated AVIF
- convert_to_avif_lossless — Lossless AVIF
- convert_to_webp_animated — Animated WebP
This page is drawn from the prioritize_critical_images entry on Image filters. Every filter in one table: PageSpeed filters.