DOMContentLoaded making the webpage slow

Question

I'm using DOMContentLoaded to load an initial item when webpage load.

After using this when my webpage loads the CSS loads first and after the interval of 1-2 sec the JS loads the initial item.

Is this because of the DOMContentLoaded event or because my data is stored locally or any other reason that I'm unable to see?

const reviews = [{
    id: 1,
    name: 'William swith',
    job: 'web developer',
    img: '/assets/profile1.jpg',
    Text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non ullamcorper odio. Nunc dignissim arcu sit amet neque imperdiet lobortis.  ',
  },
  {
    id: 2,
    name: 'susan swith',
    job: 'web designer',
    img: '/assets/profile2.jpg',
    Text: ' second Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non ullamcorper odio. Nunc dignissim arcu sit amet neque imperdiet lobortis. ',
  },
  {
    id: 3,
    name: 'ana johnson',
    job: 'painter',
    img: '/assets/profile3.jpg',
    Text: ' third Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non ullamcorper odio. Nunc dignissim arcu sit amet neque imperdiet lobortis.  ',
  },
];

// variables
const img = document.querySelector('img');

const author = document.querySelector('.author');

const job = document.querySelector('.job');

const info = document.querySelector('.info');

const btnleft = document.querySelector('.btn-left');
const btnright = document.querySelector('.btn-right');

// console.log(reviews.length);

// set starting item

let currentItem = 0;





// load intial item

window.addEventListener('DOMContentLoaded', () => {
  showPerson();
});

// right btn 

btnright.addEventListener('click', () => {
  currentItem++;
  if (currentItem > reviews.length - 1) {
    currentItem = 0;
  }
  showPerson();
  //   console.log('hey');
});

// left btn 

btnleft.addEventListener('click', () => {
  currentItem--;
  if (currentItem < 0) {
    currentItem = reviews.length - 1;
  }
  showPerson();
  console.log(currentItem);
});

function showPerson() {
  const item = reviews[currentItem];
  // img variable having property of 'src';
  img.src = item.img;
  author.textContent = item.name;
  info.textContent = item.Text;
  job.innerHTML = item.job;
}

* {
  margin: 0%;
  padding: 0%;
  box-sizing: border-box;
}

img {
  width: inherit;
  border-radius: 50%;
  height: inherit;
  border: 2px solid #252525;
}


/* for small screen */

@media screen and (max-width: 750px) {
  body {
    background-color: aquamarine;
    overflow: hidden;
  }
  .card {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: 650px;
    height: 450px;
    border-radius: 10px;
    background-color: whitesmoke;
    flex-direction: column;
    transform: translate(2em, 6em);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  }
  .circle {
    margin: 20px auto;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    text-align: center;
  }
  .profile-circle {
    position: absolute;
    top: -2%;
    left: 33%;
    object-fit: cover;
  }
  .bg-circle {
    position: absolute;
    top: -2%;
    left: 34%;
    z-index: -1;
    background-color: dodgerblue;
  }
  h2 {
    position: absolute;
    top: 45%;
    color: #252525;
    text-transform: capitalize;
  }
  h4 {
    position: absolute;
    top: 52%;
    color: dodgerblue;
    text-transform: capitalize;
  }
  p {
    color: #252525;
    position: absolute;
    bottom: 24%;
    font-size: 1.5em;
    text-align: center;
  }
  .btn {
    bottom: 15%;
    width: 30px;
    border: whitesmoke;
    border: 1px solid #252525;
    border-radius: 50%;
    position: absolute;
  }
  .btn-left {
    left: 40%;
  }
  .btn-right {
    right: 40%;
  }
  .btn:hover {
    color: blue;
    background-color: dodgerblue;
  }
}

<div class="card">
  <div class="profile">
    <div class="profile-circle circle">
      <img src="" />
    </div>
    <div class="bg-circle circle"></div>
  </div>
  <h2 class="author"></h2>
  <h4 class="job"></h4>
  <p class="info"></p>
  <button class="btn-left btn"><</button>
  <button class="btn btn-right">></button>
</div>