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!

[ThornWalli]

@diegogava I looked again 😉

I couldn't get an attempt out of my head.

The material font must not load, it is large and blocks the rendering of the fonts.

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

Seems to be stable now, but had to remove the font-face for the material icons before uploading.

The only problem is the material font issue...

You should go for a pure SVG variant here, which are integrated as components and are inline (no external loading via img).

With Vuetify I know that it would also be possible inline.

[ThornWalli]

@diegogava You can take another look at my fork 😉

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

I installed SVG icons for you.

The editor loads the materialfont again. It should come async after initialization. Rendering an editor SSR is stupid 🙃

Now it looks good 🙂

Here you can see that the font only comes at the very end:

[ThornWalli]

I have created a section on this topic in the documentation.
See the most important points for now.

https://basics.github.io/nuxt-booster/guide/caveats.html#usage-of-ui-frameworks-vuetify-quasar

[diegogava]

Hello @ThornWalli !

Thank you very much! I'm gonna take a look at your fork.

You can close this issue if you want to!

Best regards!