Скорость работы сайта является важнейшей частью юзабилити, а так же влияет на ранжирование поисковыми сетями. В данной статье будут разбираться способы ускорения работы сайта средствами 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; }