seo Question posted in
Some basic information to get you started with this can be found here.

Page loads very slowly with nuxt SSR – SEO

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0
    1. Try to use lazy-hydration
    2. Break the application into components
    3. Add v-if conditions to your components
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search