Data binding with httpClient in a angular is slow in first time

Question

I wrote a website with angular 9 and .net core 3.1 for backend, the problem is that it's take 5 second in first time to show and bind result of httpclient to user, but api that api is just take 200 m/s in postman to resposne.

httpclient service

getShort(): Observable<Api<PostShort[]>> {
return this.http.get<Api<PostShort[]>>(this.apiUrl + 'getShort')
  .pipe(
    tap(),
    catchError(this.handleError('get', new Api<PostShort[]>()),
    ));
}

model of post

export class PostShort {
    public id: number;
    public title: string;
    public categoryName: string;
    public stateName: string;
    public time: string;
    public images: PostImage[];
    public price: number;
    public type: number;
}

component to get data

  ngOnInit(): void {
this.loading = true;
  this.dataService.getShort().subscribe(
    results => {
      if (results.isSuccess) {
        this.source = results.data;
      } else {
        this.errorToast.showSuccess(results.message);
      }

      this.loading = false;
    },
    error => {
      this.loading = false;
      this.error = error.message;
      this.errorToast.showSuccess(error.message);
    },
  );
}

html view:

      <ul class="row items ad-listing" *ngIf="source.length>0">
    <li *ngFor="let item of source"
      class="item col-lg-3 col-md-3 col-sm-12 product type-product post-509 status-publish first instock product_cat-sell-house has-post-thumbnail downloadable virtual product-type-simple">
      <div class="wrapper">
        <span class="ad_visit" *ngIf="item.type==2">{{ 'Home.Special' | translate }}</span>
        <div class="image">
          <h4 class="location">
            <a>{{item.stateName}}</a>
          </h4>
          <a [routerLink]="['/pages/more', item.id, item.title.replace(' ','-')]" [title]="item.title"
            class="title">
            <img width="300" height="300" *ngIf="item.images" [src]="item?.images[0]?.image" [alt]="item.title"
              sizes="(max-width: 300px) 100vw, 300px" />
          </a>
        </div>
        <span class="price">{{item.price}} $</span>
        <div class="meta">
          <a [routerLink]="['/pages/more', item.id, item.title.replace(' ','-')]" [title]="item.title"
            class="title">
            <h2>{{item.title}}</h2>
          </a>
          <figure>
            <i class="fa fa-calendar-o"></i>{{item.title}}</figure>
          <figure>
            <i class="fa fa-folder-open-o"></i><a rel="tag">{{item.categoryName}}</a>
          </figure>
        </div>
        <!--end meta-->
        <!--end description-->
      </div>
    </li>
  </ul>
  <div class="center ad-load-more" *ngIf="source.length==0 && loading">
    <div class="ad-loading" style="display: block;">
      <div class="ad-loader-show">
      </div>
    </div>
  </div>
  <div class="center ad-load-more" *ngIf="source.length==0 && !loading">
    <p>{{ 'Home.Nodata' | translate }}</p>
  </div>

This problem is just first time I open site after that, it's ok.
I test different theme for site, chrome and edge browser, different network

Answer 1

The problem was in IIS option in windows server, it start mode should be (always running) and (preload) true