N
Nuxtβ€’8mo ago
Kyllian

LCP Insanely high with 'dynamic' text

Hi guys, we've been struggling for a while with our web-vitals. To keep it simple; we fetch 15 objects using useFetch. We throw this into a component and read a textual value of this. This causes a huge LCP from 2.5 seconds on the mobile test. This component also includes a video, which might be the reason why it's slow in the first place. Is there any way to improve the LCP or statistics in general. We already optimized the server/api a lot. It takes around 2-10ms to respond. Please let me know if you need any code, don't want to throw the complete project on here πŸ˜›
6 Replies
Kyllian
KyllianOPβ€’8mo ago
It seems to be the 'dynamic' part that causes it. Replacing this text with something static seems to fix it. But then, the dynamic text that currently causes it is just a simple getter within the javascript script execution time is 10ms currently. wonder why lighthouse marks it as 1.5ms for the paint the cause actually seems to be that the actual page is slow for the initial load. Lighthouse is just highlighting the actual biggest paint
owljackob
owljackobβ€’8mo ago
What about showing some kind of placeholder?
Kyllian
KyllianOPβ€’8mo ago
i've tried, just moves the problem to a different component it seems the issue is actually the loading speed of the page and lighthouse just blaming a component for it because it's big yes in incognito mode how do i enable ssr in this case, i figured it'd already was as it does the fetch request on the server-side too yeah it's not disabled, so it should be fine
Kyllian
KyllianOPβ€’8mo ago
@L422Y https://gtmetrix.com/reports/www.minecraftiplist.com/gwc4Tj9K/ here is for example the gtmetrix chart
GTmetrix Performance Report
GTmetrix Grade: A (Performance: 100% / Structure: 97%)
Kyllian
KyllianOPβ€’8mo ago
i just finished optimizing/clearing dependencies, helped nothing did nuxi analyze, only chart.js is kind of big but it's not used on this page oh god i know whats up nvm I do not i figured it'd be the banner videos that get prepared on the server-side first then even, if i remove the entire page i'm lighthousing and just put <p>lol</p> on it. the LCP for desktop is 1.1s and FCP is 1.1s is this just nuxt being extremely bad in this case? there is no way a simple page with lol should take this much lcp/fcp?
Anjjar
Anjjarβ€’8mo ago
Consider using Universal Rendering (default) and prerender the page. Fetch data from the API with the useAsyncData composable : https://nuxt.com/docs/api/composables/use-async-data
Want results from more Discord servers?
Add your server