Lighthouse Performance - inefficient cache policy on static assets

PJLindsay
3
PJLindsay
commented 8 months ago

First: thank you for excellent work on nuxt! It's really superb.

I am trying to improve my lighthouse audit Performance score. I am building a static site with nuxt, @nuxtjs/pwa and vuetify.

One of the messages from lighthouse audit is "Uses inefficient cache policy on static assets" There are 8 items showing (such as: _nuxt/app… _nuxt/vendor… …pages/index… and …layouts/default… 6 of these items do not have a Cache TTL set. I have been going in circles trying to figure out how to set Cache-Control or at least set Cache TTL. I have tried setting render.static.maxAge (not sure if this is correct place to set it)

I have seen a suggestion to use serverMiddleware - (e.g. using headers.js from /api) but I don't think I would use that approach for a static site.

Is it possible to get a little advice/direction on how to proceed? I'm very unclear on how to address this issue.

this is a snippet of my nuxt.config.js

  css: [
    '~/assets/style/app.styl'
  ],
  modules: [
    '@nuxtjs/pwa',
  ],
  plugins: [
    '~/plugins/vuetify.js',
    { src: '~plugins/ga.js', ssr: false }
  ],
  render: {
    static: {
      maxAge: 31536000 // 1 year
    }
  },
build: {
    vendor: [
      '~/plugins/vuetify.js'
    ],
    extractCSS: true,
    /*
    ** Run ESLint on save
    */
    extend (config, ctx) {
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
1
PJLindsay
3
PJLindsay
commented 7 months ago

oops - this was accidentally posted to hare (instead of nuxt.js).

Please feel free to close this question/issue or mark as resolved.

0
lupas
0
lupas
commented a month ago

@PJLindsay Did you end up reposting it somewhere else and found a solution?

Having the same question now, using Nuxt v2.3.4. I get the following:

Serve static assets with an efficient cache policy. 12 ressources found.
A long cache lifetime can speed up repeat visits to your page.

/recaptcha/api.js?render=…(www.google.com)
5 m
1 KB
/gtm.js?id=GTM-....&l=dataLayer(www.googletagmanager.com)
15 m
27 KB
…api/js?key=…(maps.googleapis.com)
30 m
34 KB
/_nuxt/023df09….js(myapp.firebaseapp.com)
1 h
517 KB
…fonts/95b6973.woff2(myapp.firebaseapp.com)
1 h
171 KB
/_nuxt/69f8ffc….js(myapp.firebaseapp.com)
1 h
62 KB
/_nuxt/a8b181f….css(myapp.firebaseapp.com)
1 h
54 KB
/_nuxt/9b2e060….js(myapp.firebaseapp.com)
1 h
54 KB
/_nuxt/dc6756b….js(myapp.firebaseapp.com)
1 h
4 KB
/_nuxt/81c9f90….css(myapp.firebaseapp.com)
1 h
3 KB
/_nuxt/7a0a6cb….js(koreanji-lab.firebaseapp.com)
1 h
2 KB
/css?family=Roboto:300,400,500,700(fonts.googleapis.com)
1 d
1 KB

Any ideas on how to change these cache-policies?

0
Informations
QuestionUnresolved
#c21 - Created 8 months ago