4

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. enter image description here

enter image description here

Kostadin Terziev
  • 516
  • 6
  • 15
  • 2
    Page load time depends on a lot of things, unfortunately there’s no one trick or single config setting that can magically speed things up... if you’re using chrome, you could head over to the Performance tab in dev tools and record the load profile of your pages in production, then take a screenshot of the results and update your question with the image. That way people can see where the problem lies and offer suggestions to improve. – Nick Dawes Jan 06 '21 at 10:45
  • I did upload a screenshot of lighthouse report. – Kostadin Terziev Jan 06 '21 at 20:35
  • 1
    See in the screenshot where it says ‘view original trace’? That’s the information we’re looking for :) – Nick Dawes Jan 06 '21 at 21:38
  • Ok. I added that as well. – Kostadin Terziev Jan 08 '21 at 06:58

2 Answers2

2

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.

Kostadin Terziev
  • 516
  • 6
  • 15
2
  1. Try to use lazy-hydration
  2. Break the application into components
  3. Add v-if conditions to your components
bujhmt
  • 160
  • 7