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