Page loads very slowly with nuxt SSR

Question

My project uses nuxt.js with Firebase. I use the nuxt/Firebase package. I have many pages which use asyncData or fetch to get data from Firebase database and storage,e.g. blog posts , classified ads etc. All works well and I added meta tags using nuxt head property. However, the page load time before displaying any content is more than 5 seconds. I tried wrapping some of my pages which are related to authenticated users and are not needed for SEO in a client-only tag, but I see no improvement. All this happens when I deploy my app in production. I use firebase hosting.

Does anyone know how can I SSR the same content as I do know, but increase the page load time. Here is a report from lighthouse tab in chrome devtools. It says some css is a render-blocking resource.

Answer 1

Ok. I managed to increase page loading speed by at least 100% by setting in nuxt.config.js file

   vuetify: {
    optionsPath: './vuetify.options.js',
    defaultAssets: {
      icons: false
    }
  },

Then you should locally import material icons like so:

import { mdiPlusCircle } from '@mdi/js'
data() {
 return: {
  addCircleIcon: mdiPlusCircle,
 }
}

And then you can use this addCircleIcon in your template like so:

<v-icon> {{ addCircleIcon }}</v-icon>

So now instead of loading material design icons from cdn, which is the default vuetify behavior, i do it locally and it doesn't block the initial rendering of the page.

Also setting vuetify's treeshake option to false increase site loading speed.