Nuxt 3 CSS loading & CLS issues
Hi everyone !
I've some performance issues.
The CSS takes a long time to load, so I'm seeing the component html displayed raw first before loading the css.
This causes a fairly long layout shift. I haven't been able to identify the source of the problem, and even after removing the particles, the problem persists.
Production home page : https://www.draftbot.fr
PageSpeed Insights report : https://pagespeed.web.dev/analysis/https-draftbot-fr/dj2s9xzfuo?form_factor=desktop
:transparent:
13 Replies
hello DraftMan, can not pinpoint the problem but I have suggestions since I am also working with performance these days. I would use:
1. Placeholder for those buttons in the menu, the main hero part, and the text/heading beneath the image.
a. I would use those gray skeletons as placeholders and avoid using spinners. these will hold place for your content and the content will fill once it has been loaded. it will also provide better UX. let me know if it worked.. 🙂
ohh btw, I would also make sure that those elements which need to be rendered on client side; they are wrapped inside '<ClientOnly>' tag.
Hi @ALI !
Thanks for you answer.
Here the issue is not about css loading, not about async requests where Skeleton placeholders could take place.
I already use
ClientOnly tag for all components witch are not needed for SEO, the main content of the page should be server side rendered.
Here it looks like that components that are in the page are loaded later than the components of the layouts.
Try to identify the component(s) causing the layout shift problem. You can comment one component at a time until you find the culprit.
I just tried that, it seems that Nuxt load components (not even present on this page before loading the
index.css file).
Removing components didn't help.
Is there a way to optimize nuxt build for css loading of pages ?
Can you share more information about nuxt.config.ts and the index page ? For more context on the application
Are these styles (entry.css, index.css) separate files or in components style ?
I have written a module for this issue: https://github.com/johannschopplich/nuxt-lcp-speedup/
GitHub
GitHub - johannschopplich/nuxt-lcp-speedup: 🪿 Instantly better LCP ...
🪿 Instantly better LCP scores in Google Lighthouse - johannschopplich/nuxt-lcp-speedup
Hi @Johann, I tried your module, it didn't help, the visuals are still there.
When we migrated to Nuxt3, we also moved the phrases to locales.
Having quite a large application, we wanted to split the locales into different pages, but i18n Nuxt didn't offer this.
So we split the locales by language.
I transferred all the locales to the base file to check whether this hypothesis was conclusive, and it is.
We'll just have to wait for i18next to finish its view module or for nuxt i18n to integrate namespaces so that we can fix this performance problem.
Here the nuxt config, please let my know if i can share more infos !
No, all scss styles are in components.
Here a similar issue :
https://github.com/nuxt-modules/i18n/issues/1107
GitHub
Load only the needed translations per page · Issue #1107 · nuxt-mod...
Hi, i have a huge site with lots of translations. Im loading the translations from an api using the async function on the locales folder. I noticed huge size of htmls being served from the server a...
Something like that would be nice to split locales 🤔
https://i18next.github.io/i18next-vue/guide/composition-api.html#customize-t
Composition API | i18next-vue
i18next integration for Vue