Przesuwanie się layoutu (CLS)

1. Obrazy bez wymiarów

Obrazy bez atrybutów width i height powodują przesunięcia, gdy przeglądarka rezerwuje przestrzeń dopiero po załadowaniu obrazu.

<img src="image.jpg" alt="Description" />

<img 
  src="image.jpg" 
  alt="Description"
  width="800"
  height="600"
  loading="lazy"
/>

2. Fonty bez font-display

Fonty bez font-display: swap mogą powodować FOIT (Flash of Invisible Text) lub FOUT (Flash of Unstyled Text), co prowadzi do przesunięć layoutu.

@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');
  font-display: swap; /* Pokazuje fallback podczas ładowania */
}

3. Dynamically injected content

Treść dodawana dynamicznie (reklamy, widgety, komentarze) może przesuwać istniejącą treść.

• Reklamy wstawiane przez JavaScript
• Widgety społecznościowe
• Komentarze ładowane asynchronicznie
• Embedded content (YouTube, mapy)

4. Animacje i transitions

Animacje, które zmieniają rozmiar lub pozycję elementów, mogą powodować przesunięcia layoutu.

/* Dobrze - nie powoduje reflow */
.element {
  transform: translateX(10px);
  opacity: 0.8;
}

/* Źle - powoduje reflow */
.element {
  top: 10px;
  left: 10px;
}

Krok 1: Sprawdź CLS w PageSpeed Insights

1. Wejdź na PageSpeed Insights
2. Sprawdź wartość CLS w sekcji Core Web Vitals
3. Przejrzyj wizualizację przesunięć layoutu

Krok 2: Użyj Chrome DevTools

1. Otwórz Chrome DevTools (F12)
2. Przejdź do zakładki "Performance"
3. Włącz "Web Vitals" overlay
4. Nagraj ładowanie strony
5. Sprawdź sekcję "Experience" - zaznaczone elementy to miejsca przesunięć

Krok 3: Web Vitals Extension

1. Zainstaluj Web Vitals Extension
2. Otwórz stronę i sprawdź wartość CLS w czasie rzeczywistym
3. Scrolluj stronę, aby zobaczyć wszystkie przesunięcia

1. Dodaj wymiary do obrazów

Zawsze dodawaj atrybuty width i height do obrazów:

<img 
  src="image.webp" 
  alt="Description"
  width="800"
  height="600"
  loading="lazy"
/>

Dla responsywnych obrazów użyj aspect-ratio w CSS:

img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9; /* Zachowuje proporcje */
}

2. Rezerwuj miejsce dla dynamicznej treści

Dla reklam, widgetów i embedded content zarezerwuj miejsce w CSS:

/* Rezerwuj miejsce dla reklamy */
.ad-container {
  min-height: 250px; /* Standardowa wysokość reklamy */
  background-color: #f0f0f0;
}

/* Rezerwuj miejsce dla widgetu */
.social-widget {
  min-height: 400px;
}

3. Użyj font-display: swap

Zawsze używaj font-display: swap dla fontów:

@font-face {
  font-family: 'MainFont';
  src: url('/fonts/main-font.woff2') format('woff2');
  font-display: swap;
}

4. Preload krytycznych fontów

<link 
  rel="preload" 
  href="/fonts/main-font.woff2" 
  as="font" 
  type="font/woff2" 
  crossorigin="anonymous"
/>

5. Unikaj animacji zmieniających layout

Używaj transform i opacity zamiast zmiany top/left/width/height:

.element {
  animation: move 1s;
}
@keyframes move {
  from { left: 0; }
  to { left: 100px; }
}

.element {
  animation: move 1s;
}
@keyframes move {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}