Полагаю, ранее Вы не слышали о предлагаемом методе оптимизации. Он прост для понимания и, надеюсь, поможет улучшить производительность Вашего сайта.

Данный метод позволяет минимизировать количество событий DOM reflow и repaint, увеличивая, таким образом, частоту кадров.

Отключаем hover эффекты при скроллинге

Для увеличения FPS необходимо уменьшить количество событий reflow и repaint. Для этого уберем hover эффекты у всех элементов в DOM при прокрутке страницы.

Внесем ясность. Допустим, мы создали следующее свойство для определенных элементов страницы:

.color-me:hover {
  background-color: blue;
}

Это CSS правило будет неизбежно применяться при скролле для каждого элемента класса color-me при попадании под курсор, что в свою очередь будет запускать событие браузера repaint, которое в итоге приведет к изменению цвета фона элемента.

Что делать?

JS: создаем обработчик для прокрутки страницы

const ENABLE_HOVER_DELAY = 500;
let timer;
window.addEventListener('scroll', function() {
  const bodyClassList = document.body.classList;
  clearTimeout(timer);
  if (!bodyClassList.contains('disable-hover')) {
    // добавляем класс disable-hover
    bodyClassList.add('disable-hover');
  }
  timer = setTimeout(function() {
    // удаляем disable-hover class через 500 миллисекунд
    bodyClassList.remove('disable-hover');
  }, ENABLE_HOVER_DELAY);
}, false);

Для достижения поставленной цели приаттачим listener скролла к глобальному объекту window.

Теперь каждый раз при скролле мы сбрасываем предыдущий тайм-аут и добавляем класс disable-hover к элементу body.

Наконец, мы устанавливаем другой тайм-аут для удаления класса disable-hover, если событие scroll не вызывалось в течение 500 миллисекунд (ENABLE_HOVER_DELAY).

Для достижения наилучшего результата нужно поэкспериментировать со значением ENABLE_HOVER_DELAY.

CSS: создаем правило для отключения всех событий мыши (pointer events)

Необходимо создать класс disable-hover свойство которого будет использоваться скриптом при скролле:

.disable-hover,
.disable-hover * {
  pointer-events: none !important;
}

Это правило игнорирует все события мыши для всех HTML элементов.

Пользователь не сможет использовать какие-либо события мыши при скролле, в том числе click, hover, drag. Поэтому необходимо тщательно проанализировать все возможные последствия таких действий.

Подготовлено по материалам статьи Charis Theodoulou “Web Optimization: Increasing FPS by Disabling Hover Effect”