Итак, у меня впервые в жизни возникает задача по оптимизации веб-страницы. Я хорошо справился с задачей после прочтения документации google - web vitals. Я оптимизировал с 1-5 до 70-75. Последнее, что нужно сделать сейчас, это оптимизировать LCP - самую большую отрисовку содержимого.
Проблема в том, что после инициализации слайдера (когда загружены библиотеки owl.carousel.min. js и jquery ) Маркер времени LCP перемещается дальше по шкале времени.
Чтобы объяснить более ясно: если вы когда-либо оптимизировали FCP, LCP, FP, вы знаете о вкладке Perfomance в Google Chrome Dev и кадрах, которые там появляются. Я добавил css над сгибом для элементов, которые появляются первыми - среди них есть слайдер. Мои стили для слайдера выглядят точно так же, как стили из owl.carousel. css до загрузки. На кадрах нет пробелов или каких-либо мерцаний.
Однако Когда загружается owl.carousel. js lib, маркер времени LCP перемещается в этот момент, хотя, повторяю, LCP вообще не меняется в кадрах, выглядит на 100% тот же самый. Даже при том, что такой же вид img на слайдере появился долго go, LCP перемещается в момент времени, когда загружается owl. js.
Я читал, что LCP переустанавливается, если sr c атрибут img меняется - но я все время использую один и тот же img. Может быть, код внутри слайдера повторно устанавливает sr c, и я получаю повторную настройку LCP, но изменение кода библиотеки слайдера, безусловно, не является решением.
Итак, как мне оптимизировать время LCP, если моя LCP представляет собой библиотечный слайдер js, который зависит от jquery? Загрузка jquery с ползунком в голове - плохое решение - дает еще худшие результаты из-за блокировки рендеринга и оценки скриптов.