Optimizing image loading

The product list, which is the landing component of our application, displays an image of each product on the list. How images are loaded in an Angular application can affect CWV metrics such as LCP and CLS. Our application currently loads images as received from the Fake Store API. However, we can use specific Angular artifacts to enforce best practices while loading images.

The Angular framework provides us with the NgOptimizedImage directive, which we can attach to <img> HTML elements:

1. Open the product-list.component.ts file and import the NgOptimizedImage class from the @angular/common npm package:

   import { AsyncPipe, CurrencyPipe, NgOptimizedImage } from '@angular/common';
   

2. Add the NgOptimizedImage class in the imports array of the @Component decorator:

   @Component({
     selector: 'app-product-list',
     imports: [
       SortPipe,
       AsyncPipe,
       CurrencyPipe,
       RouterLink,
       MatMiniFabButton...