Ionic 6 List items is getting lag

Can any one help me. I have integrated an infinite scroll list cards. Even for 10 records my scrolling is getting lag.

Home page.
<ion-content [fullscreen]="true">  
    <ion-list *ngFor="let news of newsList" class="slider">
      <app-news-card
        class="app_news_card"
        [newsData]="news"
        [cardType]="cardType"
      ></app-news-card>
    </ion-list>
</ion-content>

and this is my news card html.

<div class="container">
  <ion-card class="card">
    <ion-card-header class="card-header">
      <app-image-slides [images]="newsData.images"></app-image-slides>
      <ion-badge class="bottomleft">{{ newsData.category_name }}</ion-badge>
    </ion-card-header>
    <ion-card-content class="card-body">
      <ion-card-title>
        {{ newsData.headline }}
        <div class="metaInfo">
          <ion-img
            src="../../../assets/futurenix_icon_black_bg.png"
            alt="logo"
          ></ion-img>
          <div class="credits-info">
            <h5>by futurenix team</h5>
            <small>{{ newsData.createdAt }}</small>
          </div>
          <div class="icon_buttons">
            <ion-icon name="globe-outline"  (click)="openCapacitorSite(newsData)"></ion-icon>
            <ion-icon name="arrow-redo-outline" (click)="share(newsData)"></ion-icon>
          </div>
        </div>
      </ion-card-title>

      <ion-card-subtitle
        [ngClass]="newsData.showEllipsis ? 'ellipsis' : 'noEllipsis'"
        (click)="expand(newsData)"
      >
        {{ newsData.story }}
      </ion-card-subtitle>
      <div class="card_footer">
        <button class="bubbly-button" [ngClass]="newsData.likeLoader ? 'disable_btn':''" (click)="like(newsData)">
          {{newsData.likeLoader ? '' : 'Like'}} {{newsData.likeLoader ? '' : (abbreviateNumber(newsData.likesCount)) }}
          <span class="loader" *ngIf="newsData.likeLoader"></span>
        </button>
        <button
          class="bubbly-button no_bg" [ngClass]="newsData.dislikeLoader ? 'disable_btn':''" (click)="dislike(newsData)"
        >
          {{newsData.dislikeLoader ? '' : 'Dislike'}} {{newsData.dislikeLoader ? '' : (abbreviateNumber(newsData.disLikesCount)) }}
          <span class="loader" *ngIf="newsData.dislikeLoader"></span>
        </button>
      </div>
    </ion-card-content>
  </ion-card>
</div>

this is how it looks

Now my problem is, my newsList length is just 10 records, but on my mobile scrolling the content is getting laggy.

If i user ion-virtual-scroll, my news cards are getting overlaped. If i use cdk-virtual-scroll-viewport, still it is getting lag.

Can any one help me with this.