optymalizacja właściwości CSS

optymalna animacja elementów i poprawienie płynności

GPU = Graphics Processing Unit, czyli procesor graficzny, specjalny układ scalony w urządzeniu (komputer, telefon, tablet), który odpowiada głównie za przetwarzanie grafiki i obliczenia równoległe. GPU jest zoptymalizowane pod masowe operacje na wielu pikselach lub wierzchołkach grafiki jednocześnie.
CPU = Central Processing Unit, który jest „ogólnym mózgiem” komputera

właściwości przyjazne GPU – GPU-friendly:

• transform (np. translate, scale, rotate)
• opacity

ciężkie właściwości, które wymuszają reflow/repaint, czyli ponowne przeliczenie układu strony – CPU-heavy:

• width,
• height,
• left,
• top,
• margin,
• padding,
• box-shadow,
• background-color

Typowe ciężkie właściwości i zalecane zamienniki

1. width / height -> zastąp transform: scale(1.1); -> efekt „powiększenia” zamiast realnej zmiany wymiarów,
2. margin / padding -> zastąp transform: translateX lub transform: translateY,
3. position (top/left/right/bottom) -> zastąp transform: translateX lub transform: translateY,
4. background-color / gradient -> zastąp animacją opacity pseudo-elementu z gradientem/kolorem,
5. border / border-radius -> zmiana grubości granicy zmienia box model -> użyj box-shadow jako „border” lub pseudo-elemntu z zmiana koloru border-color z transparent na wybrany,
6. box-shadow -> animowany bywa ciężki -> zamień na opacity z 0 na 1 pseudo-elementu z rozmyciem box-shadow

Unikaj cieni i skomplikowanych efektów:

box-shadow i filter: blur() są szczególnie ciężkie w animacjach, jeśli musisz ich użyć, rozważ transform: scale + opacity zamiast np. animowania promienia cienia.

// zamiast border
.element {
  transition: box-shadow 0.3s;
}
.element:hover {
  box-shadow: 0 0 0 3px #0cf;
}

.element {
  position: relative;
}
.element::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  transition: border-color 0.3s;
}
.element:hover::before {
  border-color: #0cf;
}

optymalizacja dzięki will-change

Jeśli wiesz, że element będzie animowany dodaj will-change, to podpowiada przeglądarce, żeby przygotowała renderowanie na GPU.
⚠️ Ważne! Nie nadużywaj – zbyt dużo will-change obciąży pamięć. idealna ilość na stronę

Jak działa will-change?

Kiedy ustawisz np. will-change: transform, opacity; przeglądarka rezerwuje wcześniej pamięć GPU i tworzy osobną warstwę renderowania dla tego elementu. Dzięki temu animacja jest płynna.
Ale każda dodatkowa warstwa = więcej pamięci VRAM i obliczeń.

Jak używać mądrze?

• bezpiecznie: kilka–kilkanaście elementów na stronie (np. główne przyciski, karty w galerii), czyli 10–20 elementów max z will-change na stronie jest zwykle ok,
• ryzykownie: kilkadziesiąt–setki elementów (np. wszystkie wiersze w tabeli SharePoint). Wtedy zaczyna się problem z pamięcią i wydajnością,
• jeśli potrzebujesz więcej, stosuj will-change tylko na chwilę – np. dopiero w :hover albo w momencie, kiedy element staje się widoczny w viewport,
• dodaj na stałe tylko dla kluczowych elementów (np. menu, przyciski CTA, karty),
• dodawaj will-change tylko wtedy, gdy naprawdę widać przycinanie animacji,
• alternatywa – używaj bibliotek animacji (np. GSAP), które same zarządzają optymalizacją warstw

Poniżej znajdziesz przydatny mixin w CSS (SCSS), który będzie automatycznie dodawał will-change tylko w trakcie hover/aktywnych animacji:

@mixin will-change-on-hover($properties...) {
  transition: $properties 0.3s ease;

  &:hover,
  &:focus {
    will-change: $properties;
  }
}

✨ Protipy

• łącz animacje: np. delikatne scale + opacity daje bardziej „premium” efekt niż sama zmiana koloru
• testuj w DevTools → Rendering → Paint flashing, żeby widzieć co faktycznie się odmalowuje

Testowanie w DevTools

W Chrome/Edge → Performance lub zakładka Rendering → zaznacz Paint flashing → zobaczysz co się maluje. Jeśli przy hover miga pół strony, to znaczy, że animujesz złą właściwość.