Как оптимизировать слайдер с 50 фотографиям?

Question

[godsplan]

Есть слайдер почти в конце страницы, в нем 50 фотографий, слайдер на slick slider, гугл выдает 99 баллов. но пишет что потенциальная эконмия времени загрузки 273 секунды. Я хочу подгружать весь контент слайдера когда он попадает в видимость пользователя. lazy load включен в самом slick slider. Какие есть варианты это реализовать?

Answer 1

[Александр Докин]

Можете использовать IntersectionObserver.

Как это работает?

На нужный dom-элемент навешивается наблюдатеть с колбеком, внутри которого можно делать всё, что угодно. В вашем случае при срабатывании element.isIntersecting это будет загрузка всех стилей/скриптов слайдера и его инициализация.

Посмотрите пример: https://codepen.io/alnidok/pen/eYNeGMQ

Поддерживается практически всеми современными браузерами:
https://caniuse.com/#feat=intersectionobserver

Answer 2

[frontend queen]

1. отлавливать скролл и инициализировать слайдер после того, как блок с ним будет виден пользователю

if (window.innerHeight + document.documentElement.scrollTop === 
document.documentElement.offsetHeight) {
    sliderInit();
}

2. оптимизировать и !кропать картинки, поскольку они даже в блоках с фиксированными и меньшими шириной и высотой будут загружать своё полное разрешение
3. intersection observer
4. поглядеть советы в аналогичном треде