Remove loading="lazy" for LCP only

[jesperingels]

As far as I can see you can currently only disable or enable lazy loading for all images.

It would be beneficial for the LCP performance metric to remove loading="lazy" (only for the LCP).

if (strpos($originalTag, 'fetchpriority="high"')) {
    $lazyLoading = '';
}

To solve this you could at the code above here "view/frontend/templates/picture.phtml"

$lazyLoading = ($block->getLazyLoading()) ? ' loading="lazy" ' : '';

$originalTag = trim($block->getOriginalTag());

if (strpos($originalTag, 'fetchpriority="high"')) {
    $lazyLoading = '';
}

$originalTag = preg_replace('/(\/?)>$/', $lazyLoading . '\1>', $originalTag);

$originalImage = $block->getOriginalImage();
$originalImageType = $block->getOriginalImageType();

So if fetchpriority="high" is present on the original image tag loading="lazy" is not added to the new image tag.

Maybe not the cleanest solution but it does give the developer the option to improve their LCP score without disabling lazy loading for all images.

[jissereitsma]

Nice. Your PR has been merged. Let me know if we can close this issue.

[jesperingels]

Hi Jisse, thx for accepting this pull-request! I'm glad to be able to help improve this project. This issue can be closed