I am 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.
I already improved a few things like:
- Better fonts loading from google;
- Moving async code from
nuxtServerInitto the layout; - Removing unnecessary third party services;
It went from 42 to 54 but I am still not very happy about the result.
Unfortunately, I am not the best doing these improvements because I lack of knowledge.
I see the TTFB 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.
Here I will paste my nuxt.congig.js so that you are aware of what I am using and how:
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' &&
process.env.ENV_SLOT === 'staging'
) {
domain = 'example.azurewebsites.net'
} else if (
process.env.NODE_ENV === 'production' &&
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&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 => {
config.plugin('VuetifyLoaderPlugin').tap(() => [
{
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 && 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)
}
}
}
}
A few maybe useful information:
- 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;
- When I do "view page source" from my browser, I don't like to see a very long CSS inside the page, not minimised...
- I don't load anything using
fetchorasyncData, I prefer to load data once component is mounted; - Everything is deployed on Azure and I consume a .Net core API.
What would be nice to know are the best practices with some examples to improve the performances, in particular the TTFB.
In Lighthouse I see "Remove unused JavaScript" with a list of /_nuxt/.. files... But I don't think these files are unused and so I would like to know why they are flagged like so...
Maybe Azure should clean the project on each deploy? I don't know...
I use the az Azure Cli and I deploy just by doing git push azure master, so nothing special.
"Reduce initial server response time"... How? The plan where production app is running is the faster in Azure, what should I improve and how?
"Minimize main-thread work": What does it mean?
"Reduce JavaScript execution time": How?
I hope you can help me to understand and boost everything.
I will keep this post updated with your requests, maybe you wish to see something more about the project. Thanks