why nuxt app is to slow in phon, vuetify ,how can I increment performance on phone - vue.js

Question

hi I have nuxt app it work good and fast in pc but in phone is to slow I use vuetify in my app And I'm suspicious of this :) (The reason for the slowness of app is vuetify)
It seems to involve RAM and CPU, and because the phone is weaker, it slows down drastically.
how can I increment performance on phone .
for example it load 1s in pc but in phone it load 4s
and if it load 5s in pc in phone load 14s
is is my nuxt.config
export default {
ssr: false,
loadingIndicator: '~/static/html/loading.html',
head: {
titleTemplate: '%s | ****',
title: '****',
htmlAttrs: {
lang: 'fa',
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
{ name: 'format-detection', content: 'telephone=no' },
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
},
css: [
'#/static/fonts/Ter/css/style.css',
'#/static/css/main.css',
'#/static/fonts/fontawesome/css/all.css',
],
plugins: [
{
src: '#/plugins/drag.js',
ssr: false,
},
{
src: '#/plugins/ft.js',
ssr: false,
},
{
src: '#/plugins/particles',
ssr: false,
},
{
src: '#/plugins/axios.js',
ssr: false,
},
{
src: '#/plugins/lang.js',
},
{
src: '#/plugins/vuetify.js',
},
{
src: '#/plugins/Analytics.js',
ssr: true,
},
{
src: '#/plugins/Carousel3d.js',
ssr: true,
},
{
src: '#/plugins/EventBus.js',
},
],
components: true,
modules: [
'#nuxtjs/axios',
'#nuxtjs/auth',
'#nuxtjs/sitemap',
'#nuxtjs/robots',
'nuxt-i18n',
],
i18n: {
defaultLocale: 'fa',
lazy: true,
langDir: '~/langs',
locales: [
{ code: 'en', name: 'english', iso: 'en-US', file: 'en.js', dir: 'ltr' },
{ code: 'fa', name: 'پارسی', iso: 'fa-IR', file: 'fa.js', dir: 'rtl' },
{ code: 'ar', name: 'العربی', iso: 'ar-QA', file: 'ar.js', dir: 'rtl' },
],
},
robots: {
UserAgent: '*',
Disallow: '/dashboard',
},
sitemap: {
hostname: 'https://****/',
exclude: ['/forget-password'],
},
axios: {
// baseURL: 'https://****/api/',
// baseURL: 'https://****/api/',
baseURL: 'http://****/api/',
headers: {
common: {
customer: 'true',
},
},
},
env: {
baseURL: 'http://****/',
selfURL: 'https://****/',
cookieURL: 'localhost',
},
build: {
html: {
minify: {
collapseBooleanAttributes: true,
decodeEntities: true,
minifyCSS: true,
minifyJS: true,
processConditionalComments: true,
removeEmptyAttributes: true,
removeRedundantAttributes: true,
trimCustomFragments: true,
useShortDoctype: true,
minifyURLs: true,
removeComments: true,
removeEmptyElements: true,
},
},
},
auth: {
strategies: {
local: {
endpoints: {
login: {
url: 'link/verification',
method: 'post',
propertyName: 'access_token',
},
user: false,
},
token: {
maxAge: 60 * 60,
},
autoFetchUser: false,
},
},
},
}

Answer 1

This kind of question cannot be answered easily with just that. Improving performance can take a lot of analysis, can come from various places and is a broad topic.
Here is two of my answers on this subject (still relevant in your case):
How to increase speed performance in Nuxt with SSR
How to improve the LCP score of my Nuxt site?
Few things we can note on your nuxt.config.js:
using ssr: false is basically fallback'ing to a pure SPA behavior, so the initial loading time may be quite slow (as always, it depends also on how you measure it)
loading global CSS (css key) can be a penalty too
all of the plugins you're loading are adding to the bundle-size (and hence, increase the loading time), maybe think to load some of them locally
ssr: false is legacy, please use mode: 'client'
also, checking for some smaller alternatives may be interesting too (are tho 37kB of JS worth it?)
Other than this, there is also your overall code, some middleware, some 3rd party like Google analytics, the list goes on and on.
But I think you have a decent starting point with this.