PHPackages                             friends-of-hyva/magento2-preload-images - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. friends-of-hyva/magento2-preload-images

ActiveMagento2-module

friends-of-hyva/magento2-preload-images
=======================================

Preload images above the fold to improve performance metrics.

1.0.0(3y ago)2314.0k↓25%3[1 issues](https://github.com/friends-of-hyva/magento2-preload-images/issues)BSD-3-ClausePHP

Since Oct 3Pushed 3y ago2 watchersCompare

[ Source](https://github.com/friends-of-hyva/magento2-preload-images)[ Packagist](https://packagist.org/packages/friends-of-hyva/magento2-preload-images)[ RSS](/packages/friends-of-hyva-magento2-preload-images/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependenciesVersions (2)Used By (0)

Preload Images via HTTP Link response header
============================================

[](#preload-images-via-http-link-response-header)

This module was built as an experiment during the MageUnConf Hackathon in Cologne, in September 2022.

The goal is to improve the user experience by loading images that are guaranteed to be displayed above the fold earlier.
The idea came out of interesting discussions with [Tsvetan Stoychev](https://twitter.com/ceckoslab) and his experience working at Akamai on the frontend performance team.

Installation
------------

[](#installation)

Run the command

```
composer require friends-of-hyva/magento2-preload-images
```

Usage:
------

[](#usage)

Import the `FriendsOfHyva\PreloadImages\ViewModel\PreloadImages` view model into your template and call the `add()` method, passing the image URL string as a parameter.

In Hyvä the ViewModelRegistry can be used, with Luma based themes the view model has to be passed into the template as a block argument using Layout XML.

### Hyvä Example:

[](#hyvä-example)

```
/** @var string $imageUrl */
$viewModels->require(PreloadImages::class)->add($imageUrl);
```

Details
-------

[](#details)

The preloading is triggered in the browser by a [`Link`](https://www.incoherent.ch/2021/10/18/http-link-header-early-hints-and-server-push.html) header.

Take this screenshot of a PDP waterfall chart on slow 3G without preloading: [![Load times waterfall chart of a PDP without preloading](./images/pdp-preload-off.png)](./images/pdp-preload-off.png)

You can see the main product image `wp13-orange_main_1.jpg` begins loading shortly after the `portia-capri.html` document is received.
The browser requests the main product image after the css files used by the page.

Here is the screenshot of the same page with preloading: [![Load times waterfall chart of a PDP with preloading](./images/pdp-preload-on.png)](./images/pdp-preload-on.png)

With preloading, the browser requests the main product image before even the css files.

### Be aware!

[](#be-aware)

The feature this module provides is well in the range of micro-optimization, and if used without care can harm a websites SEO metrics.
If preloading an image improves the customer experience or a search engine ranking metric really depends on the site in question and the customer usage base.

Also, it will require a relatively high amount of visitors and careful monitoring to determine if it improves the situation for the majority of visitors.

License
-------

[](#license)

Copyright 2022 Vinai Kopp & Hyvä Themes BV

The module is released under the [BSD-3 Clause license](./LICENSE.txt).

###  Health Score

32

—

LowBetter than 72% of packages

Maintenance19

Infrequent updates — may be unmaintained

Popularity37

Limited adoption so far

Community13

Small or concentrated contributor base

Maturity46

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 88.9% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

1323d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/1905417db5fbd31a61553b29bd441fdc66945da7cfb14f1b20a72275c68184e8?d=identicon)[vinai](/maintainers/vinai)

![](https://www.gravatar.com/avatar/7cd0062c670f61aa554c5d30193848ac11031b6cdb8f8616249b95a235eb475d?d=identicon)[wigman](/maintainers/wigman)

---

Top Contributors

[![Vinai](https://avatars.githubusercontent.com/u/72463?v=4)](https://github.com/Vinai "Vinai (8 commits)")[![septoctobre](https://avatars.githubusercontent.com/u/9363712?v=4)](https://github.com/septoctobre "septoctobre (1 commits)")

### Embed Badge

![Health badge](/badges/friends-of-hyva-magento2-preload-images/health.svg)

```
[![Health](https://phpackages.com/badges/friends-of-hyva-magento2-preload-images/health.svg)](https://phpackages.com/packages/friends-of-hyva-magento2-preload-images)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)