PageMarquee with testimonials have performance trouble

[Cyriljshaz]

Environment

• Operating System: Darwin
• Node Version: v20.10.0
• Nuxt Version: 3.15.4
• CLI Version: 3.22.2
• Nitro Version: 2.10.4
• Package Manager: [email protected]
• Builder: -
• User Config: modules, devtools, css, content, future, compatibilityDate, image, build, routeRules, site, hooks, icon, colorMode, nitro, typescript, eslint
• Runtime Modules: @nuxt/[email protected], @nuxtjs/[email protected], @nuxt/[email protected], @nuxt/[email protected], @nuxt/[email protected], @vueuse/[email protected], @nuxtjs/[email protected], [email protected]
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.0.0-beta.2

Reproduction

Description

I’ve noticed significant performance issues when using UPageMarquee with testimonials. The load time is drastically affected, and the overall experience is slow. It seems like the testimonials component is causing major bottlenecks.

https://ui3.nuxt.dev/components/page-marquee#testimonials

<div class="flex flex-col gap-4 w-full">
      <UPageMarquee
        pause-on-hover
        :overlay="false"
        :ui="{ root: '[--gap:--spacing(4)] [--duration:80s]', content: 'w-auto py-1' }"
      >
        <UPageCard
          v-for="(testimonial, index) in page.testimonials.items"
          :key="index"
          class="break-inside-avoid"
          variant="subtle"
          :description="testimonial.quote"
          :ui="{
            description: 'before:content-[open-quote] after:content-[close-quote] line-clamp-3'
          }"
          class="w-64 shrink-0"
        >
          <ULandingTestimonial
            v-bind="testimonial"
            class="bg-gray-100/50 dark:bg-gray-800/50"
          />
        </div>
      </UPageColumns>
    </ULandingSection>
          <template #footer>
            <UUser v-bind="testimonial.author" size="xl" :ui="{ description: 'line-clamp-1' }" />
          </template>
        </UPageCard>
      </UPageMarquee>

However, when I use marquee like this, , there are no performance issues :

<UPageSection>
      <UPageLogos marquee :title="page.logos.title">
        <template v-for="image in page.logos.images" :key="image.src">
          <NuxtImg
            :src="image.src"
            :alt="image.alt"
            :width="image.width"
            :height="image.height"
            loading="lazy"
            sizes="xs:320px sm:640px md:768px"
            quality="40"
            class="mb-4 sm:mb-0 sm:mr-4 mx-auto flex-shrink-0"
          />
        </template>
      </UPageLogos>
    </UPageSection>

I have the impression that in one case, the animation loading is deferred, whereas in the other, it is not.

[benjamincanac]

I just checked the frame rate with those examples and encountered no issue. What do you mean by significant performance issues?

[Cyriljshaz]

I’ve noticed a significant performance drop in Lighthouse when adding <UPageMarquee> to my page.

My score decreases by 10-15 points out of 100, and Lighthouse reports that:

• The main thread is overworked
• The DOM depth is too large

[HugoRCD]

@Cyriljshaz Could you try testing again with this version? 🤔

https://pkg.pr.new/@nuxt/ui-pro@530708c

[Cyriljshaz]

I ran the test, making sure to reset the build cache in Vercel as a precaution, but it didn’t change anything — the issue is still exactly the same. 🥲

UPDATE 04/24/2025 : I’m getting back to you because I think I’ve found a clue that might explain the slowdown I mentioned. In my Marquee, I’m animating 17 testimonial cards! I still don’t quite understand why simply displaying the 17 cards performs much better than showing them in a marquee, but at least this gives us a lead.

[github-actions[bot]]

Hi! 👋

This issue has been automatically closed due to prolonged inactivity.

We're a small team and can't address every report, but we appreciate your feedback and contributions.

If this issue is still relevant with the latest version of Nuxt UI, please feel free to reopen or create a new issue with updated details.

Thank you for your understanding and support!

— Nuxt UI Team