Zasada 01

Nic nie skacze

Przesuwający się interfejs to złamana obietnica: użytkownik celuje w przycisk, a trafia w reklamę. Każdy element, który pojawia się asynchronicznie, taki jak obraz, baner czy wynik zapytania, musi mieć zarezerwowane wymiary, zanim dotrze do przeglądarki.

Ta sama strona, dwa charaktery

Baner i ilustracja docierają z opóźnieniem. Po lewej spychają treść, po prawej wchodzą w zarezerwowane miejsce.

✕ Bez rezerwacji

Baner promocyjny 728×160

Ten akapit czytasz w trakcie ładowania strony. W wersji bez rezerwacji miejsca każdy element, który dociera z opóźnieniem, zepchnie go w dół dokładnie w momencie, w którym sięgasz po przycisk poniżej.

Ilustracja artykułu 1600×700

✓ Z rezerwacją

Baner promocyjny 728×160

Ilustracja artykułu 1600×700

Reguły

Każdy obraz i osadzenie ma zadeklarowane wymiary lub aspect-ratio.
Kontener na dane asynchroniczne istnieje od pierwszego renderu i trzyma wysokość.
Treść nigdy nie spycha w dół tego, co użytkownik właśnie czyta lub w co celuje.
Cumulative Layout Shift traktujemy jak błąd krytyczny, nie jak metrykę do optymalizacji.

Wzorzec w kodzie

Container trzyma kształt niezależnie od danych

function Cover({ url }: { url?: string }) {
  return (
    <div className="aspect-video overflow-hidden rounded-lg">
      {url ? (
        <img
          src={url}
          alt=""
          width={1600}
          height={900}
          className="size-full object-cover"
        />
      ) : (
        <div className="skeleton size-full" />
      )}
    </div>
  );
}

Antywzorzec vs wzorzec: warunkowy mount kontra warunkowe wypełnienie

{reklama && <Banner dane={reklama} />}

<div className="aspect-[16/3.5]">
  {reklama ? <Banner dane={reklama} /> : <div className="skeleton size-full" />}
</div>