Ускорение работы средствами 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);

Альтернативное решение работает без указания стиля, только скрипт:

(function() {
  var supportsPassive = eventListenerOptionsSupported();  

if (supportsPassive) {
    var addEvent = EventTarget.prototype.addEventListener;
    overwriteAddEvent(addEvent);
  }

  function overwriteAddEvent(superMethod) {
    var defaultOptions = {
      passive: true,
      capture: false
    };

    EventTarget.prototype.addEventListener = function(type, listener, options) {
      var usesListenerOptions = typeof options === 'object';
      var useCapture = usesListenerOptions ? options.capture : options;

      options = usesListenerOptions ? options : {};
      options.passive = options.passive !== undefined ? options.passive : defaultOptions.passive;
      options.capture = useCapture !== undefined ? useCapture : defaultOptions.capture;

      superMethod.call(this, type, listener, options);
    };
  }

  function eventListenerOptionsSupported() {
    var supported = false;
    try {
      var opts = Object.defineProperty({}, 'passive', {
        get: function() {
          supported = true;
        }
      });
      window.addEventListener("test", null, opts);
    } catch (e) {}

    return supported;
  }
})();

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;
}

Поделиться в соц. сетях: