samjuk/m2-module-fetch-priority

Adds ability to set fetch priority attributes, preload/prefetch links for admin content. As well as a public API for extension from 3rd party modules

Maintainers

Package info

github.com/SamJUK/m2-module-fetch-priority

Type:magento2-module

pkg:composer/samjuk/m2-module-fetch-priority

Transparency log

Statistics

Installs: 232

Dependents: 0

Suggesters: 0

Stars: 2

Open Issues: 0


README

Supported Magento Versions CI Workflow Status GitHub Release

This module adds options to set the fetch priority & lazy loading attribute on images added via the admin area.

It also provides a simple API to add preload & prefetch link tags to the header from other modules.

Features

  • Automatic <link rel="preload"> for the product page main image, so the browser fetches it before it discovers the <img> tag.
  • Automatic preload for the first 4 product images in a category grid (above-the-fold products).
  • fetch-priority / loading / preload controls for PageBuilder image content type (desktop & mobile images).
  • Public API (LinkStore + Preload/Prefetch factories) to add your own preload/prefetch links from any module.
  • Every feature above can be toggled independently, or disabled globally, via admin config.

Requirements

  • Magento 2.4.6 - 2.4.8 (see CI matrix badge above)
  • PHP 8.1+

Installation

composer require samjuk/m2-module-fetch-priority
php bin/magento setup:upgrade && php bin/magento cache:flush

Configuration

Settings are available at Stores > Configuration > SamJUK > Fetch Priority.

Path Field Default Description
samjuk_fetch_priority/general/enabled Enable Yes Master switch, disables all preloads when off
samjuk_fetch_priority/preloads/product_main Product Main Image Yes Preload the main image on product view pages
samjuk_fetch_priority/preloads/category_grid First 4 Category Products Yes Preload the first 4 product images on category pages
samjuk_fetch_priority/preloads/pagebuilder_content PageBuilder Content Yes Enable fetch-priority/loading/preload attributes on PageBuilder images

Scope: default / website / store view.

Link Tag Usage

To use this module to add preload/prefetch link tags

Example Preload Usage

class MyClassToAddPreloads
{
     public function __construct(
          private readonly \SamJUK\FetchPriority\Model\LinkStore $linkStore,
          private readonly \SamJUK\FetchPriority\Model\Links\PreloadFactory $preloadFactory
     ) { }

     public function execute()
     {
          // Do Stuff
          $preload = $this->preloadFactory->create([
               'href' => 'https://app.magento2.test/media/my_custom_entity/image1.jpg',
               'mimeType' => \SamJUK\FetchPriority\Enum\Preload\MimeType::ImageJPEG,
               'asType' => \SamJUK\FetchPriority\Enum\Preload\AsType::Image,
               'fetchPriority' => \SamJUK\FetchPriority\Enum\FetchPriority::High
          ]);
          $this->linkStore->add($preload);
     }
}

Example Prefetch Usage

class MyClassToAddPrefetches
{
     public function __construct(
          private readonly \SamJUK\FetchPriority\Model\LinkStore $linkStore,
          private readonly \SamJUK\FetchPriority\Model\Links\PrefetchFactory $preloadFactory
     ) { }

     public function execute()
     {
          // Do Stuff
          $prefetch = $this->preloadFactory->create([
               'href' => 'https://app.magento2.test/media/my_custom_entity/image1.jpg',
          ]);
          $this->linkStore->add($prefetch);
     }
}

Contributing

Bug reports and PRs welcome — see CONTRIBUTING.md.

Security

See SECURITY.md for reporting vulnerabilities.

License

MIT