`<link preload>` is not inserted when using OptimizeHeroImages(PHP 5.6)

[saywo]

amp-toolbox-version : 0.11.0, 0.10.0, 0.6.0
PHP version : 5.6

<link preload> may not be inserted when using Transformer\OptimizeHeroImages with <amp-img data-hero>. I also use Transformer\ServerSideRendering.

Could you check this problem?

[ediamin]

Hi @saywo Thank you for reporting the issue. In my test, I couldn't reproduce the problem. Could you please share a snippet of your HTML that contains the <amp-img data-hero>? FYI, it should not produce <link preload> instead we should have <link rel="preload">.

[saywo]

@ediamin Thank you for replying and testing.

Sorry for a typo. I wanted to mean <link rel="preload">.

HTML

This is my HTML that contains the <amp-img data-hero>.

<amp-img src="img_url" alt="this is alt" data-hero layout="fixed-height" height="427" class="i-amphtml-layout-fixed-height i-amphtml-layout-size-defined" style="height:427px" i-amphtml-layout="fixed-height" i-amphtml-ssr>
  <img class="i-amphtml-fill-content i-amphtml-replaced-content" decoding="async" alt="this is alt" src="img_url">
</amp-img>

• It also doesn't insert <link rel="preload"> with <amp-img data-hero layout="responsive" >
• I have 2 data-hero elements in my HTML. (only <amp-img data-hero>)

Transformatter configuration.

This is my Transformatter configuration. Others are working well, but OptimizeHeroImages seems not to be working.

$configurationData = [
    Configuration::KEY_TRANSFORMERS => [
      ServerSideRendering::class,
      AmpRuntimeCss::class,
      AutoExtensions::class,
      OptimizeHeroImages::class,
      ReorderHead::class,
      RewriteAmpUrls::class,
      TransformedIdentifier::class,
    ],
  ];

[schlessera]

@saywo The unconditional introduction of preload links for all images had turned to cause more issues than it solved.

A condition has therefore been added that is a prerequisite for adding a preload link: the image needs to have a media attribute to state when it is supposed to be visible. This avoids situations where an image that is not even visible for the current viewport is loaded as a priority, and slows everything else down.

If you add a media attribute to your amp-img, a preload link should be generated as expected.