Nuxt-Layout is Slow when rendering?
Hey Nuxt-Experts!
I have the following problem, my client is a local bar which wants to make his menu digital.
So far so good. Die the fact, that the menu has a different layout then the other pages of the project I‘m using Nuxt-Layouts..
Unfortunately I‘m experience a big drawback in puncto speed. If I‘m using layout the initial pageload of each menu-page is about 200-300ms.
Yes, I‘m also retrieving some data from Prismic.IO but right now I‘m using only a quarter of the data and the page-speed is this long.
Is this a common thing, when using Nuxt-Layouts? I also thought about adding another app.vue to the menu-page folder, but idk if it‘s a good practice..
How would you solve this issue?
—-
Current folder structure:
/layouts
[…]
/pages
|- index.vue
|- /menu
|- index.vue
|- drinks.vue
|- food.vue
app.vue
nuxt.config.ts
[…]
3 Replies
Assess the data you’re fetching. You mentioned yourself there’s a lot of data but you’re using a fraction of it. Take a look at the network request and perhaps contemplate making use of
transform option with your fetches to reduce the payload. Then assess you page speeds again.There's the difference. The initial page-load ist still quite heavy, altough I don't have any data on the side.
Yes, I'm using useAsyncData. That's why I'm wondering
Thank you for the hint, I tried and it became a lot faster. Especially after visiting the page again. But unfortunatly on init-page load it's still quite heavy and takes 200+ ms..