On a product page the main image is usually the largest thing above the fold, and so are the first few products in a category grid. The browser only discovers those images when the HTML parser reaches each <img> tag. A <link rel="preload"> in <head> lets it start the download earlier, and fetchpriority tells it which images matter most.
This module adds both, with switches in the admin and a shared way for other modules to add their own hints.
What does it add to the page?
Up to three kinds of image hint, each toggled separately under Stores > Configuration > SamJUK > Fetch Priority, at default, website or store view scope. All are on by default, and a master switch turns everything off.
| Feature | Config path | What it adds |
|---|---|---|
| Product main image | samjuk_fetch_priority/preloads/product_main | A preload for the main image on product pages |
| Category grid | samjuk_fetch_priority/preloads/category_grid | Preloads for the first four product images in the grid |
| Page Builder images | samjuk_fetch_priority/preloads/pagebuilder_content | fetchpriority, loading and preload controls on the image content type, desktop and mobile |
How do I install Fetch Priority?
composer require samjuk/m2-module-fetch-priority
php bin/magento setup:upgrade && php bin/magento cache:flush
It supports Magento 2.4.6 to 2.4.8 on PHP 8.1 and above.
How do the hints get into <head>?
Each feature queues its links in a shared LinkStore during the request, and one observer writes them all into <head> before the response goes out.
- Product pages: an observer on
catalog_controller_product_viewqueues the main image. - Category pages: an after plugin on the product list toolbar’s
setCollectionqueues the first four products, once the sort order has been applied. - Page Builder: an observer on
view_block_abstract_to_html_afterfinds images marked for preload and queues each with a media query for its desktop or mobile version.
The writer listens on controller_front_send_response_before and inserts the links straight after the opening <head> tag, on frontend responses only.
Can other modules add their own preloads?
Yes. Rather than each module writing to <head> its own way, they share the same LinkStore, with Preload and Prefetch factories. Trimmed from the README:
$preload = $this->preloadFactory->create([
'href' => 'https://app.magento2.test/media/my_custom_entity/image1.jpg',
'asType' => \SamJUK\FetchPriority\Enum\Preload\AsType::Image,
'fetchPriority' => \SamJUK\FetchPriority\Enum\FetchPriority::High,
]);
$this->linkStore->add($preload);
How many category images does it preload?
The first four products, fixed, with no setting to change it. No before and after LCP measurements are published for the module yet.
CI runs linting, static analysis and unit tests against Magento 2.4.6-p15, 2.4.7-p10 and 2.4.8-p5. The latest run on master, from 17th September 2026, passed.