pagespeedfr/lcpimage

Magento 2 Lcp preload image on each page / resize image and transform into webp with yireo for google page speed test

1.0.1 2025-06-04 10:30 UTC

GPL-3.0

• pagespeedfr

README

Pagespeedfr_Lcpimage LCP Module for Magento 2: Add preload image support on CMS pages, category pages, product pages, and custom pages with code-based selection, image resizing, 2x support, and compatibility with both Yireo_Webp2 and Amasty Image Optimizer.

✅ Compatible with Hyvä

Recommendation For optimal Google PageSpeed results and full compatibility with this module, I recommend the free plugin: 👉 Yireo_Webp2

Features When enabled, the module:

Adds tags for LCP images.

Default Behavior

By default, the module automatically adds a preload link on:

Product pages → preloads the first main product image.

Category pages → preloads the first image in the product listing.

For Other page -> Allows you to choose which image to preload for each controller. Example:

(cms_index_index,//main[@id="maincontent"]//picture/source,srcset ->here take the first picture on home page of maincontent)

Supports cases where you have separate images for desktop and mobile, for example on the catalog_category_view layout.

In such cases, you can define a selector like : catalog_category_view,//div[@class="top-container"]//picture/source2,srcset

The module :

• add, on Cms page and category page admin edit, a field "lcp mobile" and "lcp desktop" if it fill it's that url who is preload.
• look if they are a transformation in webp by amasty or yireo and put it in consequently.
• can resize image with helper $imageHelperLcp = $this->helper('Pagespeedfr\Lcpimage\Helper\Image'); $imageUrlResize = $imageHelperLcp->resize($urlimage,$width,$height);
• can transform image in webp with $imageHelperLcp->webpGoOn($imageUrl2x); using Yireo

🛠 INSTALLATION

Manual Installation

Download and unzip the module in: app/code/Pagespeedfr/Lcpimage/ (Create folders if they don't exist)

With composer : composer require pagespeedfr/lcpimage

Then php bin/magento s:up php bin/magento setup:db-declaration:generate-whitelist --module-name=Pagespeedfr_Lcpimage

After go to admin > stores > configuration > PAGESPEEDFR > lcpimage and enable it you can add the demo test on homepage for resize banner image webp on module directory : Pagespeedfr/Lcpimage/view/frontend/layout/cms_index_index.xml and uncomment the block with name test_lcp_image

🔄 Updates For updates, please open an issue on the repository.

OSL-3.0 Licence