Почему фризит лоадер при загрузке страницы?

Question

[nagge101]

Здравствуйте.
У меня есть страница сайта ссылка
При загрузке мы видим лоадер, который неприятно так фризит в начале.
В целом я так понимаю у меня фризит только при отрисовке dom(сделал оптимизацию), но все равно, не шибко помогло. Может вы поможете?

Comments

[Андрей]

та же проблема: ссылка

[Антон]

Chrome Performance говорит что яндекс метрика `https://mc.yandex.ru/metrika/tag.js` блочит основной поток.

Answer 1

[Антон Усачев]

Фризит, потому что:
1. это картинка и ей нужно больше времени на подгрузку
2. это картинка и ей нужно больше времени на отрисовку
3. картинки вставлены через background, поэтому их загрузка начинается после построения браузером цсс, что также дает задержку

Нужно вынести картинки в img. В идеале вообще отрисовать их в цсс. Можно для анимированной картинки добавить will-change: transform;.

Заметил бонусом: при наведении на верхнее меню дроп с players выдает артефакты (Хром). Решается просто:

* {
      backface-visibility: hidden;
}