How to increase Google page speed on a Laravel/Vue site, given that most of the blocks on the main page are Vue components?

Question

Client side optimization

Good afternoon.

Image score improved with nginx image filter

But bad performance remains, especially for mobile:

Interaction load time 14.4 sec.
Large content rendering 12.2 sec.
Download speed index 5.7 sec.

Google suggests:
1) Set up keyword preloading (estimated savings: 6.81 s)
I converted

<script src="{{ mix('front/js/app.js', 'build') }}"></script>

in

<link rel="preload" href="{{ mix('front/js/app.js', 'build') }}" as="script">
<script src="{{ mix('front/js/app.js', 'build') }}"></script>

But nothing has changed and it continues to offer)

2) Remove unused JavaScript

code . I left only the necessary Vue components in app.js, which are injected directly into the blade code of the view templates:

Vue.component('register', require('./components/Register.vue'));

I connected the components inside the components via import

. In addition, the js file has some Vue library imports + some Jquery

require('jquery-mask-plugin');
require('./bootstrap');
window.Vue = require('vue');
window.Vuex = require('vuex');

Vue.use(Vuelidate);

Vue.use(Storage, {
    namespace: 'vuejs__',
    name: 'ls',
    storage: 'local',
});
...

My webpack.mix.js :

const mix = require('laravel-mix');
require('laravel-mix-purgecss');

mix
    .setPublicPath('public/build')
    .setResourceRoot('build')
    .js('resources/js/app.js', 'front/js')
    .sass('resources/sass/app.scss', 'front/css')
    .options({
        processCssUrls: false
    })
    .purgeCss()
    .js('resources/js/admin/app.js', 'admin/js')
    .sass('resources/sass/admin/app.scss', 'admin/css')
    .options({
        processCssUrls: false
    })
;

mix.options({
    terser: {},
});

mix.version();

mix.copy('./resources/fonts', './public/build/front/fonts');
mix.copy('./node_modules/@fortawesome/fontawesome-free/webfonts', './public/build/front/webfonts');
mix.copy('./node_modules/@fortawesome/fontawesome-free/webfonts', './public/build/admin/webfonts');

let iconsArr = [
    'checked.svg',
    'setting.svg',
    'checked.svg',
];

for (const elem of iconsArr) {
    const srcPath = `./resources/images/${elem}`;
    mix.copy(srcPath, `./public/build/front/images/${elem}`);
}

My suggestion was that it is possible to make Vue components in the context of Laravel somehow lazy so that they are loaded when they intersect with the monitor screen (I assume that this can be somehow implemented from app.js ).

But I tried to completely remove several Vue components on the main one, and nothing in the GPS changed dramatically in terms of performance. I can’t delete the first Vue component on the page

, because this is an important filter.
And in terms of GPS you can see how it is gradually loaded.

In addition, a window with a warning about storing cookies is loaded.

MB is there some way to use a screenshot of this component before preloading the component so that the GPS does not swear at the offset (I assume that this can be somehow implemented from app.js )?

Will this option work, or are there more humane ways?

Answer 1

Look towards Server-Side Rendering https://ssr.vuejs.org/
When you first load the page, serve the already generated html. Or maybe only bots

Answer 2

you can try it extract https://laravel.com/docs/7.x/mix#vendor-extraction
you can list other libraries