@EVOSandru6

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

Добрый день.

Показатель для картинок улучшил посредством 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)?

Прокатит ли такой вариант, или есть более человечные способы?
  • Вопрос задан
  • 351 просмотр
Пригласить эксперта
Ответы на вопрос 2
SCode
@SCode
Посмотрите в сторону Server-Side Rendering https://ssr.vuejs.org/
При первой загрузке страницы отдавайте уже сгенерированный html. Или можно только ботам
Ответ написан
@fynduck
можешь попробовать ише extract https://laravel.com/docs/7.x/mix#vendor-extraction
можно перичислить и другие библиотеки
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы