lighthouse performance decreased by 20pts!

I'm using the vue-slick-carousel in my nuxt project with the following config: (I'm using my custom lazy image component which loads the first image normally while the others in lazy mode)

<template>
  <VueSlickCarousel arrows pause-on-hover adaptive-height :speed="1000" :autoplay-speed="6000">
    <c-svg slot="nextArrow">chevron-right</c-svg>
    <c-svg slot="prevArrow">chevron-left</c-svg>

    <nuxt-link v-for="(slide, i) in home.slides" :key="i" :to="slide.url">
       <div class="slide-container">
         <div class="image-container">
           <c-img  :src="slide.img" :alt="slide.title" :lazy="i != 0" />
         </div>

         <div class="title-container">
            <div class="wrap">
               <p class="title">{{ slide.title }}</p>
               <p class="subtitle">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
             </div>

             <div class="wrap">
                <button size="medium" variant="primary">Commander maintenant</button>
              </div>
          </div>
       </div>
    </nuxt-link>
  </VueSlickCarousel>
<template>

<script>
const VueSlickCarousel = () => import("vue-slick-carousel");
import "vue-slick-carousel/dist/vue-slick-carousel.css";

export default {
  components: { VueSlickCarousel, Usp },
}
</script>

after nuxt build && nuxt start I tested the project before and after using the vue-slick-carousel and found out that it decreases by 20pts (from 76pts in performance to 54)...

Metrics

First Contentful Paint 4.2 s (red)
Speed Index 4.2 s (orange)
Largest Contentful Paint 5.1 s (red)
Time to Interactive 5.4 s (orange)
Total Blocking Time 300 ms (orange)
Cumulative Layout Shift 0.527 (red)

here are some opportunities that lighthouse listed:

Remove unused JavaScript 0.6 s
Minimize main-thread work 2.3 s
Reduce JavaScript execution time 1.4 s

gs-shop / vue-slick-carousel

lighthouse performance decreased by 20pts! #171