I'm currently building a new version of my company's site and we choose Nuxt to do it. For my coworkers, it is important to keep the ability to manage the content so we are keeping Wordpress as a CMS. Then we generate the JSON with Wordpress's REST API and we inject it in the webapp, basically it is just an headless Wordpress.
Long story short, I'm currently trying to figure out how to host this monstruosity, and I'm facing a big issue: the home page takes 15sec to load. Fortunetally, the rest of the app is not so bad in term of first load. May you take a look at my Google lighthouse score.. Yes I'm ashamed.
So maybe you are wondering, how this poor man created this ? Let me tell you what I use to do that :
- TailwindCSS (with JIT)
- Nuxt@2.15.3
- NuxtI18n (with BIG JSON files -> total 12,6 Mo)
- The app is hosted on Heroku
My nuxt.config file :
export default {
devServer: {
historyApiFallback: true
},
tailwindcss: {
configPath: '~/config/tailwind.config.js',
jit: true
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: [
],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
{ src: '~/plugins/main.js' },
{ src: '~/plugins/vuex-persist', ssr: false },
{ src: './plugins/vue-awesome-swiper.js', ssr: false },
{ src: '~/plugins/fullpage.js', mode: 'client' },
{ src: '~/plugins/aos.client.js', ssr: false},
{ src: '~plugins/v-calendar.js', ssr: false }
],
// Auto import components: https://go.nuxtjs.dev/config-components
components: false,
buildOptimisations: {
profile: process.env.NODE_ENV === 'development' ? 'risky' : 'experimental'
},
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
// https://go.nuxtjs.dev/tailwindcss
'@nuxtjs/tailwindcss',
'@nuxtjs/dotenv',
[
'nuxt-i18n',
{
locales: [
{
code: 'en',
name: 'English',
file: 'en-EN.js',
flagImg: 'english_flag.png'
},
{
code: 'fr',
name: 'Français',
file: 'fr-FR.js',
flagImg: 'french_flag.png'
},
{
code: 'de',
name: 'Deutsch',
file: 'de-DE.js',
flagImg: 'german_flag.png'
},
],
lazy: true,
langDir: 'lang/',
defaultLocale: 'fr',
parsePages: true,
vueI18n: {
fallbackLocale: 'fr',
},
vuex: {
moduleName: 'i18n',
},
seo: false,
detectBrowserLanguage: false,
}
]
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
// https://go.nuxtjs.dev/axios
'@nuxtjs/axios',
// https://go.nuxtjs.dev/pwa
'@nuxtjs/pwa',
'nuxt-leaflet',
'vue-social-sharing/nuxt',
'@nuxtjs/composition-api/module',
'@nuxtjs/dayjs'
],
// Axios module configuration: https://go.nuxtjs.dev/config-axios
axios: {
proxy: true
},
// PWA module configuration: https://go.nuxtjs.dev/pwa
pwa: {
manifest: {
lang: 'fr'
}
},
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
extend(config, ctx) {
config.node = {
fs: "empty"
}
},
parallel: true,
cache: true,
hardSource: true,
html: {
minify: {
collapseBooleanAttributes: true,
decodeEntities: true,
minifyCSS: true,
minifyJS: true,
processConditionalComments: true,
removeEmptyAttributes: true,
removeRedundantAttributes: true,
trimCustomFragments: true,
useShortDoctype: true,
removeComments: true,
preserveLineBreaks: false,
collapseWhitespace: true
}
},
loaders: {
vue: {
prettify: false
}
},
transpile: ['vee-validate'],
postcss: {
plugins: {
"postcss-custom-properties": true
},
},
extractCSS: false
},
}
I can't figure out why this page take so much time to load, I split the page in several components, I try to load the minimum amount of JSON data on these files, I use vue-lazyhydrate, try to load components asynchronously: nothing works. I know my code is far from perfect, but still.. 15 seconds is a lot.
