Integration with Quasar and Tailwind

[diegogava]

Environment

Nuxt: 3.15.2
Nuxt Booster: 3.1.10
Quasar: 2.12.0
Nuxt Quasar ui: 2.1.9
Vue: 3.5.13
Browsers: Chrome 131.0.6778.265
OS: Windows 10

Expected Behavior

Expected Google Lighthouse performance higher than 90

Actual Behavior

Reproduction Link

https://github.com/diegogava/nuxt-quasar-tailwind-booster

Other comments

Can someone look at my project and see what I am doing wrong?

[ThornWalli]

Hello @diegogava,

Basically it looks good.

It's important that there is no longer a red dot under Diagnostic ;)

Unfortunately I can't see the full result in your screenshot.

I suspect the problem is in the hosting, for example text compression.

[diegogava]

Hi @ThornWalli,

Thank you for your reply!

I uploaded this project in Vercel (ignore Vuetify name, because it is from another project, but the code is the same as this repo):

https://vuetify-nuxt-speedkit-lka9nfui8-diegogavas-projects.vercel.app/

I use pagespeed to perform some tests, check it out:

Is there a way to improve FCP and LCP? You can check the Vercel URL in the pagespeed!

[ThornWalli]

Hello @diegogava,

I made a fork (https://github.com/ThornWalli/nuxt-quasar-tailwind-booster) and made some adjustments:

• Define font-family definitions only via $getFont. Quasar sets own Roboto font (example button).
• Button component created, so the citical can be used.
• Font files exchanged. (Files were too large.)

Result:
Desktop good, but mobile causes problems... there seems to be a delay in rendering the text.

https://pagespeed.app.baqend.com/test/

Jumps with the performance values, average should be taken.

The materialiconsfonts (>100kb) can still cause problems.
Could be solved by using SVG embedded at the places. (If necessary, also integrate via <img />).

Quasar and Vuetify are not really suitable for the pagespeed case 😉

[diegogava]

Hello @ThornWalli

Thank you for the reply!

Your tips are amazing!

I already merged your fork into my project.

I added a header in the layouts/default.vue and changed the theme, then I ran the PageSpeedInsight and got the following results:

Site: https://nuxt-quasar-tailwind-booster.vercel.app

Code: https://github.com/diegogava/nuxt-quasar-tailwind-booster

Is there some framework that is better for performance (Vuetify, Quasar, PrimeVue, etc.)? Or is not having any framework is the better solution?

Best regards!