title: Improve Nuxt TTFB
body: <p>I'm building a large application using Nuxt and Vuetify, everything is good and working fine but unfortunately the score from Lighthouse is not the best with only 42 in performance.</p>
  <p>I already improved a few things like:</p>
  <ul>
  <li>Better fonts loading from google;</li>
  <li>Moving async code from <code>nuxtServerInit</code> to the layout;</li>
  <li>Removing unnecessary third party services;</li>
  </ul>
  <p>It went from 42 to 54 but I'm still not very happy about the result.</p>
  <p>Unfortunately I'm not the best doing these improvements because I lack of knowledge.</p>
  <p>I see the <code>TTFB</code> is not optimal at all but I don't really know what can I improve... So I hope you can help me to boost my application with hints and suggestions.</p>
  <p>Here I will paste my <code>nuxt.congig.js</code> so that you're aware of what I'm using and how:</p>
  <pre><code>const path = require('path')
  const colors = require('vuetify/es5/util/colors').default
  const bodyParser = require('body-parser')
  
  const maxAge = 60 * 60 * 24 * 365 // one year
  const prefix = process.env.NODE_ENV === 'production' ? 'example.' : 'exampledev.'
  const description =
    'description...'
  
  let domain
  if (
    process.env.NODE_ENV === 'production' &amp;&amp;
    process.env.ENV_SLOT === 'staging'
  ) {
    domain = 'example.azurewebsites.net'
  } else if (
    process.env.NODE_ENV === 'production' &amp;&amp;
    process.env.ENV_SLOT !== 'staging'
  ) {
    domain = 'example.com'
  } else {
    domain = ''
  }
  
  module.exports = {
    mode: 'universal',
  
    /**
     * Disabled telemetry
     */
    telemetry: false,
  
    /*
     ** Server options
     */
    server: {
      port: process.env.PORT || 3030
    },
  
    serverMiddleware: [
      bodyParser.json({ limit: '25mb' }),
      '~/proxy',
      '~/servermiddlewares/www.js'
    ],
  
    router: {
      middleware: 'maintenance'
    },
  
    env: {
      baseUrl:
        process.env.NODE_ENV === 'production'
          ? 'https://example.com'
          : 'https://localhost:3030',
      apiBaseUrl:
        process.env.API_BASE_URL || 'https://example.azurewebsites.net'
    },
  
    /*
     ** Headers of the page
     */
    head: {
      title: 'example',
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        {
          hid: 'description',
          name: 'description',
          content: description
        },
        {
          hid: 'fb:app_id',
          property: 'fb:app_id',
          content: process.env.FACEBOOK_APP_ID || 'example'
        },
        {
          hid: 'fb:type',
          property: 'fb:type',
          content: 'website'
        },
        {
          hid: 'og:site_name',
          property: 'og:site_name',
          content: 'example'
        },
        {
          hid: 'og:url',
          property: 'og:url',
          content: 'https://example.com'
        },
        {
          hid: 'og:title',
          property: 'og:title',
          content: 'example'
        },
        {
          hid: 'og:description',
          property: 'og:description',
          content: description
        },
        {
          hid: 'og:image',
          property: 'og:image',
          content: 'https://example.com/images/ogimage.jpg'
        },
        {
          hid: 'robots',
          name: 'robots',
          content: 'index, follow'
        },
        {
          name: 'msapplication-TileColor',
          content: '#ffffff'
        },
        {
          name: 'theme-color',
          content: '#ffffff'
        }
      ],
      link: [
        {
          rel: 'apple-touch-icon',
          sizes: '180x180',
          href: '/apple-touch-icon.png?v=GvbAg4xwqL'
        },
        {
          rel: 'icon',
          type: 'image/png',
          sizes: '32x32',
          href: '/favicon-32x32.png?v=GvbAg4xwqL'
        },
        {
          rel: 'icon',
          type: 'image/png',
          sizes: '16x16',
          href: '/favicon-16x16.png?v=GvbAg4xwqL'
        },
        { rel: 'manifest', href: '/site.webmanifest?v=GvbAg4xwqL' },
        {
          rel: 'mask-icon',
          href: '/safari-pinned-tab.svg?v=GvbAg4xwqL',
          color: '#777777'
        },
        { rel: 'shortcut icon', href: '/favicon.ico?v=GvbAg4xwqL' },
        {
          rel: 'stylesheet',
          href:
            'https://fonts.googleapis.com/css?family=Abril+Fatface|Raleway:300,400,700&amp;display=swap'
        }
      ]
    },
  
    /*
     ** Customize the page loading
     */
    loading: '~/components/loading.vue',
  
    /*
     ** Global CSS
     */
    css: ['~/assets/style/app.scss', 'swiper/dist/css/swiper.css'],
  
    /*
     ** Plugins to load before mounting the App
     */
    plugins: [
      '@/plugins/axios',
      '@/plugins/vue-swal',
      '@/plugins/example',
      { src: '@/plugins/vue-infinite-scroll', ssr: false },
      { src: '@/plugins/croppa', ssr: false },
      { src: '@/plugins/vue-debounce', ssr: false },
      { src: '@/plugins/vue-awesome-swiper', ssr: false },
      { src: '@/plugins/vue-html2canvas', ssr: false },
      { src: '@/plugins/vue-goodshare', ssr: false }
    ],
  
    /*
     ** Nuxt.js modules
     */
    modules: [
      '@/modules/static',
      '@/modules/crawler',
      '@nuxtjs/axios',
      '@nuxtjs/auth',
      '@nuxtjs/device',
      '@nuxtjs/prismic',
      '@dansmaculotte/nuxt-security',
      '@nuxtjs/sitemap',
      [
        '@nuxtjs/google-analytics',
        {
          id: 'example',
          debug: {
            sendHitTask: process.env.NODE_ENV === 'production'
          }
        }
      ],
      ['cookie-universal-nuxt', { parseJSON: false }],
      'nuxt-clipboard2'
    ],
  
    /*
     ** Security configuration
     */
    security: {
      dev: process.env.NODE_ENV !== 'production',
      hsts: {
        maxAge: 15552000,
        includeSubDomains: true,
        preload: true
      },
      csp: {
        directives: {
          // removed contents
        }
      },
      referrer: 'same-origin',
      additionalHeaders: true
    },
  
    /*
     ** Prismic configuration
     */
    prismic: {
      endpoint: 'https://example.cdn.prismic.io/api/v2',
      preview: false,
      linkResolver: '@/plugins/link-resolver',
      htmlSerializer: '@/plugins/html-serializer'
    },
  
    /*
     ** Auth module configuration
     */
    auth: {
      resetOnError: true,
      localStorage: false,
      cookie: {
        prefix,
        options: {
          maxAge,
          secure: true,
          domain
        }
      },
      redirect: {
        callback: '/callback',
        home: false
      },
      strategies: {
        local: {
          endpoints: {
            login: {
              url: '/auth/local',
              method: 'POST',
              propertyName: 'token'
            },
            logout: { url: '/auth/logout', method: 'POST' },
            user: { url: '/me', method: 'GET', propertyName: false }
          },
          tokenRequired: true,
          tokenType: 'Bearer'
        },
        google: {
          client_id:
            process.env.GOOGLE_CLIENT_ID ||
            'example'
        },
        facebook: {
          client_id: process.env.FACEBOOK_APP_ID || 'example',
          userinfo_endpoint:
            'https://graph.facebook.com/v2.12/me?fields=about,name,picture{url},email',
          scope: ['public_profile', 'email']
        }
      }
    },
  
    /*
     ** Vuetify Module initialization
     */
    buildModules: [
      ['@nuxtjs/pwa', { meta: false, oneSignal: false }],
      '@nuxtjs/vuetify'
    ],
  
    /*
     ** Vuetify configuration
     */
    vuetify: {
      customVariables: ['~/assets/style/variables.scss'],
      treeShake: true,
      rtl: false,
      defaultAssets: {
        font: false,
        icons: 'fa'
      }
    },
  
    /*
     ** Vue Loader configuration
     */
    chainWebpack: config =&gt; {
      config.plugin('VuetifyLoaderPlugin').tap(() =&gt; [
        {
          progressiveImages: true
        }
      ])
    },
  
    /*
     ** Build configuration
     */
    build: {
      analyze: true,
      optimizeCSS: true,
      /*
       ** You can extend webpack config here
       */
      extend(config, ctx) {
        config.resolve.alias.vue = 'vue/dist/vue.common'
        // Run ESLint on save
        if (ctx.isDev &amp;&amp; ctx.isClient) {
          config.devtool = 'cheap-module-source-map'
          config.module.rules.push({
            enforce: 'pre',
            test: /\.(js|vue)$/,
            loader: 'eslint-loader',
            exclude: /(node_modules)/,
            options: {
              fix: true
            }
          })
        }
        if (ctx.isServer) {
          config.resolve.alias['~'] = path.resolve(__dirname)
          config.resolve.alias['@'] = path.resolve(__dirname)
        }
      }
    }
  }
  </code></pre>
  <p>A few maybe useful information:</p>
  <ul>
  <li>I use only scoped style for each page and component and the amount of custom style is really poor since I'm using almost everything from Vuetify as it is;</li>
  <li>When I do &quot;view page source&quot; from my browser, I don't like to see a very long CSS inside the page, not minimised...</li>
  <li>I don't load anything using <code>fetch</code> or <code>asyncData</code>, I prefer to load data once component is mounted;</li>
  <li>Evrything is deployed on Azure and I consume a .Net core API.</li>
  </ul>
  <p>What would be nice to know are the best practices with some examples to improve the performances, in particular the TTFB.</p>
  <p>In Lighthouse I see &quot;<strong>Remove unused JavaScript</strong>&quot; with a list of <code>/_nuxt/..</code> files... But I don't think these files are unused and so I would like to know why they are flagged like so...</p>
  <p>Maybe Azure should clean the project on each deploy? I don't know...
  I use the <code>az</code> Azure Cli and I deploy just by doing <code>git push azure master</code>, so nothing special.</p>
  <p>&quot;<strong>Reduce initial server response time</strong>&quot;... How? The plan where production app is running is the faster in Azure, what should I improve and how?</p>
  <p>&quot;<strong>Minimize main-thread work</strong>&quot;: What does it mean?</p>
  <p>&quot;<strong>Reduce JavaScript execution time</strong>&quot;: How?</p>
  <p>I hope you can help me to understand and boost everything.</p>
  <p>I will keep this post updated with your requests, maybe you wish to see something more about the project. Thanks</p>