How to speed up loading of images

Ionic Framework Ionic Angular
1

I’ve a wooCommerce store and am making an application for the same with ionic 5. When I load the products page, API call is made to Wordpress REST API and images are loaded slowly slowly, while I’ve check the other competitor apps, their images are loaded instantly. Here is my API call to service

 this.productService.getProducts().subscribe(list => {
      console.log('List: ', list);
      this.productList = list;
    });

and here is how am I rendering the images

  <ion-grid class='ion-text-center' *ngIf='productList'>
        <ion-row>
            <ion-col *ngFor='let product of productList.slice(0,3)'>
                <!-- <ion-item> -->
                <ion-avatar>
                    <ion-img [src]='product.images[0].src'></ion-img>
                </ion-avatar>
                <ion-text>{{product.name}}</ion-text>
                <!-- <ion-label>{{product.name}}</ion-label> -->
                <ion-button size='small' color='secondary'>Add to Cart</ion-button>
                <!-- </ion-item> -->
            </ion-col>
        </ion-row>
    </ion-grid>

It takes almost 2, 3 seconds to show images which unfortunately is very irritating user experience. While the other apps that I’ve check take less than 1 second. What should I do. any help will be highly appreciated.

2

First thing I would do is hook up Chrome’s Developer Tools and open the Network tab. That should give you hints to narrow down where in the loading process is really bogging down.