FetchPriority Featured Image
FetchPriority Featured Image is a self-learning LCP (Largest Contentful Paint) optimizer. Instead of guessing which image is your hero like every other plugin, it measures the real LCP element from your actual visitors (via the browser’s PerformanceObserver), learns it per template, and then automatically applies fetchpriority="high" plus a <link rel="preload"> to that exact image — whether it’s a normal <img> or a CSS background-image. It self-corrects as your design and content change, with zero configuration.
What makes it different
- Self-learning real LCP — no competitor in this space measures field LCP from real users and auto-targets it. Most plugins blindly prioritize the featured image and hope it’s the hero.
- CSS background-image preload — hero sliders and background heroes are a blind spot for most performance plugins; this preloads them.
- Visual LCP picker — click your hero element on the front end to lock it in as a manual override per template.
- Built-in Core Web Vitals before/after report — pulls real-world LCP, INP, and CLS from the Chrome UX Report so you can prove the impact.
- Per-template control — Auto / Learned-only / Manual-only / Off for every template the plugin sees.
Key Features
- Self-learning LCP detection from real-user field data (PerformanceObserver beacon), aggregated per template
- Visual click-to-pick LCP element on the front end (admin-bar → « Pick LCP element »)
- Core Web Vitals before/after report via the Chrome UX Report (CrUX) API
- Preloads + prioritizes the measured LCP, including CSS
background-imageheroes - Per-template modes: Auto, Learned-only, Manual-only, Off
- Automatically adds
fetchpriority="high"to the hero / featured image - Optional
fetchpriority="low"for below-fold images — paired complement that tells the browser to defer non-critical loads <link rel="preload" as="image">for the hero featured image on singular pages — strongest LCP signal- AVIF / WebP detection — when a sibling
.avif/.webpfile exists on disk, an extra<link rel="preload" type="image/avif|image/webp">is emitted so the browser picks the supported modern format automatically (works with ShortPixel, Imagify, Optimole, and similar) - Theme presets — auto-detects Astra, GeneratePress, Kadence, Divi, and Hello Elementor and excludes their site-logo / header-image classes so the priority budget is spent on the real hero
- Avatar / Gravatar exclusion — never tags images with class
avatar/gravataror hosted on gravatar.com - Settings page (Settings → FetchPriority) for per-context toggles, first-N control, preload, and exclusions
- Admin-bar debug badge showing how many images were tagged on the current page (total + how many got
high) - Compatible with most WordPress themes including Divi, Elementor, Astra, GeneratePress, Kadence, and any theme using standard
the_post_thumbnail()/wp_get_attachment_image()
Why Use FetchPriority?
The fetchpriority attribute is a modern web standard that tells browsers which images should be prioritized during page load. By marking featured images as high priority, you can improve:
- Largest Contentful Paint (LCP) scores
- User experience with faster loading of important images
- Overall page performance
Developer-Friendly
The plugin uses WordPress’s native filters and doesn’t modify your database or image files.
