Ускорение работы средствами css

Скорость работы сайта является важнейшей частью юзабилити, а так же влияет на ранжирование поисковыми сетями. В данной статье будут разбираться способы ускорения работы сайта средствами css.

Свойство pointer-events

pointer-events: none; — элемент перестанет реагировать на hover, click и другие события мыши. Он станет «прозрачным» для взаимодействия, а hover и click будут передаваться элементу, лежащему под ним. При скроллинге элементы с свойством pointer-events «рисуются» быстрее.

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

А чтобы свойство было глобальным будем применять его к body при событии scrolling, в этом нам поможет jQuery.
Скрипт без внешней конструкции DocumentReady.

// Ускорение работы сайта за счет css свойства pointer-events	
	
var body = document.body,
    timer;

window.addEventListener('scroll', function() {
  clearTimeout(timer);
  if(!body.classList.contains('disable-hover')) {
    body.classList.add('disable-hover');
  }
  
  timer = setTimeout(function(){
    body.classList.remove('disable-hover');
  },300);
}, false);

background-attachment: fixed;

Нужно избавляться от свойства background-attachment: fixed; т.к. его использование при прокрутке вызывает операцию перерисовки. Создается впечатление «притормаживания». Более «легкий вариант» фиксированного фона:

body:before {
    background: url("/wp-content/uploads/2016/10/white-wood-wall-texture.jpg") no-repeat center center;
    background-size: cover;
    content: ' ';
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    will-change: transform;
    z-index: -999999;
}