CLS - jak naprawić Cumulative Layout Shift
CLS (Cumulative Layout Shift) mierzy niestabilność wizualną strony - jak bardzo elementy przesuwają się podczas ładowania. Irytujące przeskoki layoutu nie tylko frustrują użytkowników, ale też negatywnie wpływają na SEO. Dobry CLS to poniżej 0.1.
Krótka odpowiedź
Czym jest CLS i jak jest mierzony
Cumulative Layout Shift sumuje wszystkie nieoczekiwane przesunięcia layoutu podczas całego życia strony.
Wzór:
CLS = Impact fraction × Distance fraction
- Impact fraction: % viewport zajęty przez przesuwający się element
- Distance fraction: jak daleko się przesunął (% viewport)
Progi oceny:
- Dobry: ≤ 0.1
- Wymaga poprawy: 0.1 - 0.25
- Słaby: > 0.25
Co NIE jest liczone jako layout shift:
- Przesunięcia w odpowiedzi na interakcję użytkownika (klik, scroll)
- Przesunięcia w ciągu 500ms od interakcji
- Elementy poza viewport
Co JEST liczone:
- Przesunięcia bez interakcji użytkownika
- Elementy zmieniające rozmiar (np. obrazy bez wymiarów)
- Dynamicznie wstawiane treści
Najczęstsze przyczyny złego CLS
1. Obrazy bez wymiarów:
Przeglądarka nie zna rozmiaru obrazu dopóki się nie załaduje. Tekst pod obrazem "skacze".
```html
```
2. Reklamy, embedy, iframes:
Dynamicznie ładowane elementy o nieznanym rozmiarze. Rozwiązanie: kontener z min-height.
3. Web fonty (FOIT/FOUT):
Font-display: swap powoduje przeskok gdy font się załaduje. Użyj font-display: optional lub dopasuj rozmiar fallback fontu.
4. Dynamicznie wstawiane treści:
Banery cookies, powiadomienia, chat widget wstawiane na górze strony.
5. Animacje zmieniające layout:
Animacje używające top/left/width/height zamiast transform.
Jak naprawić CLS - praktyczne rozwiązania
Obrazy i video:
- Zawsze dodawaj width i height
- Używaj aspect-ratio w CSS: `aspect-ratio: 16 / 9;`
- Placeholder (blur, solid color) przed załadowaniem
Reklamy i embedy:
```css
.ad-container {
min-height: 250px; /* lub dokładny rozmiar reklamy */
}
```
Fonty:
```css
@font-face {
font-family: 'MyFont';
font-display: optional; /* Lub swap z dopasowanym fallbackiem */
}
```
Użyj narzędzia Font Style Matcher do dopasowania metryki fallback fontu.
Dynamiczne treści:
- Wstawiaj na dole strony, nie na górze
- Rezerwuj miejsce z góry jeśli znasz rozmiar
- Używaj overlay zamiast wstawiania do DOM
Animacje:
```css
/* Źle - powoduje layout shift */
.element { left: 0; transition: left 0.3s; }
/* Dobrze - nie powoduje layout shift */
.element { transform: translateX(0); transition: transform 0.3s; }
```
Debugowanie CLS
Chrome DevTools > Performance:
1. Nagraj ładowanie strony
2. Zaznacz "Layout Shift Regions" w ustawieniach
3. Zobacz czerwone ramki wokół przesuwających się elementów
Web Vitals Extension:
Pokazuje CLS w czasie rzeczywistym. Kliknij, żeby zobaczyć szczegóły każdego shift.
Layout Shift Debugger (snippet):
```javascript
new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
console.log('Layout shift:', entry);
}
}).observe({type: 'layout-shift', buffered: true});
```
Search Console > Core Web Vitals:
Pokazuje URL-e z problemami CLS na danych rzeczywistych użytkowników.
Testuj na wolnym połączeniu:
Problemy CLS często ujawniają się dopiero przy wolnym internecie (np. 3G w DevTools).