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