Image lazy code is slow about angular-movies-perf

[BioPhoton]

Implemented directive for lazy loading images:

import {Directive, ElementRef} from '@angular/core';

@Directive({
  selector: 'img'
})
export class LazyImgDirective {

  constructor(private elem: ElementRef) {
    this.elem.nativeElement.setAttribute('loading', 'lazy');
    console.log(this.elem.nativeElement);

  }

}

<img
       [src]="'https://image.tmdb.org/t/p/w' +
          W342H513.WIDTH +
          '/' +
          movie.poster_path
        "
        [width]="W342H513.WIDTH"
        [height]="W342H513.HEIGHT"
        alt="poster movie"
        [title]="movie.title"
      />

Stats:
List rendering 180ms

Used HTML attribute:

<img
       loading="lazy"
       [src]="'https://image.tmdb.org/t/p/w' +
          W342H513.WIDTH +
          '/' +
          movie.poster_path
        "
        [width]="W342H513.WIDTH"
        [height]="W342H513.HEIGHT"
        alt="poster movie"
        [title]="movie.title"
      />

Stats:
List rendering 144ms

Used href directly

 <a
        class="movies-list--grid-item"
        *ngFor="let movie of movies; trackBy: movieById"
        [href]="'/movie/' + movie.id"
      >
    <img loading="lazy">
</a>

Stats:
List rendering 123ms