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
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
What about showing some kind of placeholder?
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
@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%)
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?
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