Почему сайт тормозит: reflow, repaint, composite

Чтобы показать страницу, браузер проходит одну и ту же цепочку. Понимать её нужно ровно затем, чтобы знать: с какого этапа начнётся пересчёт после твоей правки.

Отсюда правило, которое повторяют в каждой статье про анимацию: анимируй только transform и opacity. Теперь понятно, почему именно их: только они не заставляют браузер пересчитывать раскладку и перерисовывать пиксели.

/* Каждый кадр — новая раскладка всей страницы */
@keyframes slide {
  from { left: 0; }
  to   { left: 300px; }
}

.box {
  position: relative;
  animation: slide 1s infinite alternate;
}

/* Раскладка не трогается вовсе */
@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(300px); }
}

.box {
  animation: slide 1s infinite alternate;
}

Отдельная беда, которая случается в скриптах. Браузер откладывает пересчёт раскладки до последнего — копит правки и делает всё разом.

Но если после записи сразу прочитать геометрию, браузер обязан посчитать её немедленно. Чередование записи и чтения в цикле заставляет его пересчитывать раскладку на каждой итерации.

<script>
// Читаем и пишем вперемешку — пересчёт на каждой итерации
items.forEach((el) => {
  el.style.width = el.offsetWidth + 10 + 'px';
});
</script>

<script>
// Сначала всё прочитали…
const widths = items.map((el) => el.offsetWidth);

// …потом всё записали
items.forEach((el, i) => {
  el.style.width = widths[i] + 10 + 'px';
});
</script>

will-change просит браузер заранее вынести элемент на отдельный слой. Это помогает — но у слоя есть цена: память видеокарты.

Свойство, поставленное «на всякий случай» всем подряд, ухудшает производительность, а не улучшает. На слабых устройствах десяток лишних слоёв заметен сразу.

1/* Плохо: слой существует всегда, даже когда ничего не происходит */2.card { will-change: transform; }34/* Хорошо: обещание даётся прямо перед анимацией */5.card { transition: transform .3s var(--ease); }67.card-list:hover .card { will-change: transform; }89/* Ещё лучше — вообще не трогать: браузер и так создаёт слой10   для transform-анимаций, когда это нужно */

Два свойства, которые говорят браузеру: «сюда можно не заглядывать».

content-visibility: auto пропускает раскладку и отрисовку содержимого, пока блок за пределами экрана. На длинной странице с сотней карточек это самая дешёвая оптимизация из существующих.

contain обещает, что внутренние изменения не выйдут наружу, — браузер перестаёт пересчитывать соседей.

1.post {2  /* Содержимое не считается, пока блок далеко от экрана */3  content-visibility: auto;45  /* Обязательно: иначе полоса прокрутки будет прыгать,6     ведь высоту невычисленного блока браузер не знает */7  contain-intrinsic-size: auto 420px;8}

Гадать не нужно. Вкладка Performance в инструментах разработчика записывает всё, что браузер делал в каждом кадре.

1@layer components {2  /* Шапка прячется при прокрутке вниз.3     Двигаем transform, а не top — иначе пересчёт на каждом кадре */4  .header {5    position: sticky;6    inset-block-start: 0;7    transition: transform .25s var(--ease);8  }910  .header.is-hidden { transform: translateY(-100%); }1112  /* Длинная лента: браузер не считает то, чего не видно */13  .feed__item {14    content-visibility: auto;15    contain-intrinsic-size: auto 380px;16  }1718  /* Карточка: тень появляется через opacity отдельного слоя,19     а не через анимацию box-shadow */20  .card { position: relative; }2122  .card::after {23    content: "";24    position: absolute;25    inset: 0;26    border-radius: inherit;27    box-shadow: 0 12px 30px -18px rgb(20 24 48 / .5);28    opacity: 0;29    transition: opacity .25s var(--ease);30  }3132  .card:hover::after { opacity: 1; }33}

• Оптимизировать без замера. Половина «оптимизаций» из статей не даёт ничего в конкретном проекте, а часть вредит. Сначала запись, потом правка.
• Ставить will-change везде. Каждый слой занимает память видеокарты. На телефоне это ощутимо.
• Гнаться за кадрами в статике. Если на странице нет анимаций и прокрутки, разница между этапами не важна вовсе.
• Заменять читаемый код на быстрый заранее. Сложный приём ради миллисекунды, которую никто не заметит, — плохая сделка.

<div class="list">  <article class="card">Первая</article>  <article class="card">Вторая</article>  <article class="card">Третья</article></div>

.list { display: grid; gap: 12px; }​.card {  position: relative;  left: 0;  padding: 16px;  background: #f4f4f8;  border-radius: 12px;​  /* 3. Висит всегда — лишние слои в памяти */  will-change: transform, box-shadow;​  /* 1. left запускает пересчёт раскладки */  /* 2. box-shadow анимируется напрямую */  transition: left .3s ease, box-shadow .3s ease;  box-shadow: 0 0 0 rgb(20 24 48 / 0);}​.card:hover {  left: 8px;  box-shadow: 0 12px 30px -18px rgb(20 24 48 / .5);}

1<div class="list">2  <article class="card">Первая</article>3  <article class="card">Вторая</article>4  <article class="card">Третья</article>5</div>

1.list { display: grid; gap: 12px; }23.card {4  position: relative;5  padding: 16px;6  background: #f4f4f8;7  border-radius: 12px;89  /* Двигаем готовый слой — раскладка не трогается */10  transform: translateX(0);11  transition: transform .3s ease;12}1314/* Тень живёт отдельным слоем и появляется через прозрачность */15.card::after {16  content: "";17  position: absolute;18  inset: 0;19  border-radius: inherit;20  box-shadow: 0 12px 30px -18px rgb(20 24 48 / .5);21  opacity: 0;22  transition: opacity .3s ease;23  pointer-events: none;24}2526/* Обещание браузеру — только на время взаимодействия */27.list:hover .card { will-change: transform; }2829.card:hover { transform: translateX(8px); }30.card:hover::after { opacity: 1; }