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

> Preload images above the fold to improve performance metrics.

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

Canonical URL: https://packagento.com/friends-of-hyva/magento2-preload-images

## At a glance

- **Vendor**: friends-of-hyva (https://packagento.com/friends-of-hyva.md)
- **Latest version**: 1.0.0 — released 2022-10-03
- **Pricing**: Free
- **Package type**: Magento 2 module
- **Status**: active, accepting new buyers

## Installation

Packagento is licence-gated, so even free packages need a licence on a project before Composer can resolve them.

1. **Sign in or create an account** at https://packagento.com/customer/account/.

2. **Add the package to your account.** Open https://packagento.com/friends-of-hyva/magento2-preload-images and complete the free checkout. A licence is minted automatically.

3. **Create or pick a project, then activate the licence on it.**
   - Projects represent the Magento installs you deploy to. Manage them at https://packagento.com/projects/.
   - Activate the new licence on the project you'll deploy this package to. Activation is what generates the Composer credentials scoped to that project.

4. **Add the project credentials to your Magento codebase.**

   Grab the project's public + private key from https://packagento.com/projects/ (open the project, then its Credentials tab), and add them to `auth.json`:

   ```json
   {
     "http-basic": {
       "packagento.com": {
         "username": "ppk_live_...",
         "password": "psk_live_..."
       }
     }
   }
   ```

   Add the Packagento Composer repository to `composer.json`:

   ```json
   {
     "repositories": [
       { "type": "composer", "url": "https://packagento.com" }
     ]
   }
   ```

5. **Install and apply.**

   ```bash
   composer require friends-of-hyva/magento2-preload-images:*
   bin/magento setup:upgrade
   bin/magento setup:di:compile
   bin/magento cache:flush
   ```

## What it does

Preload images above the fold to improve performance metrics.

## README

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

Run the command

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

### Usage:

Import the `Hyva\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:

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


### 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)

You can see the main product image `wp13-orange_maim_1.jpg` begins loading shortly after the `protia-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)
With preloading, the browser requests the main product image before even the css files.

#### 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

Copyright 2022 Vinai Kopp & Hyvä Themes BV

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

## Recent Versions

| Version | Released |
|---|---|
| 1.0.0 | 2022-10-03 |

## Quality

Latest release (1.0.0) passes the Packagento QA pipeline. Verdicts below are per-cell (Magento line × PHP version) for the matrixed tools, and run-once for the static / security tiers.


### Compatibility

Each Magento line is installed on its supported PHP versions, then the module is built (DI compile + static-content deploy). Cells show passed / failed / untested; staircase gaps render as `–`.

| Magento | PHP 8.2 | PHP 8.3 | PHP 8.4 | PHP 8.5 |
|---|---|---|---|---|
| 2.4.7 | Pass | Pass | – | – |
| 2.4.8 | – | Pass | Pass | – |
| 2.4.9 | – | – | Pass | Pass |


### Code Quality

Advisory checks against the module's source. Never affect the Compatibility verdict — a phpcs finding can't make a module incompatible.

#### Static Analysis

Coding standards (phpcs), mess detection (phpmd), copy-pasted code (cpd), PHP cross-version compatibility, composer.json validity. Each runs once for the whole module.

| Tool | Status | Findings | Summary |
|---|---|---|---|
| PHPCS | Warning | 1 | 1 warning (ruleset: Magento2) |
| PHPMD | Warning | 1 | 1 rule violation (UnusedPrivateMethod:1) |
| Cpd | Pass | 0 |  |
| Composer validate | Pass | 0 |  |

#### PHPStan

Type-checks the module against a real Magento install. Re-runs per Magento + PHP version because resolvable symbols differ between releases.

| Magento | PHP 8.2 | PHP 8.3 | PHP 8.4 | PHP 8.5 |
|---|---|---|---|---|
| 2.4.7 | Pass | Pass | – | – |
| 2.4.8 | – | Pass | Pass | – |
| 2.4.9 | – | – | Pass | Pass |


### Tests

Unit and integration suites run per Magento + PHP cell. Test failures speak to the module's behaviour, not its compatibility with a line, so they're reported here separately.

#### Unit Tests

| Magento | PHP 8.2 | PHP 8.3 | PHP 8.4 | PHP 8.5 |
|---|---|---|---|---|
| 2.4.7 | N/A | N/A | – | – |
| 2.4.8 | – | N/A | N/A | – |
| 2.4.9 | – | – | N/A | N/A |

#### Integration Tests

| Magento | PHP 8.2 | PHP 8.3 | PHP 8.4 | PHP 8.5 |
|---|---|---|---|---|
| 2.4.7 | N/A | N/A | – | – |
| 2.4.8 | – | N/A | N/A | – |
| 2.4.9 | – | – | N/A | N/A |


### Security

Dependency-advisory audit (composer audit) plus a source malware scan. A malware detection fails the version outright.

| Tool | Status | Findings | Summary |
|---|---|---|---|
| Composer audit | Pass | 0 |  |
| Malware scan | Pass | 0 |  |

## Licence and pricing

Free. A licence is still minted on checkout and bound to your project for Composer access — no payment step.

Refundable within 14 days of first purchase via https://packagento.com/account/refunds/.

## Install via Claude Code or any MCP client

The Packagento MCP server can run the licence + project + Composer steps above in one tool call:

```
purchase_and_install_packages(
  composer_names=["friends-of-hyva/magento2-preload-images"],
  project_id="proj_xxx"
)
```

This handles cart, checkout, licence minting, project activation, and writes auth.json credentials. Connect a client with `claude mcp add packagento https://mcp.packagento.com`. Full setup at https://packagento.com/docs/mcp-setup.

## Vendor

friends-of-hyva is a Magento 2 vendor on Packagento. See https://packagento.com/friends-of-hyva.md for their full catalogue.