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:
- Open the
product-list.component.tsfile and import theNgOptimizedImageclass from the@angular/commonnpm package:import { AsyncPipe, CurrencyPipe, NgOptimizedImage } from '@angular/common'; - Add the
NgOptimizedImageclass in theimportsarray of the@Componentdecorator:@Component({ selector: 'app-product-list', imports: [ SortPipe, AsyncPipe, CurrencyPipe, RouterLink, MatMiniFabButton...
