Как на Laravel/Vue сайте повысить показатель Google page speed с учетом того, что большинство блоков на главной — Vue компоненты?

Question

[EVOSandru6]

Добрый день.

Показатель для картинок улучшил посредством nginx image filter

Но остаются плохие показатели особенно для мобилы:

Время загрузки для взаимодействия 14,4 сек.
Отрисовка крупного контента 12,2 сек.
Индекс скорости загрузки 5,7 сек.

Гугл предлагает:
1) Настройте предварительную загрузку ключевых запросов (приблизительная экономия: 6,81 s)
Я преобразовал

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

в

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

Но ничего не поменялось и он продолжает предлагать)

2) Удалите неиспользуемый код JavaScript

Я в app.js оставил только нужные Vue компоненты, внедряемые непосредственно в код blade шаблонов вида:

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

Компоненты внутри компонентов подключал через import

Помимо этого в js файле есть немного Vue импортов библиотечных + немного 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',
});
...

Мой 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}`);
}

Мое предположение было, что можно Vue компоненты в контексте Laravel сделать каким то образом ленивыми, чтобы подгружались при пересечении с экраном монитора (Предполагаю, что это можно как то реализовать из app.js).

Но пробовал удалять полностью несколько Vue компонентов на главной, и ничего в GPS координально не менялось в показателях.

Перый Vue компонет на странице удалить не могу, т.к. это важный фильтр.
И в показателях GPS видно как он постепенно подгружается.

Помимо этого подгружается окошко с предупреждением о хранении кук.

МБ есть какой-то способ до предзагрузки компонета использовать скриншот этого компонента, чтобы GPS не ругался на смещение (Предполагаю, что это можно как то реализовать из app.js)?

Прокатит ли такой вариант, или есть более человечные способы?

Answer 1

[SCode]

Посмотрите в сторону Server-Side Rendering https://ssr.vuejs.org/
При первой загрузке страницы отдавайте уже сгенерированный html. Или можно только ботам

Comments

[xirtib Si Tihs]

nuxtjs

[EVOSandru6]

xirtib Si Tihs, В контексте Laravel это реально сделать? Или речь о полном отделении бэка от фронта?

[fynduck]

EVOSandru6, придется отделить бэк от фронта с nuxt, есть v8js в php для SSR но с ним большие проблемы при установке и настройке

Answer 2

[fynduck]

можешь попробовать ише extract https://laravel.com/docs/7.x/mix#vendor-extraction
можно перичислить и другие библиотеки

Comments

[EVOSandru6]

В таком случае гугл не будет ругаться, что идет множество подключений?
Или так будет шустрее?

В таком случае нужно будет подключать по отдельности в разных комбинациях на разных страницах извлеченные скрипты, правильно понял?