How to Optimize Nuxt.js v2 for Google Cloud Run

Introduction

Google Cloud Run is a serverless platform for deploying and scaling containerized applications. Running a Nuxt.js application on Google Cloud Run offers a cost-effective and scalable solution. However, to achieve the best performance and PageSpeed Insights scores, it's essential to optimize the nuxt.config.js file in your Nuxt.js application and add the required modules.

In this article, we will discuss the key changes made to the nuxt.config.js file and the necessary modules to optimize a Nuxt.js service for Google Cloud Run.

Key changes to nuxt.config.js

Here are the critical changes made to the nuxt.config.js file:

1. Modern mode: Enable modern mode only for production builds.

modern: 'server'

2. Render settings: Configure render settings to improve performance.

render: {
  asyncScripts: true,
  compressor: { threshold: 6 },
  resourceHints: false,
},

3. Build settings: Customize build settings, extract CSS, and configure PostCSS.

build: {
  extractCSS: {
    ignoreOrder: true,
  },
  postcss: {
    plugins: {
      'css-byebye': {
        rulesToRemove: [
          /.*\.v-application--is-rtl.*/,
          ...require('./scripts/purgeUnusedCss'),
        ],
      },
    },
    order: 'presetEnvAndCssByebyeAndCssnanoLast',
  },
},

4. Optimized Images: Optimize images only for production builds.

optimizedImages: {
  optimizeImages: process.env.NODE_ENV === 'production',
  optimizeImagesInDev: false,
  inlineImageLimit: -1,
},

5. Router settings: Disable prefetch links and configure trailing slashes.

router: {
  prefetchLinks: false,
  middleware: ['router'],
  trailingSlash: true,
},

6. Polyfills: Add polyfills for using features like the Intersection Observer.

polyfill: {
  features: [
    {
      require: 'intersection-observer',
      detect: () => 'IntersectionObserver' in window,
    },
  ],
},

Required modules for optimization

Here are the essential modules to add to your nuxt.config.js file for optimization:

1. @nuxtjs/component-cache: Caches Vue.js components to improve server-side rendering performance.
2. nuxt-polyfill: Adds polyfills for features like Intersection Observer, as shown in the polyfill configuration.
3. @aceforth/nuxt-optimized-images: Optimizes images during build-time to improve performance.
4. vue-lazy-hydrate: by Markus Oberlehner. improves the estimated input latency and time to interactive.