Remove lazy loading from first image in loop

The CMS Questions
1

I use the code below to display multiple images on one page. As you can see I use browser-side lazy loading via loading="lazy". This leads to the problem that my Largest Contentful Paint is loaded via lazy loading and this leads to poor performance.

I have tried the following so that the first image is not loaded with a delay via lazy loading:

<?php if($image->is($article->images()->first())): ?>
   loading="eager"
<?php else: ?>
   loading="lazy"
<?php endif ?>

This did not cause any errors, but also had no effect at all.

What would be the right way?
Many thanks in advance!

The entire code:

<ul class="gallery">

    <?php foreach ($article->images() as $image) : ?>

      <li>

<?php if ($image->orientation() == 'landscape') : ?>
        
            <?php
      $sizes = "
      (min-width: 100rem) 40vw,
      (min-width: 75rem) 50vw,
      (min-width: 50rem) 60vw,
      (min-width: 40rem) 70vw,
      100vw";

      if ($image = $image): ?>
          <picture> 
            <source
                  srcset="<?= $image->srcset('avif') ?>"
                  sizes="<?= $sizes ?>"
                  type="image/avif"
              >
              <source
                  srcset="<?= $image->srcset('webp') ?>"
                  sizes="<?= $sizes ?>"
                  type="image/webp"
              >
              <img class="landscape" 
                loading="lazy"
                alt="<?= $article->date()->toDate('Y m d') ?>" 
                title="<?= $article->date()->toDate('Y m d') ?>"
                  src="<?= $image->resize(400)->url() ?>"
                  srcset="<?= $image->srcset() ?>"
                  sizes="<?= $sizes ?>"
                  width="<?= $image->resize(2160)->width() ?>"
                  height="<?= $image->resize(2160)->height() ?>"
              >
          </picture>
      <?php endif ?>

<?php else : ?>

  <?php
      $sizes = "
      (min-width: 100rem) 25vw,
      (min-width: 75rem) 30vw,
      (min-width: 50rem) 35vw,
      (min-width: 40rem) 40vw,
      100vw";

      if ($image = $image): ?>
          <picture> 
            <source
                  srcset="<?= $image->srcset('avif') ?>"
                  sizes="<?= $sizes ?>"
                  type="image/avif"
              >
              <source
                  srcset="<?= $image->srcset('webp') ?>"
                  sizes="<?= $sizes ?>"
                  type="image/webp"
              >
              <img class="portrait"
                loading="lazy"
                alt="<?= $article->date()->toDate('Y m d') ?>" 
                title="<?= $article->date()->toDate('Y m d') ?>"
                  src="<?= $image->resize(400)->url() ?>"
                  srcset="<?= $image->srcset() ?>"
                  sizes="<?= $sizes ?>"
                  width="<?= $image->resize(2160)->width() ?>"
                  height="<?= $image->resize(2160)->height() ?>"
              >
          </picture>
      <?php endif ?>

<?php endif ?>

</li>
    <?php endforeach ?>

  </ul>
2

Where are you using this? Can’t see it in the code

But you should set the attribute value right after the loop, before the if statement, otherwise it might not work as expected.

BTW: What is this good for?

3

I hardly dare to admit it: I had simply shoved it into the img tag instead of loading="lazy" :

<img class="portrait"

   <?php if($image->is($article->images()->first())): ?>
   loading="eager"
   <?php else: ?>
   loading="lazy"
   <?php endif ?>

   alt="<?= $article->date()->toDate('Y m d') ?>" 
   title="<?= $article->date()->toDate('J a m d') ?>"
   src="<?= $image->resize(400)->url() ?>"
   srcset="<?= $image->srcset() ?>"
   sizes="<?= $sizes ?>"
   width="<?= $image->resize(2160)->width() ?>"
   height="<?= $image->resize(2160)->height() ?>"
>

Which admittedly felt relatively wrong even to me and would probably give any serious developer a moderate heart attack… What would be the right way?

And regarding your second question:

This is purely to make my lack of development skills even more obvious. Presumably these are the remnants of some other unsuccessful attempt. Aham. Thank you for the hint. :upside_down_face:

4

What I’d suggest:
Right after this loop and before anything else:

<?php foreach ($article->images() as $image) : ?>
<?php $loading = ($image === $article->images()->first()) ? 'eager' : 'lazy'; ?>

Then instead of

loading="<?= $loading ?>"
5

Awesome, thank you very much - once again!